Use o Firebase Genkit para criar recursos de IA generativa com seus dados

1. Antes de começar

Neste codelab, você vai aprender a usar o Firebase Genkit para integrar a IA generativa ao seu app. O Firebase Genkit é um framework de código aberto que ajuda você a criar, implantar e monitorar apps com tecnologia de IA prontos para produção.

O Genkit foi criado para ajudar desenvolvedores a integrar facilmente recursos avançados de IA aos apps com padrões e paradigmas conhecidos. Ele foi desenvolvido pela equipe do Firebase, aproveitando nossa experiência na criação de ferramentas usadas por milhões de desenvolvedores em todo o mundo.

Pré-requisitos

• Familiaridade com o Firestore, Node.js e TypeScript.

O que você vai aprender

• Como criar apps mais inteligentes com os recursos avançados de pesquisa por similaridade vetorial do Firestore.
• Como implementar de forma prática a IA generativa nos seus apps usando o Firebase Genkit.
• Prepare sua solução para implantação e integração.

Pré-requisitos

• Um navegador da sua escolha, como o Google Chrome
• Ambiente de desenvolvimento com um editor de código e um terminal
• Uma Conta do Google para a criação e o gerenciamento do seu projeto do Firebase

Observação: este codelab usa o Firebase e os Serviços do Google que exigem uma conta do Cloud Billing. Se você ainda não conhece o Firebase e o Google Cloud, confira se está qualificado para receber um crédito de US$300 e uma conta de teste sem custo financeiro do Cloud Billing para testar nossos serviços. Caso contrário, você vai precisar fornecer uma forma de pagamento (como um cartão de crédito) para configurar uma conta do Cloud Billing. Para saber mais sobre as formas de pagamento, consulte a documentação do Cloud Billing.

2. Analise o app da Web e os serviços de nuvem usados

Nesta seção, você vai revisar o app da Web que vai criar com este codelab e aprender sobre os serviços de nuvem que vai usar.

App da Web

Neste codelab, você vai trabalhar na base de código de um app chamado Compass, um app de planejamento de férias. Os usuários podem escolher um destino, procurar atividades no destino e criar um itinerário para a viagem.

Neste codelab, você vai implementar dois novos recursos para melhorar o engajamento do usuário com a página inicial do app. Ambos os recursos são baseados em IA generativa:

• No momento, o app mostra uma lista estática de destinos. Ele será alterado para dinâmico.
• Você vai implementar um itinerário preenchido automaticamente para aumentar a retenção.

Observação: este é um codelab grande com muitas etapas. Para aproveitar ao máximo este codelab, siga estas etapas:

• Regule seu ritmo fazendo pausas.
• Ao trabalhar com código, dedique um tempo para entender o que é e como funciona, em vez de copiar e colar sem pensar.
• Se você tiver dificuldades, refaça novamente suas etapas até o último estado de trabalho e verifique se você realizou cada etapa com precisão.
• Se você encontrar um bug no codelab ou no código, informe um problema no GitHub (link em inglês).

Serviços usados

Neste codelab, você usará muitos serviços e recursos do Firebase e do Cloud, e a maior parte do código inicial deles foi fornecido. A tabela a seguir contém os serviços que você usará e os motivos para usá-los.

Serviço	Motivo do uso
Firebase Genkit	Você vai usar o Genkit para levar a IA generativa a um aplicativo Node.js / Next.js.
Cloud Firestore	Você armazena dados no Cloud Firestore, que é usado para a pesquisa de similaridade de vetores.
Vertex AI do Google Cloud	Você vai usar modelos de fundação da Vertex AI (como o Gemini) para potencializar seus recursos de IA.
Firebase App Hosting	Você pode usar o novo Firebase App Hosting simplificado para disponibilizar seu app da Web Next.js dinâmico (conectado a um repositório do GitHub).

3. Configurar o ambiente de desenvolvimento

Descubra sua versão do Node.js

1. No terminal, verifique se você tem a versão 20.0.0 ou mais recente do Node.js instalada:

   node -v
   

2. Se você não tiver a versão 20.0.0 ou mais recente do Node.js, faça o download e instale a versão mais recente do LTS.

Fazer o download do código-fonte do codelab

Se você tiver uma conta do GitHub:

1. Crie um novo repositório usando nosso modelo em github.com/FirebaseExtended/codelab-ai-genkit-rag
2. Crie um clone local do repositório do GitHub do codelab que você acabou de criar:

   git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
   

Se você não tiver o git instalado ou preferir não criar um novo repositório:

Faça o download do repositório do GitHub como um arquivo ZIP.

Revisar a estrutura de pastas

Na máquina local, encontre o repositório clonado e revise a estrutura de pastas:

Pasta	Descrição
genkit-functions	Código do Genkit de back-end
load-firestore-data	Ferramenta de linha de comando auxiliar para pré-preencher rapidamente a coleção do Firestore
*todos os outros	Código do app da Web Next.js

A pasta raiz inclui um arquivo README.md que oferece um início rápido para executar o app da Web usando instruções simplificadas. No entanto, se você for um estudante iniciante, conclua este codelab (em vez do guia de início rápido) porque ele contém o conjunto mais abrangente de instruções.

Caso não tenha certeza se aplicou corretamente o código conforme as instruções deste codelab, você pode encontrar o código da solução na ramificação end do git.

Instalar a CLI do Firebase

1. Verifique se você tem a CLI do Firebase instalada e se a versão é a 13.6 ou mais recente:

   firebase --version
   

2. Se você tiver a CLI do Firebase instalada, mas não estiver na versão 13.6 ou mais recente, atualize-a:

   npm update -g firebase-tools
   

3. Se você não tiver a CLI do Firebase instalada, instale-a:

   npm install -g firebase-tools
   

Se não for possível atualizar ou instalar a CLI do Firebase devido a erros de permissão, consulte a documentação do npm ou use outra opção de instalação.

Faça login no Firebase.

1. No seu terminal, faça login no Firebase:

   firebase login
   

   Se o terminal informar que você já fez login no Firebase, pule para a seção Configurar seu projeto do Firebase deste codelab.
2. No seu terminal, dependendo se você quer que o Firebase colete dados, digite Y ou N. (ambas as opções funcionam para este codelab)
3. No navegador, selecione sua Conta do Google e clique em Permitir.

Instalar a gcloud CLI do Google Cloud

1. Instale a CLI da gcloud.
2. No seu terminal, faça login no Google Cloud:

   gcloud auth login
   

4. Configurar seu projeto do Firebase

Nesta seção, você vai configurar um projeto do Firebase e registrar um app da Web do Firebase nele. Você também vai ativar alguns serviços usados pelo app da Web de exemplo mais adiante neste codelab.

Todas as etapas desta seção são realizadas no Console do Firebase.

Criar um projeto do Firebase

1. Faça login no console do Firebase usando a mesma Conta do Google usada na etapa anterior.
2. Clique em Criar um projeto e digite o nome de um projeto (por exemplo, Compass Codelab).
   Lembre-se do ID do projeto atribuído automaticamente ao seu projeto do Firebase (ou clique no ícone Editar para definir o ID que preferir). Você precisará desse ID mais tarde para identificar seu projeto do Firebase na CLI do Firebase. Se você esquecer seu ID, poderá encontrá-lo depois nas Configurações do projeto.
3. Clique em Continuar.
4. Se solicitado, leia e aceite os Termos do Firebase e clique em Continuar.
5. Para este codelab, não é necessário usar o Google Analytics. Portanto, desative essa opção.
6. Clique em Criar projeto, aguarde o provisionamento e clique em Continuar.

Adicionar um app da Web ao seu projeto do Firebase

1. Navegue até a tela Visão geral do projeto no seu projeto do Firebase e clique em Web.
2. Na caixa de texto Apelido do app, digite um apelido fácil de lembrar, como My Compass Codelab App. Deixe a caixa de seleção para configurar o Firebase Hosting desmarcada, porque você vai configurar um serviço de hospedagem na última etapa deste codelab.
   
3. Clique em Registrar app > Continuar para o console.

Ótimo! Você registrou um app da Web no seu novo projeto do Firebase.

Fazer upgrade do plano de faturamento do Firebase

Para usar o Firebase Genkit e a Vertex AI (e os serviços de nuvem associados), é necessário fazer upgrade do seu projeto do Firebase para ativar o faturamento.

Para fazer upgrade do plano de faturamento do seu projeto, siga estas etapas:

1. Navegue até Planos de faturamento do Firebase no seu projeto do Firebase.
2. Na caixa de diálogo Planos de faturamento do Firebase, selecione e compre o plano Blaze.

Observação: com o faturamento ativado no seu projeto do Firebase, você vai receber cobranças pelas chamadas que o Genkit faz para a API Gemini. Saiba mais sobre os preços da Vertex AI.

Depois de concluir este codelab, você poderá fazer downgrade do seu projeto do Firebase para o plano Spark sem custos financeiros.

Ativar o Cloud Firestore

1. Navegue até Build > Firestore Database usando o painel de navegação à esquerda.
2. Clique em Criar banco de dados.
3. Deixe o ID do banco de dados definido como (default).
4. Selecione o local do Cloud Firestore de sua preferência ou deixe o padrão.
5. Clique em Próxima.
6. Selecione Iniciar no modo de teste.
7. Clique em Criar.

Ativar a Vertex AI

Use a CLI gcloud para configurar a Vertex AI. Para todos os comandos nesta página, substitua YOUR_PROJECT_ID pelo ID do seu projeto do Firebase.

1. No seu terminal, defina o projeto padrão para o SDK Google Cloud:

   gcloud config set project YOUR_PROJECT_ID
   

2. Se você receber uma mensagem de aviso informando que "AVISO: seu projeto ativo não corresponde ao projeto de cota no arquivo local de credenciais padrão do aplicativo. Isso pode resultar em problemas de cota inesperados.", execute o seguinte comando para definir o projeto de cota:

   gcloud auth application-default set-quota-project YOUR_PROJECT_ID
   

3. Ative o serviço da Vertex AI no seu projeto:

   gcloud services enable aiplatform.googleapis.com
   

5. Configurar o app da Web

Para executar o app da Web, você precisa executar comandos no terminal e adicionar código no editor. Para todos os comandos nesta página, substitua YOUR_PROJECT_ID pelo ID do seu projeto do Firebase.

Configurar a CLI do Firebase para segmentar seu projeto

1. No terminal, navegue até o diretório raiz do projeto do codelab.
2. Para fazer com que a CLI do Firebase execute todos os comandos no seu projeto do Firebase, use o seguinte comando:

   firebase use YOUR_PROJECT_ID
   

Importar dados de amostra para o Firestore

Para você começar rapidamente, este codelab fornece dados de amostra pré-gerados para o Firestore.

1. Para permitir que a base de código local execute o código que normalmente usaria uma conta de serviço, execute o seguinte comando no terminal:

   gcloud auth application-default login
   

   Uma nova guia será aberta no navegador. Faça login com a mesma Conta do Google usada nas etapas anteriores.
2. Para importar os dados de amostra do Firestore, execute os seguintes comandos:

   cd load-firestore-data
   npm ci
   node index.js YOUR_PROJECT_ID
   cd ..
   

3. Para verificar se os dados foram adicionados ao banco de dados, acesse a seção Firestore do projeto do Firebase no console do Firebase. O esquema de dados importados e o conteúdo deles vão aparecer.

Conectar seu app da Web ao seu projeto do Firebase

A base de código do seu app da Web precisa estar associada ao projeto correto do Firebase para usar os serviços, como o banco de dados. Para fazer isso, você precisa adicionar a configuração do Firebase à base de código do seu app. Essa configuração inclui valores essenciais, como o ID do projeto, a chave de API e o ID do app, além de outros valores que permitem a interação do app com o Firebase.

1. Para saber a configuração do Firebase do seu app, siga estas etapas:
   1. No Console do Firebase, acesse seu projeto.
   2. No painel à esquerda, clique no ícone de engrenagem ao lado de Visão geral do projeto e selecione Configurações do projeto.
   3. No card "Seus apps", selecione o app da Web.
   4. Na seção "Configuração e configuração do SDK", selecione a opção Configuração.
   5. Copie o snippet. Ela começa com const firebaseConfig ....
2. Adicione a configuração do Firebase à base de código do seu app da Web:
   1. No editor de código, abra o arquivo src/lib/genkit/genkit.config.ts.
   2. Substitua a seção relevante pelo código que você copiou.
   3. Salve o arquivo.

Visualizar o app da Web no navegador

1. No terminal, instale as dependências e execute o app da Web:

   npm install
   npm run dev
   

2. No navegador, navegue até o URL de hospedagem hospedado localmente para acessar o app da Web. Por exemplo, na maioria dos casos, o URL é http://localhost:3000/ ou algo semelhante.

O Compass é um aplicativo Next.js que usa Componentes do servidor React, e esta é a página inicial.

Clique em Encontrar minha viagem dos sonhos. Atualmente, ele mostra alguns dados codificados para alguns destinos fixos:

Fique à vontade para explorar. Quando estiver tudo pronto para continuar, clique no botão de início (no canto superior direito).

6. Mergulhe na IA generativa com o Genkit

Agora você está pronto para aproveitar o potencial da IA generativa no seu aplicativo. Esta seção do codelab vai orientar você na implementação de um recurso que sugere destinos com base na inspiração fornecida pelo usuário. Você vai usar o Firebase Genkit e a Vertex AI do Google Cloud como provedor do modelo generativo (você vai usar o Gemini).

O Genkit pode armazenar o estado de rastreamento e fluxo (o que permite inspecionar o resultado da execução de fluxos do Genkit). Neste codelab, você vai usar o Firestore para armazenar esses rastros.

Na etapa final deste codelab, você vai implantar o app Genkit no Firebase App Hosting.

Conectar o app Genkit ao projeto do Firebase

Antes de poder lançar o Genkit, sua base de código precisa estar associada ao projeto correto do Firebase para utilizar os serviços, como o banco de dados. Para isso, você precisa adicionar a configuração do Firebase à base de código do seu app Genkit. Essa configuração inclui valores essenciais, como o ID do projeto, a chave de API e o ID do app, além de outros valores que permitem a interação do app com o Firebase.

1. Para saber a configuração do Firebase do seu app, siga estas etapas:
   1. No Console do Firebase, acesse seu projeto.
   2. No painel à esquerda, clique no ícone de engrenagem ao lado de Visão geral do projeto e selecione Configurações do projeto.
   3. Na janela selecione seu app da Web.
   4. Na seção "Configuração e configuração do SDK", selecione a opção Configuração.
   5. Copie o snippet. Ela começa com const firebaseConfig ....
2. Adicione a configuração do Firebase ao app Genkit:
   1. No editor de código, abra o arquivo genkit-functions/src/lib/genkit.config.ts.
   2. Substitua a seção relevante pelo código que você copiou.
   3. Salve o arquivo.

Iniciar a interface do desenvolvedor do Genkit

O Genkit vem com uma interface baseada na Web que permite interagir com LLMs, fluxos do Genkit, recuperadores e outros componentes de IA.

1. Inicie a interface do desenvolvedor do Genkit:
   1. Abra uma nova janela do terminal.
   2. Navegue até a raiz do diretório genkit-functions.
   3. Execute o seguinte comando para iniciar a interface do desenvolvedor do Genkit:

      cd genkit-functions
      npx genkit start
      

2. No navegador, acesse o URL do Genkit hospedado localmente. Na maioria dos casos, é http://localhost:4000/.

Interagir com o Gemini

Agora é possível usar a interface para desenvolvedores do Genkit para interagir com qualquer um dos modelos compatíveis ou com qualquer um dos outros componentes de IA, como comandos, extratores e fluxos do Genkit.

Por exemplo, peça para o Gemini sugerir um destino de férias. Confira como usar instruções do sistema para orientar o comportamento do modelo com base nas suas necessidades específicas. Isso também funciona para modelos que não oferecem suporte nativo a instruções do sistema.

Gerenciar solicitações

O Firebase Genkit apresenta o Dotprompt, um plug-in e um formato de texto projetados para simplificar a criação e o gerenciamento de seus comandos de IA generativa. A ideia central do Dotprompt é tratar prompts como código, permitindo que você os escreva, mantenha e controle versões deles junto com o código do seu aplicativo.

Para usar o Dotprompt, comece com um hello-world:

1. No editor de código, abra o arquivo genkit-functions/prompts/1-hello-world.prompt.
2. Na interface do desenvolvedor do Genkit, abra dotprompt/1-hello-world.
3. Use o código ou o nome de qualquer idioma que você conheça ou deixe como uma string vazia.
4. Clique em Executar.
5. Tente alguns valores diferentes. Modelos de linguagem grandes são bons para entender comandos abreviados, incorretos ou incompletos em consultas simples como esta.

Enriqueça seus resultados com dados estruturados

Além de gerar texto simples, o Genkit permite que você estruture sua saída para melhorar a apresentação e a integração na interface do seu aplicativo. Ao definir um esquema, é possível instruir o LLM a produzir dados estruturados que se alinhem ao formato desejado.

Como explorar esquemas de saída

Também é possível especificar o esquema de saída de uma chamada de LLM.

1. No editor de código, examine o arquivo de comando:
   1. Abra o arquivo dotprompt/2-simple-itinerary.
   2. Examinar os esquemas de entrada e saída definidos.
2. Interaja com a interface:
   1. Na interface do desenvolvedor do Genkit, navegue até a seção dotprompt/2-simple-itinerary.
   2. Forneça entradas preenchendo os campos place e interests com dados de amostra:

      {
          "interests": [
              "Museums"
          ],
          "place": "Paris"
      }
      

   3. Clique em Executar.

Noções básicas sobre a saída orientada por esquema

Observe como a saída gerada está em conformidade com o esquema definido. Ao especificar a estrutura desejada, você instruiu o LLM a produzir dados que são facilmente analisados e integrados ao seu aplicativo. O Genkit valida automaticamente a saída em relação ao esquema, garantindo a integridade dos dados.

Além disso, é possível configurar o Genkit para tentar novamente ou reparar a saída se ela não corresponder ao esquema.

Principais vantagens dos esquemas de saída

• Integração simplificada: incorpore dados estruturados aos elementos da interface do app com facilidade.
• Validação de dados: garanta a precisão e a consistência da saída gerada.
• Tratamento de erros: implemente mecanismos para resolver incompatibilidades de esquema.

O uso de esquemas de saída melhora sua experiência com o Genkit, permitindo que você crie dados personalizados e estruturados para experiências de usuário mais ricas e dinâmicas.

Usar entrada multimodal

Imagine que seu app sugere destinos de férias personalizados com base em imagens que os usuários acham inspiradoras. O Genkit, combinado a um modelo generativo multimodal, capacita você a dar vida a essa visão.

1. No editor de código, examine o arquivo de comando:
   1. Abra o arquivo genkit-functions/prompts/imgDescription.prompt.
   2. Observe a inclusão de {{media url=this}}, que é um elemento de sintaxe do Handlebars que facilita a incorporação de imagens ao comando.
2. Interagir com a interface:
   1. Na interface do desenvolvedor do Genkit, abra o comando dotprompt/imgDescription.
   2. Insira um URL de imagem no campo imageUrls colando um URL de uma imagem. Por exemplo, você pode usar uma imagem em miniatura da Wikipedia mostrando a Torre Eiffel:

      {
          "imageUrls": [
              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
          ]
      }
      

   3. Clique em Executar.

7. Implementar a recuperação com a pesquisa de semelhança vetorial

Embora gerar conteúdo criativo com modelos de IA seja impressionante, as aplicações práticas geralmente exigem fundamentar a saída em um contexto específico.

Neste codelab, você tem um banco de dados de destinos (lugares e atividades) e quer garantir que as sugestões geradas pelo modelo do Gemini se refiram exclusivamente a entradas nesse banco de dados.

Para preencher a lacuna entre consultas não estruturadas e conteúdo relevante, você vai usar o poder da pesquisa por similaridade vetorial nos embeddings gerados.

Noções básicas sobre embeddings e semelhança de vetores

• Vetores: são representações numéricas de pontos de dados, geralmente usadas para modelar informações complexas, como texto ou imagens. Cada dimensão em um vetor corresponde a um atributo específico dos dados.
• Modelos de embedding: esses modelos de IA especializados transformam dados de entrada, como texto, em vetores de alta dimensão. O aspecto fascinante é que entradas semelhantes são mapeadas para vetores próximos uns dos outros nesse espaço de alta dimensão.
• Pesquisa de similaridade de vetores: essa técnica aproveita a proximidade de embeddings de vetores para identificar pontos de dados relevantes. Dada uma consulta de entrada, ela encontra entradas no banco de dados com vetores de embedding semelhantes, indicando relação semântica.

Como funciona o processo de recuperação

1. Incorporação da consulta: a entrada do usuário (por exemplo, "jantar romântico em Paris") é transmitida por um modelo de embedding, gerando um vetor de consulta.
2. Embeddings de banco de dados: o ideal é que você tenha pré-processado seu banco de dados de destinos, criando vetores de embedding para cada entrada.
3. Cálculo de semelhança: o vetor de consulta é comparado a cada vetor de embedding no banco de dados usando uma métrica de similaridade (por exemplo, semelhança de cossenos).
4. Recuperação: as entradas mais semelhantes do banco de dados, com base na proximidade com o vetor de consulta, são recuperadas como sugestões relevantes.

Ao incorporar esse mecanismo de recuperação ao seu aplicativo, você aproveita o modelo Gemini para gerar sugestões que não são apenas criativas, mas também estão firmemente enraizadas no seu conjunto de dados específico. Essa abordagem garante que a saída gerada permaneça contextualmente relevante e alinhada com as informações disponíveis no seu banco de dados.

Ativar a pesquisa de semelhança de vetores no Firestore

Em uma etapa anterior deste codelab, você preencheu o banco de dados do Firestore com exemplos de lugares e atividades. Cada entrada de local inclui um campo de texto knownFor que descreve os atributos importantes, além de um campo embedding correspondente que contém a representação vetorial da descrição.

Para aproveitar o poder da pesquisa de similaridade vetorial nesses embeddings, você precisa criar um índice do Firestore. Esse índice permite a recuperação eficiente de lugares com base na semelhança dos vetores de embedding deles com uma determinada consulta.

1. No seu terminal, execute o seguinte comando para instalar o componente alpha mais recente. Você precisa da versão 2024.05.03 ou mais recente:

   gcloud components install alpha
   

2. Crie o índice, substituindo YOUR_PROJECT_ID pelo ID do projeto.

   gcloud alpha firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config=vector-config='{"dimension":"768","flat": "{}"}',field-path=embedding
   

3. Na interface do desenvolvedor do Genkit, abra o placesRetriever.
4. Clique em Executar. Observe o objeto estruturado com texto de marcador de posição, indicando onde você vai implementar a lógica de recuperação.
5. No editor de código, abra o arquivo genkit-functions/src/lib/placesRetriever.ts.
6. Role a tela para baixo até o fim e substitua o marcador de posição placesRetriever por este:

   export const placesRetriever = defineFirestoreRetriever({
     name: 'placesRetriever',
     firestore,
     collection: 'places',
     contentField: 'knownFor',
     vectorField: 'embedding',
     embedder: textEmbeddingGecko,
     distanceMeasure: 'COSINE',
   });
   

Testar o recuperador

1. Na interface do desenvolvedor do Genkit, abra o retriever placesRetriever.
2. Insira a seguinte Query:

   {
       "content": [
           {
               "text": "UNESCO"
           }
       ]
   }
   

3. Também é possível inserir Opções. Por exemplo, veja como especificar quantos documentos o extrator vai retornar:

   {
       "limit": 4
   }
   

4. Clique em Executar.

É possível filtrar ainda mais os dados além da semelhança adicionando cláusulas where às Opções.

8. Geração aumentada de recuperação (RAG) com Genkit

Nas seções anteriores, você criou comandos individuais capazes de processar texto, JSON e imagens, gerando destinos de férias e outros conteúdos interessantes para seus usuários. Você também implementou um comando que recupera destinos relevantes do seu banco de dados do Firestore. Agora, é hora de orquestrar esses componentes em um fluxo coeso de geração aumentada de recuperação (RAG).

Esta seção apresenta um conceito importante do Genkit chamado fluxos. Os fluxos são funções com tipagem forte e passíveis de fluxo que podem ser invocadas local e remotamente, com total observabilidade. Você pode gerenciar e invocar fluxos na CLI e na interface do desenvolvedor do Genkit.

1. No editor de código, examine o comando do itinerário:
   1. Abra o arquivo genkit-functions/prompts/itineraryGen.prompt.
   2. Observe como o comando foi expandido para aceitar outras entradas, especificamente os dados de atividades provenientes do recuperador.
2. Na interface do desenvolvedor do Genkit, confira um fluxo do Genkit no arquivo genkit-functions/src/lib/itineraryFlow.ts.
   Dica: para simplificar a depuração, considere dividir fluxos longos em etapas menores e gerenciáveis.
3. Aprimore o fluxo integrando uma "descrição da imagem" etapa:
   1. Localize o comentário TODO: 2 (perto da linha 70). Isso marca o ponto em que você vai melhorar seu fluxo.
   2. Substitua o marcador vazio imgDescription pela saída gerada pela chamada de solicitação imgDescription.
4. Teste o fluxo:
   1. Acesse o itineraryFlow.
   2. Use a entrada a seguir para testar a execução de itineraryFlow com a etapa recém-adicionada:

      {
          "request": "Sightseeing in Paris",
          "imageUrls": [
              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
          ]
      }
      

   3. Clique em Executar.
   4. Observe o resultado gerado, que deve incorporar a descrição da imagem à sugestão de itinerário.
5. Se você encontrar erros ou comportamentos inesperados, verifique a guia Inspecionar para saber mais. Também é possível usar essa guia para analisar o histórico de execuções do Trace Store.

RAG para seu aplicativo da Web

1. Verifique se o app da Web ainda está em execução acessando http://localhost:3000/ no seu navegador.
2. Se o app da Web não estiver mais em execução, execute estes comandos no terminal:

   npm install
   npm run dev
   

3. Confira a página do app da Web Dream Your Vacation (http://localhost:3000/gemini).
4. Confira o código-fonte (src/app/gemini/page.tsx) para conferir um exemplo de integração do Next.js.

9. Implantar seu aplicativo com o Firebase App Hosting

A etapa final desta jornada é a implantação do seu app da Web. Você vai usar o Firebase App Hosting, uma solução de hospedagem com reconhecimento de framework projetada para simplificar a implantação de apps Next.js e Angular em um back-end sem servidor.

1. Confirme as alterações no repositório git local e as envie para o GitHub.
2. No console do Firebase, acesse Hospedar app no seu projeto do Firebase.
3. Clique em Começar > Conectar ao GitHub.
4. Selecione sua conta do GitHub e o repositório. Clique em Next.
5. Em Configuração da implantação > Diretório raiz, mantenha o valor padrão.
6. Em Live branch, selecione a ramificação main do seu repositório do GitHub. Clique em Next.
7. Digite um ID para o back-end (por exemplo, compass).
8. Quando for solicitado que você crie ou associe um app da Web do Firebase, escolha Selecionar um app da Web do Firebase e selecione o app que você criou em uma etapa anterior deste codelab.
9. Clique em Finish and Deploy.

Como monitorar o status da implantação

O processo de implantação levará alguns minutos. É possível acompanhar o progresso na seção "Hospedeiro de apps" do Console do Firebase.

Conceder permissões à conta de serviço

Para que o back-end do Node.js acesse os recursos da Vertex AI, você precisa atribuir o papel aiplatform.user à conta de serviço do app:

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

Depois de concluído, o app da Web vai estar acessível aos usuários.

Reimplantação automática

O Firebase App Hosting simplifica as atualizações futuras. Sempre que você envia alterações para a ramificação principal do repositório do GitHub, o Firebase App Hosting recria e reimplanta automaticamente o app, garantindo que os usuários sempre tenham a versão mais recente.

10. Conclusão

Parabéns por concluir este codelab abrangente!

Você aproveitou o poder do Firebase Genkit, do Firestore e da Vertex AI para criar um "fluxo" sofisticado que gera recomendações de férias personalizadas com base nas preferências e inspirações do usuário, tudo isso com base nos dados do seu aplicativo.

Ao longo desta jornada, você adquiriu experiência prática com padrões essenciais de engenharia de software, que são cruciais para a criação de aplicativos robustos de IA generativa. Esses padrões incluem:

• Gerenciamento de comandos: organizar e manter comandos como código para melhorar a colaboração e o controle de versões.
• Conteúdo multimodal: integração de diversos tipos de dados, como imagens e texto, para melhorar as interações de IA.
• Esquemas de entrada/saída: estruturar dados para integração e validação perfeitas no seu app.
• Repositórios de vetores: aproveitamento de embeddings de vetores para pesquisa de similaridade eficiente e recuperação de informações relevantes.
• Recuperação de dados: implementação de mecanismos para buscar e incorporar dados de bancos de dados em conteúdo gerado por IA.
• Geração aumentada de recuperação (RAG): combina técnicas de recuperação com IA generativa para gerar resultados precisos e relevantes para o contexto.
• Instrumentação de fluxo: criar e orquestrar fluxos de trabalho complexos de IA para execução perfeita e observável.

Ao dominar esses conceitos e aplicá-los no ecossistema do Firebase, você estará pronto para embarcar nas suas próprias aventuras de IA generativa. Conheça as vastas possibilidades, crie aplicativos inovadores e continue ampliando os limites do que é possível alcançar com a IA generativa.

Como explorar opções alternativas de implantação

O Genkit oferece várias opções de implantação para atender às suas necessidades específicas, incluindo:

• Cloud Functions para Firebase
• Cloud Run
• Next.js
• Qualquer ambiente Node.js
• O Genkit também oferece suporte ao Go

Basta escolher a melhor opção executando o seguinte comando na pasta de nó (package.json):

npx genkit init

Próximas etapas

• Teste comandos e aproveite as grandes janelas de contexto no Google AI Studio ou no Vertex AI Studio.
• Saiba mais sobre a pesquisa de geração aumentada de recuperação (RAG) com IA.
• Confira a documentação oficial do Firebase Genkit.
• Saiba mais sobre os recursos de pesquisa de similaridade no Firestore e no Cloud SQL para PostgreSQL.
• Conheça melhor os fluxos de genAI com a chamada de função.