Crie apps de IA com o ecossistema do Google

1. Antes de começar

O desenvolvimento de software evoluiu. Os desenvolvedores mais bem-sucedidos não apenas escrevem código, mas também orquestram ferramentas e agentes de IA para criar melhor e mais rápido. O ecossistema de ferramentas do Google oferece um pacote abrangente para todo o ciclo de vida: geração de interface, prototipagem e implantação de apps, desenvolvimento de recursos de IA e integração de back-end segura e escalonável. Neste codelab, você vai usar o Google Stitch para projetar a interface, o Google AI Studio para programar e implantar o app e o Firebase para desenvolver recursos de IA e armazenar informações em um back-end seguro e escalonável.

O app que você vai criar neste codelab se chama Decide For Me (Decida por mim, em tradução livre), um assistente de decisão para pessoas indecisas que precisam fazer escolhas na vida, como mudar de apartamento, mudar de carreira ou escolher um hobby. O usuário entra em um dilema e informa as prioridades na vida. O app usa IA para ajudar a decidir com base no que minimiza a decepção a longo prazo. O app também oferece ao usuário uma primeira etapa concreta. A versão final do app vai ficar assim:

O que você vai aprender

• Crie interfaces de usuário com o Google Stitch.
• Programar um app da Web com o Google AI Studio.
• Use o Firebase para desenvolver recursos de IA e armazenar informações na nuvem.
• Implante um app da Web em produção com o Google AI Studio (com tecnologia do Cloud Run).

2. Projetar a interface com o Stitch

1. Baixe a imagem de mockup (DecideForMeScreen.jpeg). Salve-a em uma pasta local onde você possa encontrá-la.
2. Acesse Stitch, localize o campo de entrada e selecione a opção Web. Neste codelab, você vai se concentrar na experiência da Web, mas também pode usar o Stitch para gerar telas para dispositivos móveis.
3. Faça upload da imagem do modelo:
   1. Clique em + (o botão de adição).
   2. Selecione Enviar arquivos.
   3. Anexe a imagem que você baixou na etapa de configuração (DecideForMeScreen.jpeg). Esse modelo desenhado à mão permite testar os recursos multimodais do Stitch.
4. Copie o comando a seguir e cole no 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. Clique na seta de geração no canto inferior direito do campo de entrada. O Stitch gera a tela e um sistema de design completo, incluindo uma paleta de cores, opções de fontes, iconografia e a aparência geral dos elementos da interface:

Aviso:se a tela demorar mais de 5 minutos para ser gerada, recarregue a página e envie o comando de novo.

3. Criar o app com o Google AI Studio

1. Exporte a tela criada no Stitch para o Google AI Studio:
   1. Clique no design gerado no Stitch.
   2. Clique em Exportar no canto superior direito da tela.
   3. Confirme se a opção selecionada é Google AI Studio.
   4. Role a tela para baixo até o campo Descrição.
2. Copie o comando a seguir e cole no campo Descrição:

   # 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. Clique em Criar com o Google AI Studio. Isso abre o Google AI Studio em uma nova guia e transfere seus arquivos de design e o comando:
   1. Confirme se o comando foi totalmente transferido.
   2. Se você vir apenas parte do comando, cole o comando inteiro de novo.
4. Clique em Build. O Google AI Studio começa a gerar o app Decide For Me de acordo com seu comando e design de interface:
   1. Enquanto isso, ele sugere designs alternativos de interface (ignore esses designs neste codelab, mas você pode escolher designs diferentes no futuro).
   2. Quando for solicitado que você ative o Firebase, clique em Ativar.
5. Inspecione e verifique o app gerado:
   1. Teste o app na guia Visualização.
   2. Mude para a aba Código para revisar todos os arquivos e códigos gerados.
   3. O Google AI Studio também criou um projeto do Firebase, ativou o Firebase Authentication e o Firestore e configurou o Firebase na sua base de código. Você vai acessar e trabalhar com esse projeto do Firebase na próxima etapa deste codelab.

Aviso:se a geração do app demorar mais de 10 minutos, feche a guia, volte para o Stitch e reinicie na etapa Exportar.

4. Registrar seu token de depuração do App Check

Quando o Google AI Studio gera o app, ele cria um projeto do Firebase e conecta o app a ele. Você precisa acessar esse projeto do Firebase e registrar seu ambiente de desenvolvimento com um serviço de segurança importante chamado Firebase App Check.

Acessar seu projeto do Firebase

1. Encontre o ID do projeto do Firebase criado pelo Google AI Studio:
   1. Mude para a guia Código no Google AI Studio.
   2. Abra o arquivo firebase-applet-config.json.
   3. Copie o valor do campo projectId.
2. Acesse o console do Firebase e pesquise o projeto usando esse ID.

   Observação:se esta for a primeira vez que você cria um projeto do Firebase, haverá apenas um projeto disponível, que é o criado pelo Google AI Studio.

Aviso:se você não conseguir localizar o arquivo de configuração no código ou o projeto do Firebase no console, isso significa que o projeto não foi criado. Você pode pedir ao Google AI Studio para corrigir isso com o comando "Adicione o Firebase Auth e o Firestore a este app".

Registrar seu token de depuração

Seu app pode usar o Firebase App Check para proteger seus serviços de back-end e modelos de IA contra abusos, garantindo que o tráfego de entrada tenha origem apenas em apps legítimos.

Observação:registrar um token de depuração ou inicializar o App Check não protege seu back-end ou APIs por si só. É necessário aplicar o App Check nas APIs e nos serviços específicos que você quer proteger. O App Check é aplicado ao Firebase AI Logic mais adiante neste codelab. Já para serviços como o Firestore, é possível ativar a aplicação nas configurações do App Check depois de verificar o tráfego de entrada.

Como o app está sendo executado no ambiente de prévia do Google AI Studio, ele usa o provedor de depuração do App Check (self.FIREBASE_APPCHECK_DEBUG_TOKEN = true). Quando o web app é carregado, o Firebase gera automaticamente um token de depuração no console do desenvolvedor do navegador.

1. Encontre seu token de depuração:
   1. No Google AI Studio, abra as ferramentas para desenvolvedores do navegador enquanto visualiza a prévia do app:
      • Chrome, Edge ou Firefox:pressione F12 ou clique com o botão direito do mouse em qualquer lugar da prévia e selecione Inspecionar. Em seguida, selecione a guia Console.
      • macOS:pressione Cmd+Option+I e selecione a guia Console.
   2. Nos registros do console, localize a mensagem de depuração do 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. Copie a string do token (sem as aspas).
2. Registre seu token de depuração:
   1. No Console do Firebase, acesse a guia Segurança > App Check > Apps.
   2. Encontre seu app da Web na lista, clique no menu de três pontos (⋮) e selecione Gerenciar tokens de depuração.
   3. Clique em Adicionar token de depuração, cole o token copiado, insira um nome como Google AI Studio Preview e clique em Salvar.
   

Observação:se o token de depuração não aparecer no console do navegador, atualize a guia de visualização do Google AI Studio ou peça ao agente do Google AI Studio: "Verifique se o Firebase App Check está inicializado no modo de depuração usando self.FIREBASE_APPCHECK_DEBUG_TOKEN = true".

5. Testar o app

Agora que seu projeto está conectado e o token de depuração está registrado no App Check, teste os recursos básicos: autenticação e Firestore.

1. Testar a autenticação do usuário e salvar prioridades:
   1. Na prévia do app Decide For Me no Google AI Studio, teste a tela de autenticação fazendo login com uma Conta do Google.
   2. Salve suas prioridades de vida usando o painel à direita (Minhas prioridades).
2. Verifique a autenticação no console do Firebase:
   1. Acesse o console do Firebase e abra Autenticação.
   2. Confirme se a Conta do Google usada para autenticar no app Decida por mim está listada:
   
3. Verifique o armazenamento de dados do Firestore:
   1. Abra o Firestore no console do Firebase.
   2. Confirme se as prioridades estão armazenadas em um documento no caminho users/{userId}:
   

Aviso:se você não conseguir ver nenhum documento no Firestore, mude para a guia Regras e verifique se você tem regras de segurança fortes. Se as regras de segurança estiverem vazias ou retornarem false para todas as chamadas, o app não poderá criar documentos em nenhuma coleção do Firestore. Nesse caso, volte ao AI Studio e peça para ele implantar regras de segurança fortes para o app.

6. Criar um fluxo de decisão com tecnologia de IA usando o Firebase

O app vai usar a IA para ativar as ações do Decida por mim. Você pode usar o Firebase para criar esse fluxo de decisão com tecnologia de IA.

Configurar o Firebase AI Logic

1. Ative a API Gemini Developer no Firebase AI Logic:
   1. Abra a Lógica de IA do Firebase no console do Firebase e clique em Começar.
   2. Selecione API Gemini Developer e siga as instruções no console para ativar a API.

   Observação:o App Check é aplicado automaticamente ao Firebase AI Logic neste momento. Por isso, foi importante configurar e registrar o provedor de depuração do App Check no início deste codelab. Isso garante que as solicitações do seu ambiente de desenvolvimento no Google AI Studio sejam verificadas e não rejeitadas pela lógica de IA do Firebase.

2. Configure as configurações do Firebase AI Logic:
   1. Acesse a guia Configurações.
   2. Mude a opção Aplicar o modo somente de modelo para Aplicado.
   3. Mude a opção Aplicar o modo de usuários autenticados para Aplicado.

Criar um modelo de comando do servidor

Neste codelab, você vai usar modelos de comandos de servidor para suas interações com a API Gemini via Firebase AI Logic.

Antes de continuar com o modelo, leia o seguinte para entender por que é importante armazenar a configuração do modelo, as instruções do sistema e os comandos do lado do servidor:

• Proteção da propriedade intelectual:extrai comandos do dispositivo cliente e os mantém seguros no back-end.
• Prevenção de ataques de injeção de comandos:o cliente só pode preencher variáveis específicas com a validação de esquema do back-end.
• Atualização sem lançamentos de apps:é possível atualizar comandos, instruções do sistema e configurações de modelo no console sem lançar uma nova versão do app.

Veja como criar e testar um modelo de comando do servidor:

1. Crie o modelo de comando do servidor:
   1. Acesse a guia Modelos de comandos.
   2. Clique em Criar modelo.
   3. Selecione Modelo em branco.
   4. Crie seu primeiro modelo usando as seguintes informações:
      • Nome do modelo:fluxo de decisão
      • ID do modelo: decider-flow
      • Configuração (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
        

      • Comando e instruções do sistema (opcionais)

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

        Adicione um {} extra em volta de {role "system"} e {role "user"} para escrever suas instruções do sistema e comando na sintaxe correta:
      • Entrada de teste

        {
          "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. Clique em Salvar modelo.
3. Teste o modelo:
   1. Clique em Executar teste de comando.
   2. Localize a Resposta do teste e verifique se ela tem todos os campos especificados no comando (verdict, justification e firstStep).
   3. Se tudo corresponder à resposta esperada, bloqueie o modelo usando o ícone de bloqueio no canto superior direito para garantir a estabilidade da versão e evitar modificações acidentais.

Seu modelo está pronto para ser usado pelo app.

7. Usar o modelo de comando "Decider" no app

Faça com que seu app da Web use o modelo:

1. Volte para o app no Google AI Studio.
2. Peça ao agente do Google AI Studio para implementar a ação Decida por mim:
   1. Copie o seguinte comando:

      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. Cole o comando na entrada de chat do Google AI Studio e clique em Enviar.
3. Verifique a configuração e teste o assistente de decisão:
   1. Aguarde até que o Google AI Studio termine de adicionar o Firebase AI Logic ao seu app.
   2. Mude para a aba Código e certifique-se de que haja uma chave de API no seu arquivo firebase-applet-config.json. Se a chave de API do Firebase não estiver no arquivo de configuração, peça ao Google AI Studio para importar.
   3. Mude para a guia Visualização.
   4. Envie as opções A e B e verifique se a IA retorna o veredito da decisão, a justificativa e a primeira etapa.

Aviso:se a chamada para o Firebase AI Logic falhar mesmo com a chave de API do Firebase configurada, peça ao agente do Google AI Studio para corrigir o problema com o seguinte comando:

"Verifique se a chamada do Firebase AI Logic usa getAI(app) e getTemplateGenerativeModel(aiInstance) com o modelo decider-flow, analisa corretamente a resposta JSON em verdict, justification e firstStep e não contém restrições de tempo limite nem verificações de função desnecessárias."

Para referência, o código gerado pelo Google AI Studio deve ser semelhante a este:

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;

Depurar e monitorar solicitações

Se o app encontrar erros, não gerar uma resposta ou se você quiser inspecionar o tráfego da API em detalhes, use as ferramentas de análise e monitoramento integradas da Lógica de IA do Firebase:

1. No console do Firebase, acesse Serviços de IA > Lógica de IA > guia Monitoramento de IA.
2. Confira as métricas quantitativas no painel:
   • Volume e status da solicitação:verifique se as solicitações recebidas chegam ao back-end e retornam 200 OK ou falham com erros do cliente ou do servidor.
   • Latência:inspecione o gráfico de latência para verificar o tempo de resposta de ponta a ponta.
   • Contagem de tokens:monitore o uso de tokens de entrada e saída por solicitação.
3. Inspecionar traces de solicitação individuais para depuração detalhada:clique em um trace de solicitação específico na tabela de traces para inspecionar a carga útil.
   • Entradas:confirme se as variáveis (priorities, optionA e optionB) foram transmitidas corretamente do app cliente.
   • Saídas:veja o texto bruto gerado pelo modelo para verificar se ele retornou um JSON válido que corresponde ao esquema.
   • Detalhes do erro:se uma solicitação falhar, verifique o registro de erros de rastreamento por motivos como tokens do App Check inválidos, rejeição de autenticação, limites de cota ou erros de validação de solicitação.
4. Resolva problemas com o Google AI Studio:
   • Se você identificar um erro no rastreamento (por exemplo, análise de resposta JSON malformada ou parâmetros ausentes), copie a mensagem de erro ou o payload.
   • Volte ao Google AI Studio e peça ao assistente para corrigir o problema correspondente no código do app.

8. Opcional: implante o app

Agora que o app funciona no modo de visualização, implante-o na produção.

Para proteger seus endpoints do Firebase em produção, configure um provedor de atestação de produção para uso com o Firebase App Check. Neste codelab, você vai usar o reCAPTCHA v3.

Primeiro, implante o app para receber o URL exato dele e registrar o domínio específico no reCAPTCHA, em vez de permitir todos os apps ai.studio.

Implante o app e configure o reCAPTCHA:

1. Implante o web app com o Google AI Studio:
   1. No Google AI Studio, clique em Publicar na barra de navegação superior.
   2. Clique em Começar, revise ou personalize o nome e a descrição do aplicativo e clique em Publicar seu app.
   3. Aguarde o Google AI Studio criar e implantar seu app (geralmente de 1 a 2 minutos).
   4. Copie o URL personalizado da transmissão ao vivo gerado (por exemplo, https://decide-for-me-123.ai.studio) e anote o domínio dele (por exemplo, decide-for-me-123.ai.studio).
2. Crie chaves do reCAPTCHA v3 no Google reCAPTCHA:
   1. Acesse o Admin Console do Google reCAPTCHA.
   2. Insira um rótulo (por exemplo, Decide For Me - Production).
   3. Selecione Tipo de reCAPTCHA > reCAPTCHA v3 (baseado em pontuação).
   4. Na seção Domínios, adicione o domínio exato implantado do app (por exemplo, decide-for-me-123.ai.studio, omitindo https:// e todos os caminhos) ou um domínio personalizado, se você planeja usar um.
   5. Aceite os Termos de Serviço e clique em Enviar.
   6. Mantenha essa guia aberta. Você vai precisar da Chave do site (chave pública do cliente) e da Chave secreta (chave privada do servidor).
3. Registre sua chave secreta no console do Firebase:
   1. Acesse App Check no console do Firebase.
   2. Acesse a guia Apps.
   3. Localize seu aplicativo da Web na lista, clique nele (ou no menu de três pontos ⋮) e selecione reCAPTCHA v3.
   4. Cole sua chave secreta do reCAPTCHA no campo e clique em Salvar.
4. Configure o app cliente para usar ReCaptchaV3Provider:
   1. No Google AI Studio, mude para o painel de chat e peça ao assistente para atualizar sua configuração do App Check para produção:

      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. Se você revisar o código diretamente na guia Código, verifique se a inicialização do App Check corresponde a esta estrutura:

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

   3. Depois de atualizar o código, republique o app no Google AI Studio para enviar a configuração atualizada do App Check ao seu site ativo.
5. Verifique o tráfego de produção e monitore o App Check:
   1. Abra o URL do aplicativo ativo em uma janela anônima do navegador, faça login com o Google e teste o envio de um dilema.
   2. Volte para App Check no Console do Firebase e inspecione as guias APIs e Monitoramento para verificar se as solicitações foram registradas com sucesso no Firestore e no Firebase AI Logic.

Observação:o App Check já é aplicado ao Firebase AI Logic. Depois de observar que 100% do tráfego legítimo é verificado nas métricas do App Check, você também pode mudar o status de aplicação do App Check para Firestore e Aplicar para rejeitar automaticamente todo o tráfego não verificado.

9. Conclusão

Parabéns! Você criou um app útil com recursos de IA do zero usando ferramentas na Builder Stack do Google. Este é só o começo. Há muito mais que você pode fazer com as ferramentas do Google. Agora você tem um projeto na nuvem do Firebase + Google Cloud. Conheça todos os serviços disponíveis.

Acesse este link para reivindicar o selo Jornada do Builder concluída.

Para continuar sua jornada, acesse goo.gle/builders e faça o próximo laboratório.

Se você já usa o Antigravity 2.0, a plataforma dedicada do Google para orquestrar vários agentes autônomos em paralelo, pode exportar rapidamente seu projeto do Google AI Studio e importar para o Antigravity para continuar trabalhando nele localmente. O Antigravity tem as Habilidades do agente para Firebase disponíveis para instalação com um clique. Essas habilidades também oferecem suporte ao desenvolvimento para dispositivos móveis, o que ajuda a replicar esse app em ambientes Android e iOS, se você quiser.