Compila apps web impulsadas por IA con Extensiones de Firebase para la API de Gemini

1. Antes de comenzar

Las Extensiones de Firebase te permiten agregar a tus apps funciones empaquetadas previamente con muy poco código, incluso funciones potenciadas por IA. En este codelab, se muestra cómo integrar dos Extensiones de Firebase en una app web para que puedas aprovechar la API de Gemini y generar descripciones de imágenes, resúmenes y hasta recomendaciones personalizadas basadas en el contexto proporcionado y las entradas del usuario final.

En este codelab, aprenderás a compilar una app web potenciada por IA que proporcione experiencias del usuario atractivas con Extensiones de Firebase.

Requisitos previos

• Conocimientos de Node.js, Next.js y TypeScript

Qué aprenderás

• Cómo usar Extensiones de Firebase para la API de Gemini para procesar el lenguaje
• Cómo usar Cloud Functions para Firebase para crear un contexto aumentado para tu modelo de lenguaje
• Cómo usar JavaScript para acceder al resultado que producen las Extensiones de Firebase

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 la creación y administración de tu proyecto de Firebase

2. Revisa la aplicación web, los servicios de Firebase y las extensiones

En esta sección, revisarás la aplicación web que compilarás con este codelab y obtendrás información sobre los servicios y las Extensiones de Firebase que usarás.

App web

En este codelab, compilarás una app web llamada Friendly Conf.

El personal de la Conferencia amigable decidió usar la IA para producir una experiencia del usuario agradable y personalizada para sus asistentes. La app de conferencias completa proporciona a los asistentes un chatbot de IA conversacional potenciado por un modelo de IA generativa multimodal (también conocido como modelo grande de lenguaje o LLM) y puede responder preguntas sobre temas generales, adaptados al programa y a los temas de la conferencia. El chatbot tiene contexto histórico y conocimiento sobre la fecha y hora actuales y los temas y el horario de Friendly Conf, por lo que sus respuestas pueden tener en cuenta todo este contexto.

Servicios de Firebase

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

Extensiones de Firebase

Las Extensiones de Firebase que usarás en este codelab incluyen lo siguiente:

• Cómo compilar un chatbot con la API de Gemini
• Tareas multimodales con la API de Gemini

Las extensiones son útiles porque reaccionan a eventos que ocurren en tu proyecto de Firebase. Las dos extensiones que se usan en este codelab responden cuando creas documentos nuevos en colecciones preconfiguradas en Cloud Firestore.

3. Configura tu entorno de desarrollo

Verifica la versión de Node.js:

1. En la terminal, verifica que tengas instalada la versión 20.0.0 de Node.js o una posterior:

   node -v
   

2. Si no tienes Node.js 20.0.0 o una versión posterior, descarga la última versión de LTS e instálala.

Obtén el código fuente para el codelab

Si tienes una cuenta de GitHub, haz lo siguiente:

1. Crea un repositorio nuevo con nuestra plantilla de github.com/FirebaseExtended/codelab-gemini-api-extensions
2. Clona el repositorio de GitHub del codelab que acabas de crear:

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

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

Descarga el repositorio de GitHub como un archivo ZIP.

Revisa la estructura de las carpetas

La carpeta raíz incluye un archivo README.md que ofrece un inicio rápido para ejecutar la aplicación web con instrucciones optimizadas. Sin embargo, si estás principiante, deberías 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 si aplicaste correctamente el código como se indica a lo largo de este codelab, puedes encontrar el código de la solución en la rama de Git end.

Instala Firebase CLI

1. Verifica que hayas instalado Firebase CLI y que su versión 13.6 o una posterior:

   firebase --version
   

2. Si tienes instalado Firebase CLI, pero no es la versión 13.6 o posterior, actualízala:

   npm update -g firebase-tools
   

3. Si no tienes instalado 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, navega a la carpeta codelab-gemini-api-extensions y accede a Firebase:

   cd codelab-gemini-api-extensions
   firebase login
   

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

4. Configura el proyecto de Firebase

En esta sección, configurarás un proyecto de Firebase y registrarás una aplicación web de Firebase en él. También habilitarás algunos servicios de Firebase que usa la aplicación web de muestra 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 Firebase console con una Cuenta de Google.
2. Haz clic en Crear un proyecto y, luego, ingresa un nombre para el proyecto (por ejemplo, AI Extensions Codelab).
   Recuerda el ID del proyecto que se te asignó automáticamente para tu proyecto de Firebase (o haz clic en el ícono Editar para establecer el ID que prefieras). Necesitarás este ID más adelante para identificar el proyecto de Firebase en Firebase CLI. Si olvidas tu ID, podrás encontrarlo más adelante en Configuración del proyecto.
3. Haz clic en Continuar.
4. Si se te solicita, revisa y acepta las condiciones de Firebase y, luego, haz clic en Continuar.
5. En este codelab, no necesitas usar Google Analytics, por lo que debes desactivar la opción correspondiente.
6. Haz clic en Crear proyecto, espera a que se aprovisione tu proyecto y, luego, haz clic en Continuar.

Agregar una app web a tu proyecto de Firebase

1. Navega a la pantalla Descripción general del proyecto en el proyecto de Firebase y, luego, haz clic en Web.
2. En el cuadro de texto Sobrenombre de la app, ingresa un sobrenombre que se pueda recordar, como My AI Extensions.
3. Haz clic en Registrar app > Siguiente > Siguiente > Ir a la consola.
   Puedes omitir todos los pasos relacionados con el "hosting" en el flujo de app web porque, de manera opcional, configurarás un servicio de hosting más adelante en este codelab.

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

Actualiza tu plan de facturación de Firebase

Para usar Extensiones de Firebase y sus servicios en la nube subyacentes, debes actualizar tu proyecto de Firebase para habilitar la facturación.

Además, ten en cuenta que, si habilitas la facturación en tu proyecto de Firebase, se te cobrarán las llamadas que la extensión haga a la API de Gemini (sin importar el proveedor que elijas, la IA de Google o Vertex AI). Obtén más información sobre los precios de la IA de Google y de Vertex AI.

Para actualizar el plan de facturación de tu proyecto, sigue estos pasos:

1. Navega a Planes de facturación de Firebase en tu proyecto de Firebase.
2. En el diálogo Planes de facturación de Firebase, selecciona el plan Blaze y cómpralo.

Habilita Firebase Authentication

1. Usa el panel de navegación de la izquierda para ir a Authentication.
2. Haz clic en Comenzar.
3. En la columna Proveedores adicionales, haz clic en Google > Habilitar.
4. En el cuadro de texto Nombre público del proyecto, ingresa un nombre útil, como My AI Extensions Codelab.
5. En el menú Correo electrónico de asistencia para el proyecto, selecciona tu dirección de correo electrónico.
6. Haz clic en Guardar.

Habilite Cloud Firestore

1. Navega a Firestore con el panel de navegación izquierdo.
2. Haz clic en Crear base de datos > Iniciar en modo de prueba > Siguiente. Más adelante en este codelab, implementarás reglas de seguridad de Firebase más sólidas.
3. Selecciona tu ubicación preferida de Cloud Firestore (o simplemente déjala como predeterminada).
4. Haz clic en Habilitar.

Habilita Cloud Storage para Firebase

1. Usa el panel de navegación izquierdo para navegar a Almacenamiento.
2. Haz clic en Comenzar > Comenzar en modo de prueba > Siguiente. Más adelante en este codelab, implementarás reglas de seguridad de Firebase más sólidas.
3. Como primero configuraste Firestore en tu proyecto, la ubicación del bucket predeterminado de Cloud Storage ya está establecida.
4. Haz clic en Listo.

En la siguiente sección de este codelab, instalarás y configurarás las dos Extensiones de Firebase que usarás en la app web durante todo este codelab.

5. Configura la extensión "Compila un chatbot con la API de Gemini"

Instala la extensión "Compila un chatbot con la API de Gemini"

1. Navega a la extensión "Build chatbot with the Gemini API".
2. Haz clic en Instalar en Firebase console.
3. Selecciona tu proyecto de Firebase y, luego, haz clic en Siguiente.
4. En la sección Revisa las APIs habilitadas y los recursos creados, haz clic en Habilitar junto a cualquier servicio que se te sugiera y, luego, en Siguiente.
5. En cada uno de los permisos que se te sugieren, selecciona Otorgar y, luego, haz clic en Siguiente.
6. Configura la extensión:
   1. En el menú Proveedor de la API de Gemini, selecciona si quieres usar la API de Gemini de la IA de Google o Vertex AI. Para los desarrolladores que usan Firebase, recomendamos usar Vertex AI.
   2. En el cuadro de texto Ruta de acceso a la colección de Firestore, ingresa: users/{uid}/messages.
      En pasos futuros de este codelab, agregar documentos a esta colección activará la extensión para llamar a la API de Gemini.
   3. En el menú Ubicación de Cloud Functions, selecciona tu ubicación preferida (como Iowa (us-central1) o la ubicación que especificaste anteriormente para tu base de datos de Firestore).
   4. Deje todos los otros valores con sus opciones predeterminadas.
7. Haz clic en Instalar extensión y espera a que se instale la extensión.

Prueba la extensión "Compila un chatbot con la API de Gemini"

Si bien el objetivo de este codelab es interactuar con la extensión "Compila un chatbot con la API de Gemini" a través de una app web, es útil probar primero cómo funciona la extensión en Firebase console.

La extensión se activa cada vez que se crea un documento de Firestore en la colección users/{uid}/discussion/{discussionId}/messages, lo que puedes hacer en Firebase console.

1. En Firebase console, navega a Firestore y, luego, haz clic en Iniciar colección en la primera columna.
2. En el cuadro de texto ID de la colección, ingresa users y, luego, haz clic en Siguiente.
3. En el cuadro de texto ID del documento, haz clic en ID automático y, luego, en Guardar.
4. En la colección users, haz clic en Iniciar colección.
5. En el cuadro de texto ID de la colección, ingresa messages y, luego, haz clic en Siguiente.
   1. En el cuadro de texto ID del documento, haz clic en ID automático.
   2. En el cuadro de texto Campo, ingresa prompt.
   3. En el cuadro de texto Value, ingresa Tell me 5 random fruits.
6. Haz clic en Guardar y espera unos segundos.

Cuando agregaste este documento, la extensión activó la llamada a la API de Gemini. El documento que acabas de agregar a la colección messages ahora incluye no solo tu prompt, sino también el response del modelo a tu consulta.

Para activar la extensión de nuevo, agrega otro documento a la colección messages:

1. En la colección messages, haz clic en Agregar documento.
2. En el cuadro de texto ID del documento, haz clic en ID automático.
3. En el cuadro de texto Campo, ingresa prompt.
4. En el cuadro de texto Value, ingresa And now, vegetables.
5. Haz clic en Guardar y espera unos segundos. El documento que acabas de agregar a la colección messages ahora incluye un response a tu consulta.
   
   Cuando se generó esta respuesta, el modelo de Gemini subyacente usó el conocimiento histórico de tu consulta anterior.

6. Configura la app web

Para ejecutar la app web, deberás ejecutar comandos en tu terminal y agregar código en el editor de código.

Configura Firebase CLI para que se ejecute en tu proyecto de Firebase

En la terminal, ejecuta el siguiente comando para indicarle a la CLI que use tu proyecto de Firebase:

firebase use YOUR_PROJECT_ID

Implementa reglas de seguridad para Firestore y Cloud Storage

La base de código de este codelab ya tiene un conjunto de reglas de seguridad de Firestore y de Cloud Storage escritas para ti. Una vez que implementes estas reglas de seguridad, los servicios de Firebase de tu proyecto estarán mejor protegidos contra el uso inadecuado.

1. Para implementar reglas de seguridad, ejecuta este comando en tu terminal:

   firebase deploy --only firestore:rules,storage
   

2. Si se te pregunta si otorgar a Cloud Storage el rol de IAM para usar reglas entre servicios, ingresa Y o N. (cualquiera de las opciones funciona para este codelab)

Conecta la app web a tu proyecto de Firebase

La base de código de tu app web necesita saber qué proyecto de Firebase debe usar para su base de datos, almacenamiento, etc. Para ello, agrega la configuración de Firebase a la base de código de tu app.

1. Obtén la configuración de Firebase:
   1. En Firebase console, ve a Configuración del proyecto dentro de tu proyecto de Firebase.
   2. Desplázate hacia abajo hasta la sección Tus apps y selecciona la app web registrada.
   3. En el panel SDK setup and configuration, copia el código initializeApp completo, incluida la constante firebaseConfig.
2. Agrega la configuración de Firebase a la base de código de tu aplicación web:
   1. En el editor de código, abre el archivo src/app/lib/firebase/firebase.config.js.
   2. Selecciona todo en el archivo y reemplázalo con 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
   

2. En tu navegador, ve a la URL de Hosting alojada de forma local para ver la app web. Por ejemplo, en la mayoría de los casos, la URL es http://localhost:3000/ o algo similar.

Usa el chatbot de la aplicación web

1. En el navegador, vuelve a la pestaña que tiene la aplicación web Friendly Conf que se ejecuta de forma local.
2. Haz clic en Acceder con Google y, si es necesario, selecciona tu Cuenta de Google.
3. Después de acceder, verás una ventana de chat vacía.
4. Escribe un saludo (como hi) y, luego, haz clic en Enviar.
5. Espera unos segundos para que el chatbot responda.

El chatbot de la app responde con una respuesta genérica.

Especializa el chatbot para la aplicación

Necesitas que el modelo de Gemini subyacente que usa el chatbot de tu app web conozca detalles específicos de la conferencia cuando el modelo genera respuestas para los asistentes que usan la app. Hay muchas formas de controlar y dirigir estas respuestas. En la subsección de este codelab, te mostramos una forma muy básica, ya que proporcionamos “contexto” en la instrucción inicial (en lugar de solo la entrada del usuario de la app web).

1. En la app web de tu navegador, borra la conversación haciendo clic en el botón rojo “x” (junto al mensaje en el historial de chat).
2. En el editor de código, abre el archivo src/app/page.tsx.
3. Desplázate hacia abajo y reemplaza el código en la línea 77 o cerca de ella que dice prompt: userMsg por lo siguiente:
   prompt: preparePrompt(userMsg, messages),
4. Guarda el archivo.
5. Regresa a la app web que se ejecuta en tu navegador.
6. Nuevamente, escribe un saludo (como hi) y, luego, haz clic en Enviar.
7. Espera unos segundos para que el chatbot responda.

El chatbot responde con conocimiento guiado por el contexto proporcionado en src/app/lib/context.md. Aunque no escribiste una solicitud específica, el modelo subyacente de Gemini genera una recomendación personalizada basada en este contexto, así como en la fecha y la hora actuales. Ahora puedes especificar preguntas adicionales y profundizar en el tema.

Este contexto expandido es importante para el chatbot, pero no debes mostrárselo al usuario de la app web. Aquí te indicamos cómo ocultarlo:

1. En el editor de código, abre el archivo src/app/page.tsx.
2. Desplázate hacia abajo y reemplaza el código en la línea 56 o cerca de ella que dice ...doc.data(), por lo siguiente:
   ...prepareMessage(doc.data()),
3. Guarda el archivo.
4. Regresa a la app web que se ejecuta en tu navegador.
5. Vuelve a cargar la página.

También puedes probar la capacidad de conversar con el chatbot con contexto histórico:

1. En el cuadro de texto Escribe un mensaje, haz una pregunta como: Any other interesting talks about AI?El chatbot devolverá una respuesta.
2. En el cuadro de texto Escribe un mensaje, haz una pregunta adicional que se relacione con la pregunta anterior: Give me a few more details about the last one.

El chatbot responde con conocimiento histórico. Dado que el historial de chat ahora es parte del contexto, el chatbot comprende las preguntas de seguimiento.

Contenido adicional: Ejecuta la app web con Firebase Local Emulator Suite

Firebase Local Emulator Suite te permite probar de forma local la mayoría de las funciones de la app web.

1. En tu terminal, asegúrate de estar en la raíz de la aplicación web.
2. Ejecuta el siguiente comando para instalar y, luego, ejecutar Firebase Local Emulator Suite:

   firebase init emulators
   firebase emulators:start
   

7. Configura la extensión "Tareas multimodales con la API de Gemini"

La extensión “Tareas multimodales con la API de Gemini” llama a la API de Gemini con instrucciones multimodales que contienen una instrucción de texto y una URL de archivo o de Cloud Storage compatible (ten en cuenta que incluso la API de Gemini con IA de Google usa una URL de Cloud Storage como su infraestructura de URL de archivo subyacente). La extensión también admite variables de manillar para sustituir valores del documento de Cloud Firestore para personalizar la instrucción de texto.

En tu app, cada vez que subas una imagen a un bucket de Cloud Storage, podrás generar una URL y agregarla a un documento nuevo de Cloud Firestore, lo que activará la extensión para que cree una instrucción multimodal y llame a la API de Gemini. En el código fuente de este codelab, ya proporcionamos el código para subir una imagen y escribir la URL a un documento de Firestore.

Instala la extensión “Tareas multimodales con la API de Gemini”

1. Navega a la extensión “Tareas multimodales con la API de Gemini”.
2. Haz clic en Instalar en Firebase console.
3. Seleccione su proyecto de Firebase.
4. Haz clic en Siguiente > Siguiente > Siguiente, hasta llegar a la sección Configurar la extensión.
   1. En el menú Proveedor de la API de Gemini, selecciona si quieres usar la API de Gemini de la IA de Google o Vertex AI. Para los desarrolladores que usan Firebase, recomendamos usar Vertex AI.
   2. En el cuadro de texto Ruta de acceso a la colección de Firestore, ingresa lo siguiente: gallery
   3. En el cuadro de texto Prompt, ingresa lo siguiente: Please describe the provided image; if there is no image, say "no image"
   4. En el cuadro de texto Campo de imagen, ingresa: image.
   5. En el menú Ubicación de Cloud Functions, selecciona tu ubicación preferida (como Iowa (us-central1) o la ubicación que especificaste anteriormente para tu base de datos de Firestore).
   6. Deje todos los otros valores con sus opciones predeterminadas.
5. Haz clic en Instalar extensión y espera a que se instale la extensión.

Prueba la extensión “Tareas multimodales con la API de Gemini”

Si bien el objetivo de este codelab es interactuar con la extensión “Tareas multimodales con la API de Gemini” a través de una app web, es útil probarla primero en Firebase console para descubrir cómo funciona la extensión.

La extensión se activa cada vez que se crea un documento de Firestore en la colección users/{uid}/gallery, lo que puedes hacer en Firebase console. Luego, la extensión toma la URL de la imagen de Cloud Storage en el documento de Cloud Firestore y la pasa como parte de la instrucción multimodal en una llamada a la API de Gemini.

Primero, sube una imagen a un bucket de Cloud Storage:

1. Navega a Almacenamiento en tu proyecto de Firebase.
2. Haz clic en Crear carpeta.
3. En el cuadro de texto Nombre de la carpeta, ingresa gallery.
4. Haz clic en Agregar carpeta.
5. En la carpeta gallery, haz clic en Subir archivo.
6. Selecciona un archivo de imagen JPEG para subir.

A continuación, agrega la URL de Cloud Storage para la imagen a un documento de Firestore (que es el activador de la extensión):

1. Navega a Firestore en tu proyecto de Firebase.
2. Haz clic en Iniciar colección en la primera columna.
3. En el cuadro de texto ID de la colección, ingresa gallery y, luego, haz clic en Siguiente.
4. Agrega un documento a la colección:
   1. En el cuadro de texto ID del documento, haz clic en ID automático.
   2. En el cuadro de texto Campo, ingresa: image. En el cuadro Valor, ingresa el URI de ubicación de almacenamiento de la imagen que acabas de subir.
5. Haga clic en Agregar campo.
6. En el cuadro de texto Campo, ingresa: published. En el cuadro Tipo, selecciona booleano. En el cuadro Valor, selecciona true.
7. Haz clic en Guardar y espera unos segundos.

La colección gallery ahora incluye un documento que contiene una respuesta a tu búsqueda.

Usa la galería de imágenes de la app web

1. En el navegador, vuelve a la pestaña que tiene la aplicación web Friendly Conf que se ejecuta de forma local.
2. Haz clic en la pestaña de navegación Galería.
3. Verás una galería de imágenes subidas y descripciones generadas por IA. Debe incluir la imagen que subiste antes en la carpeta gallery del bucket de Storage.
4. Haz clic en el botón "Subir" y selecciona otra imagen JPEG.
5. Espera unos segundos hasta que la imagen aparezca en la galería. Un momento después, también se mostrará la descripción generada por IA para la imagen recién subida.

Si deseas comprender el código de cómo se implementó esto, consulta src/app/gallery/page.tsx en la base de código de la app web.

8. Contenido adicional: Implementa tu aplicación

Firebase ofrece varias formas en las que puedes implementar una aplicación web. En este codelab, elige una de las siguientes opciones:

• Opción 1: Firebase Hosting. Usa esta opción si decides no crear tu propio repositorio de GitHub (y solo almacenar tu código fuente a nivel local en tu máquina).
• Opción 2: Firebase App Hosting. Usa esta opción si quieres una implementación automática cada vez que envíes cambios a tu propio repositorio de GitHub. Este nuevo servicio de Firebase se creó específicamente para adaptarse a las necesidades de las aplicaciones dinámicas de Next.js y Angular.

Opción 1: Implementa con Firebase Hosting

Usa esta opción si decides no crear tu propio repositorio de GitHub (y solo almacenar tu código fuente de forma local en tu máquina).

1. En la terminal, ejecuta los siguientes comandos para inicializar Firebase Hosting:

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. En el mensaje Detected an existing Next.js codebase in your current directory, should we use this?, presiona Y.
3. Para la instrucción In which region would you like to host server-side content, if applicable?, selecciona la ubicación predeterminada o la que usaste antes en este codelab. Luego, presiona Enter (o return en macOS).
4. En el mensaje Set up automatic builds and deploys with GitHub?, presiona N.
5. Para implementar tu app web en Hosting, ejecuta este comando:

   firebase deploy --only hosting
   

Todo listo Si actualizas la app y quieres implementar esa versión nueva, solo debes volver a ejecutar firebase deploy --only hosting, y Firebase Hosting compilará y volverá a implementar la app.

Opción 2: Implementa con Firebase App Hosting

Usa esta opción si quieres una implementación automática cada vez que envíes cambios a tu propio repositorio de GitHub.

1. Confirma los cambios en GitHub.
2. En Firebase console, navega a App Hosting dentro de tu proyecto de Firebase.
3. Haz clic en Comenzar > Conectarse a GitHub.
4. Selecciona tu cuenta de GitHub y Repositorio. Haz clic en Siguiente.
5. En Configuración de la implementación > Directorio raíz, ingresa el nombre de la carpeta con el código fuente (si package.json no está en el directorio raíz del repositorio).
6. En la rama Live, selecciona la rama main de tu repositorio de GitHub. Haz clic en Siguiente.
7. Ingresa un ID para tu backend (por ejemplo, chatbot).
8. Haz clic en Finish and Deploy.

La nueva implementación tardará unos minutos en estar lista. Puedes verificar el estado de la implementación en la sección Hosting de apps de Firebase console.

A partir de este momento, cada vez que envíes un cambio a tu repositorio de GitHub, Firebase App Hosting compilará e implementará tu app automáticamente.

9. Conclusión

¡Felicitaciones! Lograste mucho en este codelab.

Instala y configura extensiones

Usaste Firebase console para configurar e instalar varias Extensiones de Firebase que usan IA generativa. Usar Extensiones de Firebase es conveniente porque no necesitas aprender ni escribir mucho código estándar para controlar la autenticación con los servicios de Google Cloud o la lógica de backend de Cloud Functions para escuchar e interactuar con los servicios y las APIs de Firestore y Google Cloud.

Prueba las extensiones con Firebase console

En lugar de pasar directamente al código, te tomaste el tiempo para comprender cómo funcionan estas extensiones de IA generativa, según una entrada que proporcionaste a través de Firestore o Cloud Storage. Esto puede ser especialmente útil cuando se depura el resultado de una extensión.

Compila una app web potenciada por IA

Compilaste una app web potenciada por IA que usa Extensiones de Firebase para acceder a solo algunas capacidades del modelo de Gemini.

En la app web, usarás la extensión “Chatbot con la API de Gemini” para proporcionarle al usuario una interfaz de chat interactiva, que incluye contexto histórico y específico de la app en las conversaciones, en las que cada mensaje se almacena en un documento de Firestore específico para un usuario en particular.

La app web también usó la extensión “Tareas multimodales con la API de Gemini” para generar automáticamente descripciones de imágenes para las imágenes subidas.

Próximos pasos

• Experimenta con instrucciones y aprovecha la ventana de contexto grande en Google AI Studio o Vertex AI Studio.
• Obtén más información sobre la búsqueda de generación de aumento de recuperación con IA (RAG).
• Prueba un codelab de autoaprendizaje que muestra cómo agregar un chatbot a una app de Firebase existente con Firebase Genkit (que es un nuevo servicio de framework de IA).
• Obtén más información sobre las capacidades de búsqueda de similitud en Firestore y Cloud SQL para PostgreSQL.
• Enséñale al chatbot a llamar a tu app existente con las llamadas a funciones.