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

1. Antes de comenzar

Las Extensiones de Firebase te permiten agregar funcionalidades predefinidas a tus apps con un mínimo de código, incluso funcionalidades 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 la entrada del usuario final.

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

Requisitos previos

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

Qué aprenderás

• Cómo usar las extensiones de Firebase para la API de Gemini para procesar el lenguaje
• Cómo usar Cloud Functions para Firebase para componer 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 crear y administrar tu proyecto de Firebase

2. Revisa la app web, los servicios de Firebase y las extensiones

En esta sección, revisarás la app web que compilarás con este codelab y aprenderás 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 Friendly Conference decidió usar la IA para producir una experiencia del usuario agradable y personalizada para los asistentes. La app de la conferencia completa proporciona a los asistentes un chatbot de IA conversacional potenciado por un modelo de IA generativa multimodal (también conocido como modelo de lenguaje grande o LLM) que puede responder preguntas sobre temas generales, adaptadas al programa y los temas de la conferencia. El chatbot tiene contexto histórico y conocimiento sobre la fecha y hora actuales, y los temas y el programa 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 incluyen los servicios que usarás y los motivos para usarlos.

Extensiones de Firebase

Las extensiones de Firebase que usarás en este codelab incluyen las siguientes:

• Compila un chatbot con la API de Gemini
• Tareas multimodales con la API de Gemini

Las extensiones son útiles porque reaccionan a los eventos que ocurren en tu proyecto de Firebase. Ambas 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 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-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 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

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 tu 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 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.

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 de Firebase 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, AI Extensions 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.

Actualiza tu plan de precios de Firebase

Para usar las Extensiones de Firebase (y sus servicios en la nube subyacentes), así como Cloud Storage para Firebase, 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.

También ten en cuenta que, si la facturación está habilitada en tu proyecto de Firebase, se te cobrarán las llamadas que la extensión realice a la API de Gemini (sin importar el proveedor que elijas, ya sea Google AI o Vertex AI). Obtén más información sobre los precios de Google AI y 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.

Agrega una app web a tu proyecto de Firebase

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

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

Configura Firebase Authentication

1. En el panel de navegación izquierdo, ve a Autenticación.
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 del proyecto, selecciona tu dirección de correo electrónico.
6. Haz clic en Guardar.

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.
   Más adelante en este codelab, agregarás reglas de seguridad para proteger tus datos. 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.

Configura Cloud Storage para Firebase

1. En el panel izquierdo de Firebase console, expande Compilación y, luego, selecciona Storage.
2. Haz clic en Comenzar.
3. Selecciona una ubicación para tu bucket de Storage predeterminado.
   Los buckets en US-WEST1, US-CENTRAL1 y US-EAST1 pueden aprovechar el nivel “Siempre gratuito” para Google Cloud Storage. Los buckets de todas las demás ubicaciones siguen los precios y el uso de Google Cloud Storage.
4. Haz clic en Comenzar en modo de prueba. Lee la renuncia de responsabilidad sobre las reglas de seguridad.
   Más adelante en este codelab, agregarás reglas de seguridad para proteger tus datos. No distribuyas ni expongas una app de forma pública sin agregar reglas de seguridad para tu bucket de Storage.
5. Haz clic en Crear.

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 a lo largo de 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 "Compila un chatbot con la API de Gemini".
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 los servicios que se te sugieran y, luego, haz clic en Siguiente.
5. Para los permisos que se te sugieran, 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 deseas usar la API de Gemini de Google AI o de 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 los 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.

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 aprender cómo funciona la extensión probándola primero 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 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 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 Valor, ingresa Tell me 5 random fruits.
6. Haz clic en Guardar y espera unos segundos.

Cuando agregaste este documento, se activó la extensión para llamar 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 para tu búsqueda.

Vuelve a activar la extensión agregando 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 Valor, 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 para tu búsqueda.
   
   Cuando se generó esta respuesta, el modelo subyacente de Gemini usó el conocimiento histórico de tu búsqueda anterior.

6. 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.

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

En la terminal, indícale a la CLI que use tu proyecto de Firebase ejecutando el siguiente comando:

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 reglas de seguridad de Cloud Storage escritas para ti. Una vez que implementes estas reglas de seguridad, los servicios de Firebase en tu proyecto de Firebase 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 deseas 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 tu app web a tu proyecto de Firebase

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

1. Obtén tu configuración de Firebase:
   1. En Firebase console, navega a Configuración del proyecto dentro de tu proyecto de Firebase.
   2. Desplázate hacia abajo hasta la sección Tus apps y selecciona tu app web registrada.
   3. En el panel Configuración del SDK, copia el código initializeApp completo, incluida la constante 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/firebase/firebase.config.js.
   2. Selecciona todo el contenido del archivo y reemplázalo 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
   

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.

Usa el chatbot de la app web

1. En el navegador, vuelve a la pestaña con la app 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 a que responda el chatbot.

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

Especializa el chatbot para la app

Necesitas que el modelo subyacente de Gemini que usa el chatbot de tu app web conozca los 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, y en la subsección de este codelab, te mostramos una forma muy básica de hacerlo proporcionando "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 tu editor de código, abre el archivo src/app/page.tsx.
3. Desplázate hacia abajo y reemplaza el código de la línea 93 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 a que responda el chatbot.

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 hora actuales. Ahora puedes especificar preguntas de seguimiento y profundizar en el tema.

Este contexto expandido es importante para el chatbot, pero no debes mostrárselo al usuario de la app web. Sigue estos pasos para ocultarlo:

1. En tu editor de código, abre el archivo src/app/page.tsx.
2. Desplázate hacia abajo y reemplaza el código de 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 de seguimiento relacionada con la pregunta anterior: Give me a few more details about the last one.

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

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

La extensión "Multimodal Tasks with the Gemini API" llama a la API de Gemini con instrucciones multimodales que contienen una instrucción de texto, así como una URL de archivo o una URL de Cloud Storage compatibles (ten en cuenta que incluso la API de Gemini de IA de Google usa una URL de Cloud Storage como su infraestructura subyacente de URL de archivo). La extensión también admite variables de Handlebars para sustituir valores del documento de Cloud Firestore y 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 nuevo documento de Cloud Firestore, lo que activará la extensión para crear una instrucción multimodal y llamar 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 en un documento de Firestore.

Instala la extensión "Multimodal Tasks with the Gemini API"

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 extensión.
   1. En el menú Proveedor de la API de Gemini, selecciona si deseas usar la API de Gemini de Google AI o de 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 gallery.
   3. En el cuadro de texto Instrucción, ingresa 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.

Prueba la extensión “Multimodal Tasks with the Gemini API”

Si bien el objetivo de este codelab es interactuar con la extensión "Multimodal Tasks with the Gemini API" a través de una app web, es útil aprender cómo funciona la extensión probándola primero en Firebase console.

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. Ve a Storage 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 subirlo.

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

1. Ve 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 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 la 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 la casilla 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.

Cómo usar la galería de imágenes de la app web

1. En el navegador, vuelve a la pestaña con la app 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. Debería tener la imagen que subiste antes a la carpeta gallery en tu bucket de Storage.
4. Haz clic en el botón "Subir" y selecciona otra imagen JPEG.
5. Espera unos segundos para que la imagen aparezca en la galería. Unos momentos después, también se mostrará la descripción generada por IA para la imagen recién subida.

Si quieres 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. Bonus: Implementa tu aplicación

Firebase ofrece varias formas de implementar una aplicación web. Para 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 tienes tu código fuente almacenado de forma local en tu máquina).
• Opción 2: Firebase App Hosting: Usa esta opción si deseas 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 satisfacer las necesidades de las aplicaciones dinámicas de Next.js y Angular.

Opción 1: Realiza la implementación con Firebase Hosting

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

1. En tu terminal, inicializa Firebase Hosting ejecutando estos comandos:

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. Para la instrucción: 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 anteriormente en este codelab. Luego, presiona Enter (o return en macOS).
4. Para la instrucción: Set up automatic builds and deploys with GitHub?, presiona N.
5. Ejecuta este comando para implementar tu aplicación web en Hosting:

   firebase deploy --only hosting
   

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

Opción 2: Implementa la app con Firebase App Hosting

Usa esta opción si deseas 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 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 la implementación > Directorio raíz, ingresa el nombre de la carpeta con tu código fuente (si tu package.json no está en el directorio raíz de tu repositorio).
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, chatbot).
8. Haz clic en Finalizar y, luego, en Implementar.

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

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

9. Conclusión

¡Felicitaciones! Lograste mucho en este codelab.

Instalación y configuración de extensiones

Usaste Firebase console para instalar y configurar 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 Cloud Functions de backend para escuchar e interactuar con Firestore y los servicios y las APIs de Google Cloud.

Probar extensiones con Firebase console

En lugar de pasar directamente al código, te tomaste el tiempo necesario para comprender cómo funcionan estas extensiones de IA generativa, en función de una entrada que proporcionaste a través de Firestore o Cloud Storage. Esto puede ser especialmente útil cuando depuras 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, usas 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 la que se almacena cada mensaje en un documento de Firestore que tenga alcance para un usuario en particular.

La app web también usó la extensión “Multimodal Tasks with the Gemini API” para generar automáticamente descripciones de imágenes subidas.

Próximos pasos

• Experimenta con instrucciones y aprovecha la gran ventana de contexto en Google AI Studio o Vertex AI Studio.
• Obtén más información sobre la búsqueda con generación aumentada por recuperación (RAG) de IA.
• Prueba un codelab autodidáctico que muestra cómo agregar un chatbot a una app de Firebase existente con Genkit (un nuevo servicio de framework de IA).
• Obtén información sobre las capacidades de búsqueda de similitud en Firestore y Cloud SQL para PostgreSQL.
• Enseña a tu chatbot a llamar a tu app existente con la llamada a función.