Crea funciones basadas en IA generativa potenciadas por tus datos con Genkit

1. Antes de comenzar

En este codelab, aprenderás a usar Genkit para integrar la IA generativa en tu app. Genkit es un framework de código abierto que te ayuda a compilar, implementar y supervisar apps impulsadas por IA listas para la producción.

Genkit está diseñado para desarrolladores de apps y te ayuda a integrar fácilmente potentes capacidades de IA en tus apps con patrones y paradigmas conocidos. El equipo de Firebase lo creó aprovechando nuestra experiencia en la creación de herramientas que usan millones de desarrolladores en todo el mundo.

Requisitos previos

  • Conocimiento de Firestore, Node.js y TypeScript

Qué aprenderás

  • Cómo crear apps más inteligentes con las capacidades avanzadas de búsqueda de similitud de vectores de Firestore
  • Cómo implementar de forma práctica la IA generativa en tus apps con Genkit
  • Prepara tu solución para la implementación y la integración.

Requisitos

  • Un navegador de tu elección, como Google Chrome
  • Un entorno de desarrollo con un editor de código y una terminal
  • Una Cuenta de Google para crear y administrar tu proyecto de Firebase

2. Revisa la app web y los servicios en la nube que se usan

En esta sección, revisarás la app web que compilarás con este codelab y aprenderás sobre los servicios en la nube que usarás.

App web

En este codelab, trabajarás en la base de código de una app llamada Compass, una app de planificación de vacaciones. Los usuarios pueden elegir un destino, buscar actividades en él y crear un itinerario para su viaje.

En este codelab, implementarás dos funciones nuevas que tienen como objetivo mejorar la participación del usuario en la página principal de la app. Ambas funciones están potenciadas por IA generativa:

  • Actualmente, la app muestra una lista estática de destinos. Lo cambiarás para que sea dinámico.
  • Implementarás un itinerario que se complete automáticamente para aumentar la permanencia.

d54f2043af908fb.png

Servicios utilizados

En este codelab, usarás muchos servicios y funciones de Firebase y Cloud, y se te proporcionará la mayor parte del código de partida para ellos. En la siguiente tabla, se incluyen los servicios que usarás y los motivos para usarlos.

Servicio

Motivo de uso

Genkit

Usarás Genkit para incorporar la IA generativa a una aplicación de Node.js o Next.js.

Cloud Firestore

Almacenas datos en Cloud Firestore, que luego se usan para la búsqueda de similitud de vectores.

Vertex AI de Google Cloud

Usas modelos de base de Vertex AI (como Gemini) para potenciar tus funciones basadas en IA.

Firebase App Hosting

De manera opcional, puedes usar el nuevo y optimizado Firebase App Hosting para entregar tu app web dinámica de Next.js (conectada a un repo de GitHub).

3. Configura tu entorno de desarrollo

Verifica la versión de Node.js:

  1. En tu terminal, verifica que tengas instalada la versión 20.0.0 o una posterior de Node.js:
    node -v
  2. Si no tienes la versión 20.0.0 o una posterior de Node.js, descarga la versión LTS más reciente y, luego, instálala.

Obtén el código fuente del codelab

Si tienes una cuenta de GitHub, haz lo siguiente:

  1. Crea un repositorio nuevo con nuestra plantilla de github.com/FirebaseExtended/codelab-ai-genkit-rag65ef006167d600ab.png
  2. Crea una clonación local del repositorio de GitHub del codelab que acabas de crear:
    git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag

Si no tienes instalado Git o prefieres no crear un repositorio nuevo, haz lo siguiente:

Descarga el repositorio de GitHub como un archivo ZIP.

Revisa la estructura de carpetas

En tu máquina local, busca el repositorio clonado y revisa la estructura de carpetas:

Carpeta

Descripción

load-firestore-data

Herramienta de línea de comandos auxiliar para propagar rápidamente tu colección de Firestore

*Todo lo demás

Código de la app web de Next.js

La carpeta raíz incluye un archivo README.md que ofrece un inicio rápido para ejecutar la app web con instrucciones optimizadas. Sin embargo, si es la primera vez que aprendes sobre este tema, debes completar este codelab (en lugar de la guía de inicio rápido), ya que contiene el conjunto de instrucciones más completo.

Si no sabes con certeza si aplicaste el código correctamente según las instrucciones de este codelab, puedes encontrar el código de solución en la rama de Git end.

Instala Firebase CLI

  1. Verifica que tengas instalada la CLI de Firebase y que sea la versión 13.6 o posterior:
    firebase --version
  2. Si tienes Firebase CLI instalado, pero no es la versión 13.6 o una versión posterior, actualízalo:
    npm update -g firebase-tools
  3. Si no tienes Firebase CLI, instálalo:
    npm install -g firebase-tools

Si no puedes actualizar o instalar Firebase CLI debido a errores de permisos, consulta la documentación de npm o usa otra opción de instalación.

Accede a Firebase

  1. En la terminal, accede a Firebase:
    firebase login
    Si la terminal indica que ya accediste a Firebase, puedes omitir la sección Configura tu proyecto de Firebase de este codelab.
  2. En tu terminal, según si quieres que Firebase recopile datos, ingresa Y o N. (cualquiera de las opciones funciona para este codelab)
  3. En tu navegador, selecciona tu Cuenta de Google y haz clic en Permitir.

Instala la CLI de gcloud de Google Cloud

  1. Instala la CLI de gcloud.
  2. En tu terminal, accede a Google Cloud:
    gcloud auth login

4. Configura el proyecto de Firebase

En esta sección, configurarás un proyecto de Firebase y registrarás una app web de Firebase en él. También habilitarás algunos servicios que usa la app web de ejemplo más adelante en este codelab.

Todos los pasos de esta sección se realizan en Firebase console.

Crea un proyecto de Firebase

  1. Accede a la consola de Firebase con la misma Cuenta de Google que usaste en el paso anterior.
  2. Haz clic en el botón para crear un proyecto nuevo y, luego, ingresa un nombre (por ejemplo, Compass Codelab).
  3. Haz clic en Continuar.
  4. Si se te solicita, revisa y acepta las Condiciones de Firebase y, luego, haz clic en Continuar.
  5. (Opcional) Habilita la asistencia de IA en Firebase console (llamada "Gemini en Firebase").
  6. Para este codelab, no necesitas Google Analytics, por lo que debes desactivar la opción de Google Analytics.
  7. Haz clic en Crear proyecto, espera a que se aprovisione y, luego, haz clic en Continuar.

Agrega una app web a tu proyecto de Firebase

  1. Navega a la pantalla Project Overview en tu proyecto de Firebase y, luego, haz clic en Un ícono con corchetes angulares de apertura, una barra y corchetes angulares de cierre, que representa una app web Web.El botón Web en la parte superior de la descripción general del proyecto en Firebase console
  2. En el cuadro de texto Sobrenombre de la app, ingresa un sobrenombre memorable, como My Compass Codelab App. Puedes dejar sin marcar la casilla de verificación para configurar Firebase Hosting, ya que, de manera opcional, configurarás un servicio de hosting en el último paso de este codelab.
    Cómo registrar la app web
  3. Haz clic en Registrar app > Ir a la consola.

Perfecto. Ahora registraste una app web en tu nuevo proyecto de Firebase.

Actualiza tu plan de precios de Firebase

Para usar Genkit y Vertex AI (y sus servicios de Cloud subyacentes), tu proyecto de Firebase debe tener el plan de precios de pago por uso (Blaze), lo que significa que está vinculado a una cuenta de Facturación de Cloud.

  • Una cuenta de facturación de Cloud requiere una forma de pago, como una tarjeta de crédito.
  • Si es la primera vez que usas Firebase y Google Cloud, verifica si cumples con los requisitos para obtener un crédito de USD 300 y una cuenta de Facturación de Cloud de prueba gratuita.
  • Si realizas este codelab como parte de un evento, pregúntale al organizador si hay créditos de Cloud disponibles.

Obtén más información sobre los precios de Vertex AI.

Para actualizar tu proyecto al plan Blaze, sigue estos pasos:

  1. En Firebase console, selecciona la opción para actualizar tu plan.
  2. Selecciona el plan Blaze. Sigue las instrucciones en pantalla para vincular una cuenta de Facturación de Cloud a tu proyecto.
    Si necesitas crear una cuenta de Facturación de Cloud como parte de esta actualización, es posible que debas volver al flujo de actualización en Firebase console para completar la actualización.

Configura Cloud Firestore

  1. En el panel izquierdo de Firebase console, expande Compilación y, luego, selecciona Base de datos de Firestore.
  2. Haz clic en Crear base de datos.
  3. Deja el ID de la base de datos establecido en (default).
  4. Selecciona una ubicación para tu base de datos y, luego, haz clic en Siguiente.
    Para una app real, debes elegir una ubicación cercana a tus usuarios.
  5. Haz clic en Comenzar en modo de prueba. Lee la renuncia de responsabilidad sobre las reglas de seguridad.
    No distribuyas ni expongas una app de forma pública sin agregar reglas de seguridad para tu base de datos.
  6. Haz clic en Crear.

Habilita Vertex AI

Usa la CLI de gcloud para configurar Vertex AI. En todos los comandos de esta página, asegúrate de reemplazar YOUR_PROJECT_ID por el ID de tu proyecto de Firebase.

  1. En tu terminal, configura el proyecto predeterminado para el SDK de Google Cloud:
    gcloud config set project YOUR_PROJECT_ID
  2. Si ves un mensaje de advertencia que dice "ADVERTENCIA: Tu proyecto activo no coincide con el proyecto de cuota en tu archivo local de credenciales predeterminadas de la aplicación. Esto podría generar problemas de cuota inesperados", ejecuta el siguiente comando para establecer el proyecto de cuota:
    gcloud auth application-default set-quota-project YOUR_PROJECT_ID
  3. Habilita el servicio de Vertex AI en tu proyecto:
    gcloud services enable aiplatform.googleapis.com

5. Configura la app web

Para ejecutar la app web, deberás ejecutar comandos en la terminal y agregar código en el editor de código. En todos los comandos de esta página, asegúrate de reemplazar YOUR_PROJECT_ID por el ID de tu proyecto de Firebase.

Configura Firebase CLI para que se dirija a tu proyecto

  1. En la terminal, navega al directorio raíz de tu proyecto del codelab.
  2. Para que Firebase CLI ejecute todos los comandos en tu proyecto de Firebase, ejecuta el siguiente comando:
    firebase use YOUR_PROJECT_ID

Importa datos de muestra a Firestore

Para que puedas comenzar rápidamente, este codelab te proporciona datos de muestra pregenerados para Firestore.

  1. Para permitir que la base de código local ejecute código que normalmente usaría una cuenta de servicio, ejecuta el siguiente comando en tu terminal:
    gcloud auth application-default login
    Se abrirá una pestaña nueva en el navegador. Accede con la misma Cuenta de Google que usaste en los pasos anteriores.
  2. Para importar los datos de muestra de Firestore, ejecuta los siguientes comandos:
    cd load-firestore-data
npm ci
node index.js YOUR_PROJECT_ID
cd ..
  3. Para verificar que los datos se agregaron correctamente a tu base de datos, ve a la sección Firestore de tu proyecto de Firebase en Firebase console.Deberías ver el esquema de datos importado y su contenido.Datos de muestra de Compass en Firebase console

Conecta tu app web a tu proyecto de Firebase

La base de código de tu app web debe estar asociada al proyecto de Firebase correcto para utilizar sus servicios, como la base de datos. Para ello, debes agregar la configuración de Firebase a la base de código de tu app. Esta configuración incluye valores esenciales, como el ID del proyecto, la clave de API y el ID de la app, así como otros valores que permiten que la app interactúe con Firebase.

  1. Obtén la configuración de Firebase de tu app:
    1. En Firebase console, navega a tu proyecto de Firebase.
    2. En el panel lateral izquierdo, haz clic en el ícono de ajustes junto a Project Overview y selecciona Project settings.
    3. En la tarjeta "Tus apps", selecciona tu aplicación web.
    4. En la sección "Configuración del SDK", selecciona la opción Config.
    5. Copia el fragmento. Comienza con const firebaseConfig ....
  2. Agrega tu configuración de Firebase a la base de código de tu aplicación web:
    1. En tu editor de código, abre el archivo src/lib/genkit/genkit.config.ts.
    2. Reemplaza la sección pertinente por el código que copiaste.
    3. Guarda el archivo.

Obtén una vista previa de la app web en tu navegador

  1. En tu terminal, instala las dependencias y, luego, ejecuta la app web:
    npm install
npm run dev:next
  2. En tu navegador, navega a la URL de Hosting alojada localmente para ver la aplicación web. Por ejemplo, en la mayoría de los casos, la URL es http://localhost:3000/ o similar.

Pantalla principal de la app de Brújula

Compass es una app de Next.js que usa React Server Components, y esta es la página principal.

Haz clic en Encuentra el viaje de tus sueños. Puedes ver que muestra algunos datos codificados para algunos destinos fijos:

Pantalla de Encuentra tu viaje ideal

Explora libremente. Cuando quieras continuar, haz clic en el botón de inicio Página principal (en la esquina superior derecha).

6. Sumérgete en la IA generativa con Genkit

Ahora puedes aprovechar el poder de la IA generativa en tu aplicación. En esta sección del codelab, se te guiará para implementar una función que sugiere destinos según la inspiración proporcionada por el usuario. Usarás Genkit y Vertex AI de Google Cloud como proveedor del modelo generativo (usarás Gemini).

Genkit puede almacenar el estado del flujo y el registro (lo que te permite inspeccionar el resultado de la ejecución de los flujos de Genkit). En este codelab, usarás Firestore para almacenar estos registros.

Como último paso de este codelab, implementarás tu app de Genkit en Firebase App Hosting.

Conecta tu app de Genkit a tu proyecto de Firebase

Ya conectamos Genkit a tu proyecto editando src/lib/genkit/genkit.config.ts en el paso anterior.

Inicia la IU para desarrolladores de Genkit

Genkit incluye una IU basada en la Web que te permite interactuar con LLM, flujos de Genkit, recuperadores y otros componentes de IA.

En tu terminal, ejecuta lo siguiente:

npm run dev:genkit

En tu navegador, ve a la URL de Genkit alojada de forma local. En la mayoría de los casos, es http://localhost:4000/.

Interactúa con Gemini

Ahora puedes usar la IU para desarrolladores de Genkit para interactuar con cualquiera de los modelos compatibles o con cualquier otro componente de IA, como las instrucciones, los recuperadores y los flujos de Genkit.

Por ejemplo, pídele a Gemini que te sugiera unas vacaciones. Observa cómo puedes usar las instrucciones del sistema para dirigir el comportamiento del modelo según tus necesidades específicas. Esto también funciona para los modelos que no admiten instrucciones del sistema de forma nativa.

Cómo interactuar con el modelo de Gemini en la IU para desarrolladores de Genkit

Administra prompts

Genkit presenta Dotprompt, un complemento y formato de texto diseñados para optimizar la creación y administración de tus instrucciones de IA generativa. La idea principal detrás de Dotprompt es tratar las instrucciones como código, lo que te permite escribirlas, mantenerlas y controlar sus versiones junto con el código de tu aplicación.

Para usar Dotprompt, comienza con un hello-world:

  1. En tu editor de código, abre el archivo prompts/1-hello-world.prompt.
  2. En la IU para desarrolladores de Genkit, abre prompts/1-hello-world.
  3. Usa cualquier nombre o código de idioma que conozcas, o déjalo como una cadena vacía.
  4. Haz clic en Ejecutar.Usa Dotprompt para generar un saludo en sueco
  5. Prueba con algunos valores diferentes. Los modelos de lenguaje grandes son buenos para comprender instrucciones abreviadas, con errores ortográficos o incompletas en búsquedas simples como esta.

Enriquece tu resultado con datos estructurados

Además de generar texto sin formato, Genkit te permite estructurar tu resultado para mejorar la presentación y la integración en la IU de tu app. Si defines un esquema, puedes indicarle al LLM que genere datos estructurados que se alineen con el formato deseado.

Explora los esquemas de salida

También puedes especificar el esquema de salida de una llamada a LLM.

  1. En el editor de código, examina el archivo de instrucciones:
    1. Abre el archivo prompts/2-simple-itinerary.prompt.
    2. Examina los esquemas de entrada y salida definidos.
  2. Interactúa con la IU:
    1. En la IU para desarrolladores de Genkit, navega a la sección prompts/2-simple-itinerary.
    2. Proporciona datos de entrada completando los campos place y interests con datos de muestra:
      {
    "interests": [
        "Museums"
    ],
    "place": "Paris"
}
    3. Haz clic en Ejecutar.

Cómo usar Dotprompt para especificar el esquema de salida

Información sobre el resultado basado en el esquema

Observa cómo el resultado generado se ajusta al esquema definido. Al especificar la estructura deseada, le indicaste al LLM que produzca datos que se puedan analizar e integrar fácilmente en tu aplicación. Genkit valida automáticamente el resultado en función del esquema, lo que garantiza la integridad de los datos.

Además, puedes configurar Genkit para que vuelva a intentar o intente reparar el resultado si no coincide con el esquema.

Ventajas clave de los esquemas de salida

  • Integración simplificada: Incorpora fácilmente datos estructurados en los elementos de la IU de tu app.
  • Validación de datos: Garantiza la precisión y coherencia de los resultados generados.
  • Manejo de errores: Implementa mecanismos para abordar las discrepancias del esquema.

Aprovechar los esquemas de salida mejora tu experiencia con Genkit, ya que te permite crear datos estructurados y personalizados para experiencias del usuario más dinámicas y enriquecidas.

Utiliza la entrada multimodal

Imagina que tu app sugiere destinos de vacaciones personalizados en función de las imágenes que inspiran a tus usuarios. Genkit, combinado con un modelo generativo multimodal, te permite hacer realidad esta visión.

  1. En el editor de código, examina el archivo de instrucciones:
    1. Abre el archivo prompts/imgDescription.prompt.
    2. Ten en cuenta la inclusión de {{media url=this}}, que es un elemento de sintaxis de Handlebars que facilita la incorporación de imágenes en tu instrucción.
  2. Interactúa con la IU:
    1. En la IU para desarrolladores de Genkit, abre la instrucción prompts/imgDescription.
    2. Pega la URL de una imagen en el campo imageUrls. Por ejemplo, puedes usar una imagen en miniatura de Wikipedia que muestre la Torre Eiffel:
      {
    "imageUrls": [
        "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
    ]
}
    3. Haz clic en Ejecutar.

7. Implementa la recuperación con la búsqueda de similitud de vectores

Si bien generar contenido creativo con modelos de IA es impresionante, las aplicaciones prácticas a menudo requieren fundamentar el resultado en un contexto específico.

En el caso de este codelab, tienes una base de datos de destinos (lugares y actividades) y tu objetivo es garantizar que las sugerencias generadas por el modelo de Gemini hagan referencia exclusivamente a las entradas de esta base de datos.

Para cerrar la brecha entre las búsquedas no estructuradas y el contenido pertinente, aprovecharás el poder de la búsqueda de similitud de vectores en los embeddings generados.

Comprende los embeddings y la similitud de vectores

  • Vectores: Los vectores son representaciones numéricas de puntos de datos que se suelen usar para modelar información compleja, como texto o imágenes. Cada dimensión de un vector corresponde a una característica específica de los datos.
  • Modelos de embedding: Estos modelos de IA especializados transforman los datos de entrada, como el texto, en vectores de alta dimensión. Lo fascinante es que las entradas similares se asignan a vectores que están cerca unos de otros en este espacio de alta dimensión.
  • Búsqueda de similitud de vectores: Esta técnica aprovecha la proximidad de los vectores de embedding para identificar los datos pertinentes. Dada una consulta de entrada, encuentra entradas en la base de datos con vectores de incorporación similares, lo que indica una relación semántica.

Comprende cómo funciona el proceso de recuperación

  1. Incorporación de la búsqueda: La entrada del usuario (por ejemplo, "cena romántica en París") se pasa a través de un modelo de incorporación, lo que genera un vector de búsqueda.
  2. Incorporaciones de la base de datos: Lo ideal es que hayas preprocesado tu base de datos de destinos y creado vectores de incorporación para cada entrada.
  3. Cálculo de similitud: El vector de la búsqueda se compara con cada vector de incorporación de la base de datos mediante una métrica de similitud (por ejemplo, la similitud del coseno).
  4. Recuperación: Las entradas más similares de la base de datos, según su proximidad al vector de la búsqueda, se recuperan como sugerencias pertinentes.

Si incorporas este mecanismo de recuperación en tu aplicación, aprovecharás el modelo de Gemini para generar sugerencias que no solo sean creativas, sino que también estén firmemente arraigadas en tu conjunto de datos específico. Este enfoque garantiza que el resultado generado siga siendo pertinente según el contexto y esté alineado con la información disponible en tu base de datos.

Habilita la búsqueda de similitud de vectores en Firestore

En un paso anterior de este codelab, completaste tu base de datos de Firestore con lugares y actividades de ejemplo. Cada entrada de lugar incluye un campo de texto knownFor que describe sus atributos destacados, junto con un campo embedding correspondiente que contiene la representación vectorial de esta descripción.

Para aprovechar el poder de la búsqueda de similitud de vectores en estos embeddings, deberás crear un índice de Firestore. Este índice permite recuperar lugares de manera eficiente en función de la similitud de sus vectores de embedding con una búsqueda determinada.

  1. Crea el índice y asegúrate de reemplazar YOUR_PROJECT_ID por el ID de tu proyecto.
    gcloud firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config field-path=embedding,vector-config='{"dimension":"768","flat": "{}"}'
  2. En la IU para desarrolladores de Genkit, abre retrievers/placesRetriever.
  3. Haz clic en Ejecutar. Observa el objeto estructurado con texto de marcador de posición, que indica dónde implementarás la lógica del recuperador.
  4. En tu editor de código, abre el archivo src/lib/genkit/placesRetriever.ts.
  5. Desplázate hasta el final y reemplaza el marcador de posición placesRetriever por lo siguiente:
    export const placesRetriever = defineFirestoreRetriever(ai, {
  name: 'placesRetriever',
  firestore,
  collection: 'places',
  contentField: 'knownFor',
  vectorField: 'embedding',
  embedder: vertexAI.embedder('text-embedding-005', {outputDimensionality: 768}),
  distanceMeasure: 'COSINE',
});

Prueba el recuperador

  1. En la IU para desarrolladores de Genkit, abre el recuperador retrievers/placesRetriever.
  2. Proporciona la siguiente consulta:
    {
    "content": [
        {
            "text": "UNESCO"
        }
    ]
}
  3. También puedes proporcionar Opciones. Por ejemplo, a continuación, se explica cómo especificar cuántos documentos debe devolver el recuperador:
    {
    "limit": 4
}
  4. Haz clic en Ejecutar.

Puedes agregar cláusulas where a las Opciones para filtrar los datos más allá de la similitud.

8. Generación mejorada por recuperación (RAG) con Genkit

En las secciones anteriores, creaste instrucciones individuales capaces de controlar texto, JSON e imágenes, y generar destinos de vacaciones y otro contenido atractivo para tus usuarios. También implementaste una instrucción que recupera destinos relevantes de tu base de datos de Firestore. Ahora es momento de organizar estos componentes en un flujo coherente de generación aumentada por recuperación (RAG).

En esta sección, se presenta un concepto importante de Genkit llamado flujos. Los flujos son funciones con tipos estrictos y transmisión que se pueden invocar de forma local y remota, con observabilidad completa. Puedes administrar e invocar flujos desde la CLI de Genkit y la IU para desarrolladores de Genkit.

  1. En el editor de código, examina la instrucción del itinerario:
    1. Abre el archivo prompts/itineraryGen.prompt.
    2. Observa cómo se expandió la instrucción para aceptar entradas adicionales, específicamente los datos de actividades obtenidos del recuperador.
  2. En la IU para desarrolladores de Genkit, visualiza un flujo de Genkit en el archivo src/lib/genkit/itineraryFlow.ts.
    Sugerencia: Para optimizar la depuración, considera dividir los flujos extensos en pasos más pequeños y fáciles de administrar.
  3. Mejora el flujo integrando un paso de “descripción de imagen”:
    1. Ubica el comentario TODO: 2 (alrededor de la línea 81). Esto marca el punto en el que mejorarás tu flujo.
    2. Reemplaza el marcador de posición imgDescription vacío por el resultado generado por la llamada del mensaje imgDescription.
  4. Prueba el flujo:
    1. Navega a flows/itineraryFlow.
    2. Usa la siguiente entrada para probar la ejecución correcta de itineraryFlow con el paso que acabas de agregar:
      {
    "request": "Sightseeing in Paris",
    "imageUrls": [
        "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
    ]
}
    3. Haz clic en Ejecutar.
    4. Observa el resultado generado, que debería incorporar la descripción de la imagen en la sugerencia de itinerario.
  5. Si encuentras errores o comportamientos inesperados, consulta la pestaña Inspeccionar para obtener más detalles. También puedes usar esta pestaña para revisar el historial de ejecuciones de Trace Store.

RAG para tu aplicación web

  1. Para asegurarte de que la app web siga en ejecución, visita http://localhost:3000/ en tu navegador.
  2. Si la app web ya no se está ejecutando, ejecuta estos comandos en tu terminal:
    npm install
npm run dev
  3. Consulta la página de la app web Dream Your Vacation (http://localhost:3000/gemini).
  4. Consulta su código fuente (src/app/gemini/page.tsx) para ver un ejemplo de integración de Next.js.

1e626124e09e04e9.pngb059decb53c249a1.pnge31f6acf87a98cb2.png19c0c9459d5e1601.png

9. Implementa tu aplicación con Firebase App Hosting

El último paso en este recorrido es implementar tu app web. Aprovecharás Firebase App Hosting, una solución de hosting compatible con frameworks diseñada para simplificar la implementación de apps de Next.js y Angular en un backend sin servidores.

  1. Confirma los cambios en tu repositorio de Git local y, luego, envíalos a GitHub.
  2. En Firebase console, navega a App Hosting en tu proyecto de Firebase.
  3. Haz clic en Comenzar > Conectar a GitHub.
  4. Selecciona tu cuenta de GitHub y el repositorio. Haz clic en Siguiente.
  5. En Configuración de implementación > Directorio raíz, mantén el valor predeterminado.
  6. Para la rama activa, selecciona la rama principal de tu repositorio de GitHub. Haz clic en Siguiente.
  7. Ingresa un ID para tu backend (por ejemplo, compass).
  8. Cuando se te pregunte si deseas crear o asociar una app web de Firebase, elige Seleccionar una app web de Firebase existente y elige la app que creaste en un paso anterior de este codelab.
  9. Haz clic en Finalizar y, luego, en Implementar.

Supervisa el estado de la implementación

El proceso de implementación tardará unos minutos. Puedes hacer un seguimiento del progreso en la sección App Hosting de Firebase console.

Otorga permisos a tu cuenta de servicio

Para que tu backend de Node.js acceda a los recursos de Vertex AI, debes asignar el rol aiplatform.user a la cuenta de servicio de tu app:

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
--member "serviceAccount:firebase-app-hosting-compute@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
--role "roles/aiplatform.user"

Una vez que se complete el proceso, los usuarios podrán acceder a tu app web.

Implementación automática

Firebase App Hosting optimiza las actualizaciones futuras. Cada vez que envíes cambios a la rama principal de tu repositorio de GitHub, Firebase App Hosting volverá a compilar y a implementar tu app automáticamente, lo que garantizará que tus usuarios siempre disfruten de la versión más reciente.

10. Conclusión

¡Felicitaciones por completar este codelab integral!

Aprovechaste con éxito el poder de Genkit, Firestore y Vertex AI para crear un "flujo" sofisticado que genera recomendaciones de vacaciones personalizadas basadas en las preferencias y la inspiración del usuario, y fundamenta las sugerencias en los datos de tu aplicación.

A lo largo de este recorrido, adquiriste experiencia práctica con patrones de ingeniería de software esenciales para crear aplicaciones de IA generativa sólidas. Estos patrones incluyen lo siguiente:

  • Administración de instrucciones: Organiza y mantén las instrucciones como código para mejorar la colaboración y el control de versiones.
  • Contenido multimodal: Integración de diversos tipos de datos, como imágenes y texto, para mejorar las interacciones con la IA.
  • Esquemas de entrada y salida: Estructura los datos para una integración y validación sin problemas en tu aplicación.
  • Almacenes de vectores: Aprovechan los embeddings de vectores para realizar búsquedas de similitud eficientes y recuperar información pertinente.
  • Recuperación de datos: Implementar mecanismos para recuperar e incorporar datos de bases de datos en el contenido generado por IA
  • Generación mejorada por recuperación (RAG): Combina técnicas de recuperación con IA generativa para obtener resultados precisos y pertinentes según el contexto.
  • Instrumentación de flujos: Crea y organiza flujos de trabajo de IA complejos para una ejecución fluida y observable.

Si dominas estos conceptos y los aplicas en el ecosistema de Firebase, tendrás las herramientas necesarias para emprender tus propias aventuras con la IA generativa. Explora las vastas posibilidades, crea aplicaciones innovadoras y sigue ampliando los límites de lo que se puede lograr con la IA generativa.

Explora opciones de implementación alternativas

Genkit ofrece una variedad de opciones de implementación para satisfacer tus necesidades específicas, incluidas las siguientes:

Solo tienes que elegir la que mejor se adapte a tus necesidades ejecutando el siguiente comando dentro de tu carpeta de nodos (package.json):

npx genkit init

Próximos pasos