Crea apps de IA con el ecosistema de Google

1. Antes de comenzar

El desarrollo de software evolucionó. Los desarrolladores más exitosos no solo escriben código, sino que también coordinan herramientas y agentes de IA para compilar mejor y más rápido. El ecosistema de herramientas de Google proporciona un paquete integral para todo el ciclo de vida: generación de IU, creación de prototipos y desarrollo de apps, desarrollo de funciones basadas en IA y una integración de backend segura y escalable. En este codelab, usarás Google Stitch para diseñar la IU, Google AI Studio para escribir código y, luego, implementar la app, y Firebase para desarrollar funciones basadas en IA y almacenar información en un backend seguro y escalable.

La app que compilarás en este codelab se llama Decide For Me, un asistente para tomar decisiones para personas indecisas que se enfrentan a elecciones importantes en la vida (como mudarse de departamento, cambiar de carrera o elegir un pasatiempo). El usuario ingresa un dilema y sus prioridades en la vida, y la app usa la IA para ayudarlo a tomar una decisión en función de lo que minimice la decepción a largo plazo. La app también le brinda al usuario un primer paso concreto. La versión final de tu app debería ser similar a la siguiente:

Qué aprenderás

• Diseña IU con Google Stitch.
• Usar vibe coding para crear una app web con Google AI Studio
• Usa Firebase para desarrollar funciones potenciadas por IA y almacenar información en la nube.
• Implementa una app web en producción con Google AI Studio (con tecnología de Cloud Run).

2. Diseña la IU con Stitch

1. Descarga la imagen de simulación (DecideForMeScreen.jpeg) y guárdala en una carpeta local donde puedas encontrarla.
2. Ve a Stitch, busca el campo de entrada y selecciona la opción Web. (En este codelab, te enfocarás en la experiencia web, pero también puedes usar Stitch para generar pantallas para dispositivos móviles).
3. Sube la imagen de simulación:
   1. Haz clic en + (el botón de agregar).
   2. Selecciona Subir archivos.
   3. Adjunta la imagen que descargaste en el paso de configuración (DecideForMeScreen.jpeg). Este boceto dibujado a mano te permite probar las capacidades multimodales de Stitch.
4. Copia la siguiente instrucción y pégala en el campo de entrada:

   # General Guidance
   Create a modern, clean, and highly polished UI for a web application called
   "Decide For Me" - a hyper-rational decision assistant.
   
   CRITICAL: Replicate the exact layout, structure, and element placement shown in
   the hand-drawn mockup file DecideForMeScreen.jpeg. Do not add any extra menus,
   sidebars, buttons, or top/bottom navigation bars that are not explicitly drawn
   in the file. Stick strictly to the skeleton provided in the mockup.
   
   # Layout & Structure
   - Two-Column Split Screen:
     - Left Side (Main Chat Area): Takes up roughly 70-75% of the screen width. It
       should feel like a premium, focused workspace.
     - Right Side (Configuration Panel): A sidebar taking up 25-30% of the screen
       width with a distinct, subtle background color to separate it from the
       chat.
   
   # Right Panel: Configuration Screen
   - Header: Title it "My Priorities" with a clean, minimalist typography.
   - Content Card: A styled card containing a text box or paragraph area
     showcasing the user's priorities.
   - Interactions: Include a clear "Edit Priorities" button. When clicked, this
     area should visually toggle into an editable textarea or input field.
   
   # Left Panel: Chat & Dilemma Decision Screen
   - Chat History: A clean vertical flow of message bubbles.
     - The first message bubble must be aligned to the left (system message) and
       say: "Tell me your dilemma". Use a friendly, neutral background color for
       this bubble.
   - Bottom Input Area: Instead of a traditional single-line chat bar, create a
     unified, beautiful "Decision Submission" layout positioned at the bottom:
     - Dual Input Fields: Place two horizontal or cleanly stacked input fields.
       - Input 1 label: "Option A"
       - Input 2 label: "Option B"
     - Action Button: A prominent, styled "Go" action button to trigger the
       reasoning loop.
   
   # Theme & Aesthetic
   - Vibe: Hyper-rational, clean, trustworthy, and modern. Use a sophisticated
     color palette (e.g., deep slates, clean whites/grays, and a sharp accent
     color like a subtle indigo or teal for active states and buttons).
   - Spacing & Typography: Use generous whitespace, soft rounded corners
     (border-radius) for cards and buttons, and a highly legible sans-serif font.
   

5. Haz clic en la flecha de generar que se encuentra en la esquina inferior derecha del campo de entrada. Stitch genera la pantalla y un sistema de diseño completo, que incluye una paleta de colores, opciones de fuentes, iconografía y la apariencia general de los elementos de la IU:

Advertencia: Si la pantalla tarda más de 5 minutos en generarse, vuelve a cargar la página y envía la instrucción de nuevo.

3. Crea la app con Google AI Studio

1. Exporta la pantalla que creaste en Stitch a Google AI Studio:
   1. Haz clic en el diseño generado en Stitch.
   2. Haz clic en Exportar en la esquina superior derecha de la pantalla.
   3. Confirma que la opción seleccionada sea Google AI Studio.
   4. Desplázate hacia abajo hasta el campo Descripción.
2. Copia la siguiente instrucción y pégala en el campo Descripción:

   # General Guidance
   Build the "Decide For Me" app: A hyper-rational decision assistant for
   chronically indecisive people facing life choices (moving apartments, changing
   careers, picking a hobby). The user enters a dilemma and their top priorities
   in life. The app will help with the decision. Follow the instructions below to
   build it:
   
   # UI Instructions
   Using the design artifacts exported from Stitch (the PNG image and HTML file),
   build a fully functional web application that accurately mirrors the design and
   layout.
   
   # App Architecture & Initialization Instructions
   - Initialize the Firebase JS SDK for client-side services.
   - Set up Firebase Authentication using the Google provider. If a user is not
     logged in, show a clean, minimalist sign-in state. If the user is logged in,
     take them directly to the dilemma decision screen.
   - Initialize Firebase App Check in debug mode
     (`self.FIREBASE_APPCHECK_DEBUG_TOKEN = true`) without a ReCaptchaV3Provider
     (we will add that later).
   
   # State & Database Management Instructions
   - User Priorities:
     - Once authenticated, pull the user's saved priorities from Firebase
       Firestore at the path: `users/{userId}`. Each document should contain one
       string field: 'priorities'.
     - Bind this data to the Right Panel ("My Priorities").
     - When the user clicks the "Edit" button, toggle the view to a textarea, with
       a 'save' button. When saved, write the updated string back to
       `users/{userId}`.
     - Make sure to implement and deploy strong Security Rules for Firestore.
   
   # UI Stream Update & Display Instructions
   - Once the user submits option A and option B in the dilemma decision screen,
     display both options as a single message on the user side of the chat. Then,
     display a sleek loading state in the main chat panel. Leave the app in this
     "loading" state and do nothing else, we will process both options and build
     the server-side thinking later.
   

3. Haz clic en Crear con Google AI Studio. Se abrirá Google AI Studio en una pestaña nueva y se transferirán tus archivos de diseño y tu instrucción:
   1. Confirma que la instrucción se haya transferido por completo.
   2. Si solo ves una parte de la instrucción, vuelve a pegarla completa.
4. Haz clic en Build. Google AI Studio comienza a generar la app de Decide For Me según tu instrucción y diseño de IU:
   1. Mientras se genera, sugiere diseños de IU alternativos (ignora estos diseños para este codelab, pero puedes optar por diseños diferentes en el futuro).
   2. Cuando se te solicite habilitar Firebase, haz clic en Habilitar.
5. Inspecciona y verifica la app generada:
   1. Prueba la app en la pestaña Vista previa.
   2. Cambia a la pestaña Code para revisar todos los archivos y el código generados.
   3. Google AI Studio también creó un proyecto de Firebase, habilitó Firebase Authentication y Firestore, y configuró Firebase en tu base de código. Accederás a este proyecto de Firebase y trabajarás con él en el siguiente paso de este codelab.

Advertencia: Si la generación de la app tarda más de 10 minutos, cierra la pestaña, vuelve a Stitch y reinicia el proceso desde el paso Exportar.

4. Registra tu token de depuración de la Verificación de aplicaciones

Cuando Google AI Studio genera la app, crea un proyecto de Firebase y conecta tu app a él. Debes acceder a este proyecto de Firebase y registrar tu entorno de desarrollo con un importante servicio de seguridad llamado Verificación de aplicaciones de Firebase.

Accede a tu proyecto de Firebase

1. Busca el ID del proyecto de Firebase que creó Google AI Studio:
   1. Cambia a la pestaña Código en Google AI Studio.
   2. Abre el archivo firebase-applet-config.json.
   3. Copia el valor del campo projectId.
2. Accede a Firebase console y busca el proyecto con este ID.

   Nota: Si es la primera vez que creas un proyecto de Firebase, solo habrá un proyecto disponible, que es el que creó Google AI Studio.

Advertencia: Si no encuentras el archivo de configuración en el código o el proyecto de Firebase en la consola, significa que no se creó el proyecto. Puedes pedirle a Google AI Studio que lo corrija con la instrucción "Agrega Firebase Auth y Firestore a esta app".

Registra tu token de depuración

Tu app puede usar la Verificación de aplicaciones de Firebase para proteger tus servicios de backend y modelos de IA contra abusos, ya que garantiza que el tráfico entrante provenga solo de apps legítimas.

Nota: Registrar un token de depuración o inicializar la Verificación de aplicaciones no protege tu backend ni tus APIs por sí solo. Debes aplicar App Check para las APIs y los servicios específicos que deseas proteger. La Verificación de aplicaciones se aplica a Firebase AI Logic más adelante en este codelab, mientras que, para servicios como Firestore, puedes habilitar la aplicación en la configuración de la Verificación de aplicaciones una vez que verifiques el tráfico entrante.

Como tu app se ejecuta en el entorno de versión preliminar de Google AI Studio, usa el proveedor de depuración de App Check (self.FIREBASE_APPCHECK_DEBUG_TOKEN = true). Cuando se carga la app web, Firebase genera automáticamente un token de depuración en la consola para desarrolladores de tu navegador.

1. Busca tu token de depuración:
   1. En Google AI Studio, abre las herramientas para desarrolladores de tu navegador mientras ves la vista previa de la app:
      • Chrome, Edge o Firefox: Presiona F12 (o haz clic con el botón derecho en cualquier lugar de la vista previa y selecciona Inspeccionar) y, luego, selecciona la pestaña Consola.
      • macOS: Presiona Cmd + Opción + I y, luego, selecciona la pestaña Console.
   2. En los registros de la consola, busca el mensaje de depuración de App Check:

      AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
      You will need to safelist it in the Firebase console for it to work.
      

   3. Copia la cadena del token (sin las comillas).
2. Registra tu token de depuración:
   1. En Firebase console, ve a Seguridad > Verificación de aplicaciones > pestaña Aplicaciones.
   2. Busca tu app web en la lista, haz clic en el menú de tres puntos (⋮) y selecciona Administrar tokens de depuración.
   3. Haz clic en Agregar token de depuración, pega el token que copiaste, ingresa un nombre, como Google AI Studio Preview, y haz clic en Guardar.
   

Nota: Si no ves el token de depuración en la consola del navegador, actualiza la pestaña de vista previa de Google AI Studio o pídele al agente de Google AI Studio: "Asegúrate de que la Verificación de aplicaciones de Firebase se inicialice en modo de depuración con self.FIREBASE_APPCHECK_DEBUG_TOKEN = true".

5. Prueba la app

Ahora que tu proyecto está conectado y tu token de depuración está registrado en App Check, prueba las funciones básicas: Authentication y Firestore.

1. Prueba la autenticación de usuarios y guarda las prioridades:
   1. En la vista previa de la app Decide For Me en Google AI Studio, prueba la pantalla de autenticación accediendo con una Cuenta de Google.
   2. Guarda tus prioridades de vida en el panel derecho (Mis prioridades).
2. Verifica la autenticación en Firebase console:
   1. Ve a Firebase console y abre Authentication.
   2. Confirma que la Cuenta de Google que usaste para autenticarte en la app de Decide For Me aparezca en la lista:
   
3. Verificar el almacenamiento de datos de Firestore:
   1. Abre Firestore en Firebase console.
   2. Confirma que tus prioridades estén almacenadas en un documento en la ruta de acceso users/{userId}:
   

Advertencia: Si no ves ningún documento en Firestore, cambia a la pestaña Reglas y asegúrate de tener reglas de seguridad sólidas. Si las reglas de seguridad están vacías o devuelven false en cada llamada, tu app no podrá crear ningún documento en ninguna colección de Firestore. En ese caso, regresa a AI Studio y pídele que implemente reglas de seguridad sólidas para la app.

6. Cómo compilar un flujo de Decider potenciado por IA con Firebase

Tu app usará la IA para potenciar sus acciones de Decide por mí. Puedes usar Firebase para compilar este flujo de Decider potenciado por IA.

Configura Firebase AI Logic

1. Habilita la API de Gemini Developer en Firebase AI Logic:
   1. Abre Firebase AI Logic en Firebase console y, luego, haz clic en Comenzar.
   2. Selecciona API de Gemini Developer y sigue las instrucciones de la consola para habilitar la API.

   Nota: En este punto, la Verificación de aplicaciones se aplica automáticamente a Firebase AI Logic. Por eso, fue importante configurar y registrar el proveedor de depuración de App Check antes en este codelab, ya que garantiza que Firebase AI Logic verifique las solicitudes de tu entorno de desarrollo en Google AI Studio y no las rechace.

2. Configura los parámetros de Firebase AI Logic:
   1. Vaya a la pestaña Configuración.
   2. Activa la opción Aplicar el modo de solo plantilla como Aplicado.
   3. Activa la opción Aplicar el modo de usuarios autenticados como Aplicado.

Crea una plantilla de instrucción del servidor

En este codelab, usarás plantillas de instrucciones del servidor para tus interacciones con la API de Gemini a través de Firebase AI Logic.

Antes de continuar con la plantilla, revisa la siguiente información para comprender por qué es importante almacenar la configuración del modelo, las instrucciones del sistema y las instrucciones en el servidor:

• Protección de la propiedad intelectual: Extrae las instrucciones del dispositivo cliente y las mantiene seguras en el backend.
• Cómo evitar ataques de inyección de instrucciones: El cliente solo puede completar variables específicas con la validación del esquema de backend.
• Actualizaciones sin lanzamientos de apps: Puedes actualizar las instrucciones, las instrucciones del sistema y la configuración del modelo en la consola sin lanzar una nueva versión de la app.

Sigue estos pasos para crear y probar una plantilla de instrucciones del servidor:

1. Crea la plantilla de instrucción del servidor:
   1. Ve a la pestaña Plantillas de instrucciones.
   2. Haz clic en Crear Plantilla.
   3. Selecciona Plantilla en blanco.
   4. Crea tu primera plantilla con la siguiente información:
      • Nombre de la plantilla: Flujo de Decider
      • ID de plantilla: decider-flow
      • Configuración (frontmatter)

        model: "gemini-3.5-flash-lite"
        input:
          schema:
            priorities: "string, user's core priorities"
            optionA: "string, option A under consideration"
            optionB: "string, option B under consideration"
        output:
          format: json
          schema:
            verdict: string
            justification: string
            firstStep: string
        

      • Instrucciones del sistema (opcional) e instrucción

        {role "system"}
        You are the Decider Agent, a multi-stage reasoning engine that
        combines the roles of an honest and polite behavioral economist, a
        long-term strategic forecaster, and an executive decision coach.
        Your job is to take a user's dilemma and their core priorities, run
        them through a rigorous, adversarial 3-phase thinking process, and
        output a highly analytical, reasoning-backed final verdict. You must be
        direct, sharp, and realistic. Do not give generic platitudes or claim
        that "both options are great." You must force a clear choice.
        
        {role "user"}
        # Context & Inputs
        You are analyzing a critical life decision for the user. Base your
        entire multi-phase reasoning flow strictly on these three specific
        inputs:
        - User's Core Priorities: {{priorities}}
        - Option A under consideration: {{optionA}}
        - Option B under consideration: {{optionB}}
        
        Execute your reasoning flow through the following three phases:
        
        # Phase 1: Cynical Breakdown (Input-Driven Analysis)
        Analyze {{optionA}} and {{optionB}} strictly through the lens of the
        user's explicit {{priorities}}. Do not evaluate them in a vacuum.
        - Identify the hidden flaws, compromises, and psychological costs
          embedded in both choices.
        - Pinpoint exactly how {{optionA}} could directly conflict with or
          undermine their {{priorities}}.
        - Pinpoint exactly how {{optionB}} could directly conflict with or
          undermine their {{priorities}}.
        - Uncover any cognitive biases (like status quo bias or loss aversion)
          the user might be falling for in either option.
        
        # Phase 2: Long-Term Regret Projection
        Project the user 5 years into the future. Apply the Regret Minimization
        Framework to both paths:
        - The {{optionA}} Timeline: Quantify the absolute worst-case, deep,
          structural 5-year regret of choosing this path. Focus heavily on
          failures of courage vs. failures of action based on their
          {{priorities}}.
        - The {{optionB}} Timeline: Quantify the matching 5-year regret for
          this path.
        - Contrast these two timelines. Which option carries the kind of regret
          that fundamentally breaks the user's {{priorities}}?
        
        # Phase 3: Final Recommendation & Action Step
        Synthesize the cynical critiques and long-term regret scores.
        Weigh them against the user's {{priorities}} to determine which
        choice minimizes long-term disappointment.
        - Verdict: You must declare either {{optionA}} or {{optionB}} as the
          definitive winner. No compromise, no "it depends," and no hybrid
          options.
        - Justification: Provide a sharp, reasoning-backed explanation showing why
          the losing option was eliminated based on the Phase 1 and Phase 2
          analysis.
        - First Step: Give one microscopic, low-friction task the user can
          execute within the next 15 minutes to commit to or move toward the
          chosen verdict.
        

        Agrega un {} adicional alrededor de {role "system"} y {role "user"} para escribir tus instrucciones del sistema y tu instrucción con la sintaxis correcta:
      • Entrada de prueba

        {
          "priorities": "Be financially stable, have a good work-life balance where I can travel twice a year",
          "optionA": "Buy a house for 615000 British pounds with a mortgage of 2800 per month for the next 35 years",
          "optionB": "Keep renting for 2400 per month for the foreseeable"
        }
        

2. Haz clic en Save template.
3. Prueba la plantilla:
   1. Haz clic en Ejecutar prueba de instrucción.
   2. Ubica la Respuesta de prueba y verifica que tenga todos los campos que especificaste en la instrucción (verdict, justification y firstStep).
   3. Si todo coincide con la respuesta esperada, bloquea la plantilla con el ícono de candado que se encuentra en la esquina superior derecha para garantizar la estabilidad de la versión y evitar modificaciones accidentales.

Tu plantilla está lista para que la use tu app.

7. Usa la plantilla de instrucción Decider en la app

Haz que tu app web use la plantilla:

1. Vuelve a tu app en Google AI Studio.
2. Pídele al agente de Google AI Studio que implemente la acción Decide por mí:
   1. Copia la siguiente instrucción:

      Now let's implement the "Decide For Me" button action. When clicked, it
      should call the Firebase AI Logic SDK using a Template Generative Model.
      The prompt is stored in a prompt template with the id "decider-flow". When
      calling the API, pass the following variables as the input payload object:
      - priorities
      - optionA
      - optionB
      
      The API will return a JSON object. Handle the response asynchronously and
      extract:
      - verdict
      - justification
      - firstStep
      
      Once the data is received, update the UI state to append a new message to
      the chat array. Ensure it renders as a system chat bubble positioned on
      the left side of the chat screen, mapping these three fields clearly into
      the bubble's layout.
      
      Please provide the necessary front-end component state updates and the
      Firebase SDK call.
      

   2. Pega la instrucción en la entrada del chat de Google AI Studio y haz clic en Enviar.
3. Verifica la configuración y prueba el asistente para la toma de decisiones:
   1. Espera a que Google AI Studio termine de agregar Firebase AI Logic a tu app.
   2. Cambia a la pestaña Código y asegúrate de que haya una clave de API en tu archivo firebase-applet-config.json. Si la clave de API de Firebase no está en el archivo de configuración, pídele a Google AI Studio que la importe.
   3. Cambia a la pestaña Vista previa.
   4. Envía las opciones A y B, y verifica que la IA devuelva el veredicto de la decisión, la justificación y el primer paso.

Advertencia: Si la llamada a Firebase AI Logic falla incluso con la clave de la API de Firebase configurada, pídele al agente de Google AI Studio que la corrija con la siguiente instrucción:

"Asegúrate de que la llamada a Firebase AI Logic use getAI(app) y getTemplateGenerativeModel(aiInstance) con la plantilla decider-flow, analice la respuesta JSON correctamente en verdict, justification y firstStep, y no contenga restricciones de tiempo de espera ni verificaciones de funciones innecesarias".

Como referencia, el código generado por Google AI Studio debería ser similar al siguiente:

const aiInstance = getAI(app);
const templateModel = getTemplateGenerativeModel(aiInstance);

const result = await templateModel.generateContent('decider-flow', {
  priorities: priorities,
  optionA: optA,
  optionB: optB
});

const rawText = result.response.text();

// Parse response text to extract fields
const cleaned = rawText.replace(/```json|```/g, '').trim();
const parsedData: { verdict?: string; justification?: string; firstStep?: string } = JSON.parse(cleaned);

const verdict = parsedData.verdict;
const justification = parsedData.justification;
const firstStep = parsedData.firstStep;

Depura y supervisa solicitudes

Si tu app encuentra errores, no genera una respuesta o quieres inspeccionar el tráfico de la API en detalle, usa las herramientas integradas de supervisión y estadísticas de Firebase AI Logic:

1. En Firebase console, ve a AI Services > AI Logic > pestaña Supervisión de la IA.
2. Verifica las métricas cuantitativas en el panel:
   • Volumen y estado de las solicitudes: Verifica si las solicitudes entrantes llegan al backend y devuelven 200 OK o fallan con errores del cliente o del servidor.
   • Latencia: Inspecciona el gráfico de latencia para verificar el tiempo de respuesta de extremo a extremo.
   • Recuentos de tokens: Supervisa el uso de tokens de entrada y salida por solicitud.
3. Inspecciona seguimientos de solicitudes individuales para realizar una depuración detallada:Haz clic en un seguimiento de solicitud específico en la tabla de seguimientos para inspeccionar su carga útil.
   • Entradas: Confirma que las variables (priorities, optionA y optionB) se pasaron correctamente desde la app cliente.
   • Resultados: Consulta el texto sin procesar que generó el modelo para verificar si devolvió un JSON válido que coincide con el esquema.
   • Detalles del error: Si falla una solicitud, consulta el registro de errores de seguimiento para conocer los motivos, como tokens de App Check no válidos, rechazo de autenticación, límites de cuota o errores de validación de instrucciones.
4. Soluciona problemas relacionados con Google AI Studio:
   • Si identificas un error en el registro (por ejemplo, un análisis de respuesta JSON con errores de formato o parámetros faltantes), copia el mensaje de error o la carga útil.
   • Regresa a Google AI Studio y pídele al asistente que corrija el problema correspondiente en el código de la app.

8. Opcional: Implementa la app

Ahora que tu app funciona en el modo de vista previa, impleméntala en producción.

Para proteger tus extremos de Firebase en producción, configura un proveedor de certificación de producción para usarlo con la Verificación de aplicaciones de Firebase (en este codelab, usarás reCAPTCHA v3).

Primero, debes implementar tu app para obtener su URL publicada exacta y, así, poder registrar el dominio específico con reCAPTCHA en lugar de permitir todas las apps de ai.studio.

Implementa tu app y configura reCAPTCHA:

1. Implementa la app web con Google AI Studio:
   1. En Google AI Studio, haz clic en Publicar en la barra de navegación superior.
   2. Haz clic en Comenzar, revisa o personaliza el nombre y la descripción de la aplicación, y haz clic en Publicar tu aplicación.
   3. Espera a que Google AI Studio compile e implemente tu app (por lo general, de 1 a 2 minutos).
   4. Copia la URL personalizada de la transmisión en vivo generada (por ejemplo, https://decide-for-me-123.ai.studio) y anota su dominio (por ejemplo, decide-for-me-123.ai.studio).
2. Crea claves de reCAPTCHA v3 en Google reCAPTCHA:
   1. Ve a la Consola del administrador de Google reCAPTCHA.
   2. Ingresa una etiqueta (por ejemplo, Decide For Me - Production).
   3. Selecciona Tipo de reCAPTCHA > reCAPTCHA v3 (basado en la puntuación).
   4. En la sección Dominios, agrega el dominio implementado exacto de tu app (por ejemplo, decide-for-me-123.ai.studio, omitiendo https:// y cualquier ruta) o un dominio personalizado si planeas usar uno.
   5. Acepta las Condiciones del Servicio y haz clic en Enviar.
   6. Mantén abierta esta pestaña: necesitarás la Clave del sitio (clave pública del cliente) y la Clave secreta (clave privada del servidor).
3. Registra tu clave secreta en Firebase console:
   1. Ve a App Check en Firebase console.
   2. Ve a la pestaña Apps.
   3. Busca tu aplicación web en la lista, haz clic en ella (o en el menú de tres puntos ⋮) y selecciona reCAPTCHA v3.
   4. Pega tu clave secreta de reCAPTCHA en el campo y haz clic en Guardar.
4. Configura la app cliente para que use ReCaptchaV3Provider:
   1. En Google AI Studio, cambia al panel de chat y pídele al asistente que actualice la configuración de App Check para producción:

      Please update our Firebase App Check initialization to use
      ReCaptchaV3Provider with the reCAPTCHA site key "YOUR_RECAPTCHA_SITE_KEY",
      while retaining support for debug tokens in non-production environments.
      

   2. Si revisas el código directamente en la pestaña Código, asegúrate de que la inicialización de App Check coincida con esta estructura:

      import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";
      
      const appCheck = initializeAppCheck(app, {
        provider: new ReCaptchaV3Provider("YOUR_RECAPTCHA_SITE_KEY"),
        isTokenAutoRefreshEnabled: true
      });
      

   3. Después de actualizar el código, vuelve a publicar tu app en Google AI Studio para enviar la configuración actualizada de App Check a tu sitio activo.
5. Verifica el tráfico de producción y supervisa la Verificación de aplicaciones:
   1. Abre la URL de tu app en vivo en una ventana de incógnito del navegador, accede con Google y prueba enviar un dilema.
   2. Regresa a Verificación de aplicaciones en Firebase console y, luego, inspecciona las pestañas APIs y Monitoring para verificar que las solicitudes se registren correctamente en Firestore y Firebase AI Logic.

Nota: La Verificación de aplicaciones ya se aplica para Firebase AI Logic. Después de observar que el 100% del tráfico legítimo se verifica en las métricas de la Verificación de aplicaciones, también puedes cambiar el estado de aplicación de la Verificación de aplicaciones para Firestore a Aplicar para rechazar automáticamente todo el tráfico no verificado.

9. Conclusión

¡Felicitaciones! Compilaste una app útil con funciones basadas en IA desde cero, usando herramientas de la pila de compilación de Google. Esto es solo el comienzo. Hay mucho más que puedes hacer con las herramientas de Google. Ahora tienes un proyecto de Firebase y Google Cloud. Explora todos los servicios disponibles.

Visita este vínculo para reclamar la insignia de Completed Builder Journey.

Para continuar tu recorrido, ve a goo.gle/builders para realizar el siguiente lab.

Si ya usas Antigravity 2.0, la plataforma exclusiva de Google para coordinar varios agentes autónomos en paralelo, puedes exportar rápidamente tu proyecto desde Google AI Studio e importarlo a Antigravity para seguir trabajando en él de forma local. Antigravity tiene Agent Skills for Firebase disponibles para instalar con un solo clic. Estas habilidades también ofrecen compatibilidad con el desarrollo para dispositivos móviles, lo que te ayuda a replicar esta app en entornos de Android y iOS si lo deseas.