Visão geral

Neste laboratório, você vai integrar um agente de IA do LangChain a um app do Flutter. O Flutter é usado como o framework de app cliente, o Agent Search na Gemini Enterprise Agent Platform é usado como um banco de dados de vetores e o Agent Runtime na Gemini Enterprise Agent Platform é usado para criar e implantar o agente do LangChain. O agente usa o Gemini, uma família de modelos de linguagem grandes (LLMs) altamente capazes, para gerar respostas de IA para comandos de texto e imagem.

O laboratório é pré-provisionado com o VS Code como IDE usando o code-server, além das extensões do Flutter e do Dart necessárias para executar o app do Flutter. O laboratório também inclui o fwr, uma ferramenta usada para disponibilizar o app do Flutter como um web app que pode ser acessado por um navegador.

O laboratório é voltado para desenvolvedores com experiência que contribuem para a criação de apps, mas que talvez não estejam familiarizados com o desenvolvimento de aplicativos em nuvem. É útil ter certa experiência em Python e familiaridade com o framework Flutter. Não é necessário conhecer o Flutter para realizar as tarefas deste laboratório, mas você vai analisar parte do código do app do Flutter e testar a funcionalidade dele.

Objetivos

Neste laboratório, você vai realizar as seguintes tarefas:

• Criar um repositório de dados de pesquisa e um app de pesquisa usando AI Applications no console do Google Cloud.

• Implantar um agente do LangChain usando o Gemini Enterprise Agent Platform Workbench.

• Usar um app Python integrado ao Agent Search e ao agente do LangChain.

• Implantar o app no Cloud Run e usá-lo como back-end para um app do Flutter.

• Criar um app do Flutter para usar como aplicativo de chat de front-end.

  Confira a visão geral dos diferentes componentes usados neste laboratório:

  

Configuração

Para cada laboratório, você recebe um novo projeto do Google Cloud e um conjunto de recursos por um determinado período sem custo financeiro.

1. Faça login no Google Skills usando uma janela anônima.

2. Confira o tempo de acesso do laboratório (por exemplo, 1:15:00) e finalize todas as atividades nesse prazo.
   Não é possível pausar o laboratório. Você pode reiniciar o desafio, mas vai precisar refazer todas as etapas.

3. Quando tudo estiver pronto, clique em Começar o laboratório.

4. Anote as credenciais (Nome de usuário e Senha). É com elas que você vai fazer login no Console do Google Cloud.

5. Clique em Abrir Console do Google.

6. Clique em Usar outra conta, depois copie e cole as credenciais deste laboratório nos locais indicados.
   Se você usar outras credenciais, vai receber mensagens de erro ou cobranças.

7. Aceite os termos e pule a página de recursos de recuperação.

Tarefa 1. Criar um repositório de dados de pesquisa e um app de pesquisa

Nesta tarefa, você vai implementar a funcionalidade de pesquisa no app do Flutter criando um repositório de dados de pesquisa e um app de pesquisa usando aplicativos de IA no console do Google Cloud.

Criar um repositório de dados de pesquisa

1. No console do Cloud, clique em Mostrar todos os produtos. Na página Todos os produtos, role a tela até a seção Inteligência artificial e clique em AI Applications.

2. Clique em Continuar e ativar a API.

3. No painel à esquerda, clique em Repositórios de dados e, na página Repositórios de dados, clique em Criar repositório de dados.

   Nesta página, você vai configurar a fonte de dados a ser usada nos resultados da pesquisa. O laboratório é pré-provisionado com um bucket do Cloud Storage que contém um arquivo .csv com dados sobre itens da loja de produtos do Google.

4. Para selecionar o Cloud Storage como fonte de dados, em Cloud Storage, clique em Selecionar.

5. No tipo de dados que será importado, em Importação de dados estruturados, selecione CSV (para dados de perguntas frequentes).

6. Role até a seção Selecionar uma pasta ou um arquivo para importar e clique em Arquivo.

7. Para fornecer o URL do Cloud Storage para o arquivo CSV, clique em Procurar.

8. Para conferir os conteúdos do bucket do Cloud Storage , clique em .

9. Selecione o arquivo goog_merch.csv e clique em Selecionar.

   O URI gs:// da pasta é preenchido.

   

10. Clique em Continuar.

11. Para o nome do repositório de dados, digite goog-merch-ds e clique em Continuar.

12. Mantenha o valor padrão do modelo de preços e clique em Criar.

    Um repositório de dados é criado, e a ingestão de dados do arquivo CSV é iniciada.

13. Na página Repositórios de dados, clique no nome do repositório que você acabou de criar.

14. Clique em Atualizar.

    A guia Documentos exibe uma lista de documentos importados.

15. Para acessar os dados associados a um documento, clique em Exibir documento.

Para verificar o objetivo, clique em Verificar meu progresso. Criar um repositório de dados do Agent Search.

Criar um app de pesquisa

Para usar o repositório de dados de pesquisa, conecte-o a um app de pesquisa em AI Applications.

1. No console do Cloud, clique em AI Applications e em Apps.

2. Clique em Criar um novo app.

3. Na página Criar app, no tipo de app ou build, em Pesquisa e assistente, em Pesquisa personalizada (geral), clique em Criar.

4. Na página Configuração do app de pesquisa, configure um app de pesquisa de sites com estas definições, deixando as demais como padrão:

   Propriedade	Valor (digite ou selecione)
   Recursos da edição Enterprise	Desativar
   Nome do seu app	gms-search-app
   Nome externo da sua empresa ou organização	gms-company
   Localização do app	global (Global)

5. Clique em Continuar.

6. Uma lista de repositórios de dados atuais é exibida. Selecione o repositório de dados goog_merch_ds criado na subtarefa anterior e clique em Continuar.

7. Mantenha o valor padrão de plano de preços e clique em Criar.

   O app de pesquisa é criado e o repositório de dados é conectado a ele.

8. Para testar o app de pesquisa, no menu de navegação dos aplicativos de IA, clique em Visualizar.

9. No campo Pesquisar, digite dino e pressione Enter.

   Uma lista de resultados de pesquisa relacionados é exibida com base nos documentos importados para o repositório de dados.

   

   Observação: se aparecer o erro A visualização da pesquisa ainda não está pronta, aguarde alguns minutos e tente de novo. Se não quiser esperar, vá para a próxima tarefa do laboratório.

Para verificar o objetivo, clique em Verificar meu progresso. Criar um app de Pesquisa de agentes.

Tarefa 2. Criar e implantar o back-end

O back-end do app do Flutter será executado como um serviço do Cloud Run no Google Cloud. O serviço de back-end é integrado ao app de pesquisa que você criou na tarefa anterior para gerar respostas de pesquisa com base nos dados da loja de produtos.

Em uma tarefa posterior, você também vai integrar o app de back-end a um agente do LangChain para acessar o Gemini em busca de conteúdo de IA generativa em resposta a consultas do app do Flutter.

Nesta tarefa, você vai criar e implantar o app de back-end em Python no Cloud Run.

Configurar e analisar o app de back-end

1. Um IDE baseado no VS Code foi pré-provisionado para este laboratório. Para acessar o IDE, copie o URL do serviço do IDE no painel de credenciais do laboratório e cole-o em uma nova janela ou guia em navegação anônima.

   

   Observação: o URL do serviço do IDE é o endpoint de um serviço do Cloud Run pré-provisionado para este laboratório e encaminha solicitações para a VM code-server. O IDE foi criado com o Code Server e inclui as extensões Flutter, Dart e Vim.

   

2. Abra um terminal no IDE. No menu de navegação do IDE (), clique em Terminal > Novo terminal.

   Observação: execute os comandos nas etapas abaixo na janela do terminal do IDE.

3. A versão inicial do app de back-end e os arquivos relacionados são pré-provisionados para o laboratório. Copie a versão inicial da pasta do app de back-end e o conteúdo dela de um arquivo no Cloud Storage:

   gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web.zip ~ && unzip ~/ag-web -d ~ && rm ~/ag-web.zip Observação: se for solicitado, clique em Permitir para colar textos e imagens da área de transferência e pressione Enter.

4. Para listar o conteúdo da pasta, na janela do terminal do ambiente de desenvolvimento integrado (IDE), execute o seguinte:

   ls ~/ag-web/app

   A pasta ag-web/app contém o código-fonte do aplicativo e outros arquivos necessários para criar e implantar o app de back-end no Cloud Run.

5. Defina as configurações PROJECT_ID e LOCATION para o app.

   sed -i 's/GCP_PROJECT_ID/{{{project_0.project_id|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCP_REGION/{{{project_0.default_region|set at lab start}}}/' ~/ag-web/app/app.py

6. Configure o app de back-end para usar o repositório de dados de pesquisa que você criou anteriormente.

   sed -i 's/SEARCH_DATASTORE_ID/{YOUR_SEARCH_DATASTORE_ID}/' ~/ag-web/app/app.py

   No comando, substitua a string {YOUR_SEARCH_DATASTORE_ID} pelo valor do ID do seu repositório de dados de pesquisa. Não se esqueça de remover as chaves no comando sed.

   Observação: para ter acesso ao valor do ID do repositório de dados de pesquisa, no console do Cloud, acesse AI Applications > Repositórios de dados e clique no nome do repositório que você criou anteriormente. Copie o valor do ID do repositório de dados, que é o mesmo que o ID do mecanismo de pesquisa.

   

7. Para acessar o código no IDE, no menu de navegação do IDE, clique em e em Abrir pasta.

8. Selecione a pasta IDE-DEV/ag-web/ na lista e clique em OK.

9. Para confiar nos autores do código, clique em Sim, confio nos autores.

10. No painel Explorer, expanda a pasta app e clique em app.py para abrir o arquivo no editor.

    O código do app de back-end faz o seguinte:

    • Inicializa um SearchServiceClient da API discoveryengine.googleapis.com.
    • A função search_gms() usa o endpoint datastores da API para iniciar uma solicitação de pesquisa. O ID do repositório de dados que você criou mais cedo é usado no URL.
    • A função usa a consulta de pesquisa fornecida pelo usuário para pesquisar o conteúdo do repositório de dados e coloca os resultados em uma resposta JSON.
    • O app usa o flask para rotear chamadas para as funções individuais. O endpoint / é a página padrão usada para verificar se o app está sendo carregado corretamente, enquanto o endpoint /ask_gms invoca a função search_gms() que usa o Agent Search.

Criar e implantar o app no Cloud Run

Um script de implantação está disponível para criar e implantar o app de back-end no Cloud Run.

1. Abra uma janela do terminal no IDE e vá para a pasta do app de back-end:

   cd ~/ag-web/app

2. Faça a autenticação no Google Cloud usando a CLI gcloud:

   gcloud auth login

3. Para continuar, digite Y.

4. Para iniciar o login, pressione Control (para Windows e Linux) ou Command (para macOS) e clique no link no terminal.

5. Para confirmar a abertura do site externo, caso necessário, clique em Abrir.

6. Clique no endereço de e-mail do estudante do laboratório.

7. Quando aparecer uma janela confirmando a ação, clique em Continuar.

8. Para permitir que o SDK Google Cloud acesse sua Conta do Google e concordar com os termos, clique em Permitir.

   O código de verificação aparece na guia do navegador.

9. Clique em Copiar.

10. Na janela do terminal do IDE, cole o código onde está escrito Inserir código de autorização e pressione Enter.

    Você fez login no Google Cloud.

11. Torne o script deploy.sh executável e execute-o para implantar o app na região especificada do Cloud Run:

    chmod a+x deploy.sh; ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

    Depois que o app for criado e implantado no Cloud Run, o URL do endpoint dele será exibido no final da saída do script. O URL foi gerado pelo comando gcloud run deploy executado no script.

    Observação: esse comando leva um tempo para ser executado. Aguarde a conclusão para prosseguir para a próxima tarefa.

Testar o app de back-end

Acesse o endpoint do Cloud Run para testar a funcionalidade do app.

1. Copie o URL do endpoint do app gerado na etapa anterior e acesse esse URL em uma nova guia do navegador.

2. Quando o app é carregado, a página inicial mostra Este é o app de back-end ag-web.

3. Na barra de URL do navegador, adicione o caminho abaixo ao final do URL:

   /ask_gms?query=dino

4. Verifique se o app responde com os resultados do repositório de dados de pesquisa que você criou anteriormente.

Para verificar o objetivo, clique em Verificar meu progresso. Criar um app de back-end.

Tarefa 3. Criar um agente do LangChain

Um agente de IA é um aplicativo que usa o poder dos modelos de linguagem grandes (LLMs) para raciocínio e orquestração com ferramentas externas. A Gemini Enterprise Agent Platform é um pacote de produtos e ferramentas do Google que ajuda você a criar agentes de IA conectando-os a fontes de dados confiáveis.

O Agent Runtime na Gemini Enterprise Agent Platform ajuda você a criar e implantar um agente de raciocínio na Agent Platform. O LangChain é uma ferramenta de OSS conhecida usada para criar chatbots e sistemas RAG.

A Agent Platform permite que os desenvolvedores usem a chamada de função para associar a resposta dos LLMs (Gemini) às funções em Python. É possível desenvolver e implantar agentes usando o modelo LangChain específico do framework com o SDK da Agent Platform.

Nesta tarefa, você vai usar o Agent Platform Workbench com um notebook do Jupyter para criar e implantar um agente do LangChain com funções em Python. O agente será usado no aplicativo de back-end de IA generativa na próxima tarefa do laboratório.

Criar uma instância do Agent Platform Workbench

O Agent Platform Workbench é um ambiente de desenvolvimento baseado em notebook do Jupyter para todo o fluxo de trabalho de ciência de dados e machine learning. É possível interagir com o Agent Platform e outros serviços do Google Cloud em um notebook do Jupyter de uma instância do Workbench. Por exemplo, é possível acessar e analisar dados em um notebook do Jupyter com as integrações do BigQuery e do Cloud Storage.

Os notebooks do Agent Platform Workbench oferecem uma solução flexível e escalonável para desenvolver e implantar modelos de ML no Google Cloud.

1. Para criar uma instância do Workbench, no console do Cloud, clique no menu de navegação () e selecione Agent Platform > Notebooks.

2. No menu de navegação Notebooks, clique em Workbench.

3. Verifique se a opção Instâncias está selecionada na guia Instâncias e clique em Criar nova.

   

4. Na página Nova instância, digite my-instance em Nome.

5. Mantenha os valores padrão para as demais configurações e clique em Criar.

   A nova instância é ativada na seção de instâncias. Antes de avançar para a próxima etapa, aguarde a criação da instância.

   Observação: uma marca de seleção verde aparece ao lado da instância quando ela está pronta para uso.

6. Quando a instância estiver pronta, clique em Abrir JupyterLab.

   

7. Para iniciar um notebook do Jupyter em Python 3, clique no notebook Python 3.

   

Copiar um arquivo de notebook

Um notebook que cria e implanta um agente do LangChain foi pré-provisionado para este laboratório.

1. Para copiar o notebook para a instância do JupyterLab, copie este código na primeira célula do novo notebook:

   !gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web/ag_setup_re.ipynb .

   

2. Selecione a célula e, no menu dela, clique em Executar:

   

   O comando copia o notebook do Cloud Storage para a instância do JupyterLab. Depois que o comando for concluído, o arquivo do notebook será listado na pasta raiz de nível superior.

   

3. Clique duas vezes no arquivo do notebook na lista de pastas para abri-lo. Uma guia separada é criada com o conteúdo do notebook.

Criar e implantar um agente do Reasoning Engine

1. Execute todas as células do código no notebook em ordem, começando do início. Para executar uma célula, clique em qualquer lugar dela para selecioná-la e depois em Executar no menu da célula ou no menu superior do notebook.

   Observação: na execução do comando da célula, aguarde até que ele seja concluído antes de passar para a próxima. Quando um comando é concluído, o asterisco (*) no campo de número da célula é substituído pelo número da célula. Observação: antes de executar uma célula, confira as notas abaixo para saber se há instruções ou etapas específicas. Essas instruções são marcadas com o prefixo CELL INSTR.

   a. [CELL INSTR] Reinicie o ambiente de execução atual.

   Se for solicitado, na caixa de diálogo Reinicialização do kernel, clique em OK.

   b. [CELL INSTR] Defina as informações do projeto do Google Cloud e inicialize a Agent Platform:

   Antes de executar a célula para inicializar a Agent Platform, atualize os valores de configuração do project_id, do local e do bucket de preparação do laboratório:

   PROJECT_ID = "{{{project_0.project_id|set at lab start}}}" LOCATION = "{{{project_0.default_region|set at lab start}}}" STAGING_BUCKET = "gs://{{{project_0.startup_script.lab_bucket_name}}}"

   Célula atualizada com configurações de exemplo:

   

   c. [CELL INSTR] Defina o agente:

   Antes de executar a célula, substitua o valor de GEMINI_MODEL_ID pelo ID do modelo mais recente usado neste notebook: .

   Observação: também é possível executar uma célula clicando em Executar na barra de menus do notebook.

2. Depois de executar a célula Implantar o agente no Agent Runtime, aguarde a conclusão do comando e implante o agente do LangChain. Depois, copie o ID do agente:

   

   Você vai usar esse ID para configurar e reimplantar o app de back-end na próxima tarefa.

   Observação: a célula pode levar até 10 minutos para ser concluída. Antes de prosseguir para a próxima etapa, aguarde a exibição da resposta final que indica que o agente foi implantado.

3. Para testar a operação do agente do LangChain, execute as duas células a seguir e analise a resposta.

   O agente do LangChain invoca o repositório de dados da Wikipédia ou do Agent Search com base na entrada da consulta.

Para verificar o objetivo, clique em Verificar meu progresso. Implantar o agente do LangChain.

Tarefa 4. Aprimorar o app de back-end

Agora é hora de aprimorar o app de back-end para invocar o agente do LangChain que você implantou na tarefa anterior.

A versão inicial do app de back-end só buscava resultados diretamente da Pesquisa de agentes. Na versão atualizada, o app também vai invocar o agente que usa a resposta do Gemini e as ferramentas do agente para gerar uma resposta do Agent Search ou da Wikipédia com base no comando de entrada.

Nesta tarefa, você vai atualizar o código do app de back-end para adicionar outro ponto de entrada que invoca o agente do LangChain com uma consulta de solicitação e retorna a resposta do agente.

Atualizar o app de back-end

1. Na janela do terminal do IDE, execute o seguinte comando para adicionar o arquivo app.py com o código do novo ponto de entrada:

   cat << EOF >> ~/ag-web/app/app.py # # Agent Engine # import vertexai from vertexai import agent_engines from google.cloud import resourcemanager_v3 def get_project_number(project_id): client = resourcemanager_v3.ProjectsClient() # Construct the resource name for the project name = f"projects/{project_id}" # Get project metadata project = client.get_project(name=name) # The 'name' field in the response is in the format 'projects/123456789' project_number = project.name.split('/')[-1] return project_number PROJECT_NUM = get_project_number(PROJECT_ID) LANGCHAIN_AGENT = "LANGCHAIN_AGENT_ID" remote_agent = vertexai.agent_engines.get(f"projects/{PROJECT_NUM}/locations/{LOCATION}/reasoningEngines/{LANGCHAIN_AGENT}") # Endpoint for the Flask app to call the Agent @app.route("/ask_gemini", methods=["GET"]) def ask_gemini(): query = request.args.get("query") log.info("[ask_gemini] query: " + query) retries = 0 resp = None while retries < MAX_RETRIES: try: retries += 1 resp = remote_agent.query(input=query) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Empty response.") break except Exception as e: log.error("[ask_gemini] error: " + str(e)) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Too many retries.") return "No response received from Reasoning Engine." else: return resp["output"] EOF

2. Configure o app de back-end para usar o agente do LangChain que você criou anteriormente.

   Substitua a string {YOUR_LANGCHAIN_AGENT_ID} no comando abaixo pelo valor do ID do agenda que você copiou da célula do notebook na tarefa anterior e execute o comando abaixo na janela do terminal do IDE.

   Não se esqueça de remover as chaves no comando sed.

   sed -i 's/LANGCHAIN_AGENT_ID/{YOUR_LANGCHAIN_AGENT_ID}/' ~/ag-web/app/app.py

3. Para exibir o código no IDE, no menu de navegação do IDE, clique em e selecione o arquivo IDE-DEV/ag-web/app/app.py.

   Na versão aprimorada do app de back-end:

   • Um identificador do remote_agent é recuperado do Agent Runtime com o LANGCHAIN_AGENT_ID do agente que você criou na tarefa anterior.
   • Um novo endpoint /ask_gemini que define a função ask_gemini() é configurado.
   • A função transmite o parâmetro query fornecido pelo usuário na solicitação para o agente do LangChain (remote_agent) e retorna a resposta do agente.

Criar e reimplantar o app de back-end no Cloud Run

1. Mude para a pasta do app de back-end:

   cd ~/ag-web/app

2. Execute o script para reimplantar o app na região especificada do Cloud Run:

   ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

Testar o app de back-end

Acesse o endpoint do Cloud Run para testar a funcionalidade do app.

1. Copie o URL do endpoint do app gerado na etapa anterior e acesse esse URL em uma nova guia do navegador.

2. Quando o app é carregado, a página inicial mostra Este é o app de back-end ag-web.

3. Na barra de URL do navegador, adicione o caminho abaixo ao final do URL:

   /ask_gemini?query=where can I buy the chrome dino pin

   O app responde com os resultados que o agente buscou no repositório de dados do Agent Search que você criou anteriormente.

   Chrome Dino Enamel Pin is a product sold at Google Merch Shop. The price is 7.00 USD. You can buy the product at their web site: https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/.

4. Na barra de URL do navegador, substitua o caminho pelo seguinte:

   /ask_gemini?query=what is fallingwater. Escreva a resposta em texto simples.

   O app responde com os resultados do agente que buscou uma resposta da API da Wikipédia que você configurou no notebook.

   Fallingwater was designed by architect Frank Lloyd Wright in 1935. It is located in southwest Pennsylvania, about 70 miles southeast of Pittsburgh. The house is famous because it was built partly over a waterfall. Observação: a resposta real que você recebe pode variar daquelas mostradas acima.

Tarefa 5. Criar o app de front-end do Flutter

O Flutter é um framework de desenvolvimento de apps multiplataforma de código aberto. Com ele, você pode escrever uma base de código para execução no Android, no iOS, na Web, no macOS, no Windows e no Linux. Os apps do Flutter são desenvolvidos na linguagem de programação Dart.

Para este laboratório, você vai usar a web como plataforma de destino, para que o app do Flutter possa ser implantado como um web app e acessado por um navegador.

Nesta tarefa, você vai criar um app de chat simples usando o Flutter, atualizar o código e criar e executar o app como um web app.

Criar o app do Flutter

1. No terminal do IDE, acesse o diretório principal e execute:

   cd ~; flutter create chat_app

   O comando flutter create cria todos os arquivos, pastas e configurações necessários para um novo projeto executável do Flutter.

2. Para visualizar o código do app de chat padrão no IDE, navegue até a pasta IDE-DEV/chat_app.

   Talvez seja necessário clicar em "Atualizar" para atualizar o conteúdo do painel de navegação de pastas no IDE.

3. Se for solicitado, confie nos autores dos arquivos na pasta, clique em Sim, confio nos autores.

Analisar o código do app do Flutter

Confira uma visão geral do conteúdo da pasta chat_app:

Pasta/arquivo	Descrição
chat_app	Pasta raiz do projeto que contém as subpastas e os arquivos que compõem o app do Flutter.
android/ios/linux/macos/web/windows	Contém arquivos específicos da plataforma que são necessários para executar o app do Flutter nas plataformas com suporte.
lib	Contém os arquivos Dart do aplicativo principal, que incluem a funcionalidade e a interface do usuário.
test	Contém testes do Dart usados para testar os widgets do app.
pubspec.yaml	Contém as dependências do app, a versão do Flutter e outras configurações.
analysis_options.yaml	Contém as configurações de análise estática do app.

Vamos analisar o arquivo de ponto de entrada main.dart do app do Flutter.

• No menu Explorer, clique no arquivo IDE-DEV/chat_app/lib/main.dart para abri-lo.

  Esse é o ponto de entrada do app do Flutter. Depois de executar as tarefas de inicialização, o código nesse arquivo cria a interface do app usando componentes do material e define o título, o tema e outras configurações do app.

  Observação: um app do Material começa com o widget MaterialApp, que cria vários widgets úteis na raiz do app, incluindo um Navigator que gerencia o roteamento para várias telas no app.

  O Flutter usa o conceito de widgets, que são classes declarativas usadas para criar o app. No Flutter, você cria um layout com a composição de widgets para criar widgets mais complexos e formar uma árvore de widgets. Para saber como criar interfaces no Flutter, consulte a documentação.

  Esse arquivo contém as classes que criam os widgets do app. Ele inclui:

  • A classe MyApp, que é o widget raiz do aplicativo de chat.
  • A classe MyHomePage que cria a página principal do app usando a classe _MyHomePageState.
  • A classe _MyHomePageState que cria a interface do app e é responsável por atualizar o estado da interface.

  Vamos substituir o código gerado padrão nessas classes nas próximas subtarefas à medida que você cria o app de chat.

Atualizar o código do app do Flutter

1. Primeiro, atualize o título do app. Na classe MyApp na linha 14, altere o valor da propriedade title:

   title: 'Gemini Chat App',

   

2. Na classe _MyHomePageState, na linha 58, exclua a linha int _counter = 0; e a função _incrementCounter() e adicione as seguintes propriedades:

   final TextEditingController _controller = TextEditingController(); final List<Map<String, String>> _messages = []; String _cloudRunHost = '';

   Essas propriedades são usadas para aceitar a entrada do usuário de comando de texto, armazenar a entrada do usuário e as respostas do app de back-end para exibição e armazenar o nome do host do serviço do Cloud Run do app de back-end.

3. Adicione o método initState() à classe:

   @override void initState() { super.initState(); _loadConfig(); }

   Esse método executa funções de inicialização quando o objeto State é criado. No app de chat, invocamos o método _loadConfig() (que vamos implementar em seguida) para carregar o conteúdo de um arquivo.

4. Adicione o método _loadConfig() à classe:

   Future<void> _loadConfig() async { final configString = await rootBundle.loadString('assets/config.json'); final config = json.decode(configString); setState(() { _cloudRunHost = config['cloudRunHost']; }); }

   Esse método recupera o conteúdo do arquivo de configuração do app de chat que armazena o valor do nome do host do seu app de back-end do Cloud Run em um objeto JSON. Vamos criar esse arquivo mais tarde no laboratório. O método armazena o valor na propriedade interna _cloudRunHost criada anteriormente e cria a interface do widget.

5. Adicione o método _sendMessage() à classe:

   Future<void> _sendMessage() async { if (_controller.text.isEmpty) { return; } final message = _controller.text; _controller.clear(); setState(() { _messages.add({'sender': 'user', 'text': message}); }); if (_cloudRunHost.isEmpty || _cloudRunHost == 'YOUR_CLOUD_RUN_ENDPOINT_URL') { setState(() { _messages.add({ 'sender': 'bot', 'text': 'Please configure the Cloud Run endpoint in assets/config.json' }); }); return; } try { var endpoint_query = Uri.https(_cloudRunHost, '/ask_gemini', {'query': message}); final response = await http.get(endpoint_query); if (response.statusCode == 200) { var responseText = utf8.decode(response.bodyBytes); responseText = responseText.replaceAll(RegExp(r'\*'), ''); setState(() { _messages.add({'sender': 'bot', 'text': responseText}); }); } else { setState(() { _messages.add({ 'sender': 'bot', 'text': 'Error: ${response.statusCode}' }); }); } } catch (e) { setState(() { _messages.add({'sender': 'bot', 'text': 'Error: $e'}); }); } }

   Esse método recupera o texto do comando inserido pelo usuário e o adiciona à lista de mensagens exibidas no painel de chat. Ele envia uma solicitação GET HTTP para o URL do endpoint do serviço de back-end do Cloud Run com o comando de entrada e exibe a resposta do serviço.

   O código cria um URL para o endpoint do host de back-end do Cloud Run que inclui o texto do comando em um parâmetro de consulta. A solicitação GET HTTP é enviada ao endpoint. Depois que a resposta é recebida com um código de status 200, ela é decodificada e adicionada à lista de mensagens para exibição na tela de chat. Se a resposta não for bem-sucedida ou ocorrer uma exceção, a mensagem de exceção ou o código de status será adicionado à lista de mensagens e exibido.

6. Para criar a interface do app de chat, substitua o método build pelo código abaixo na classe _MyHomePageState:

   @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Gemini Chat App'), ), body: Column( children: [ Expanded( child: ListView.builder( padding: const EdgeInsets.all(8.0), itemCount: _messages.length, itemBuilder: (context, index) { final message = _messages[index]; final isUserMessage = message['sender'] == 'user'; return Align( alignment: isUserMessage ? Alignment.centerRight : Alignment.centerLeft, child: Container( margin: const EdgeInsets.symmetric(vertical: 4.0), padding: const EdgeInsets.all(12.0), decoration: BoxDecoration( color: isUserMessage ? Colors.blue[100] : Colors.grey[200], borderRadius: BorderRadius.circular(8.0), ), child: Text(message['text']!), ), ); }, ), ), Padding( padding: const EdgeInsets.all(8.0), child: Row( children: [ Expanded( child: TextField( controller: _controller, decoration: const InputDecoration( hintText: 'Enter a message', ), onSubmitted: (text) => _sendMessage(), ), ), IconButton( icon: const Icon(Icons.send), onPressed: _sendMessage, ), ], ), ), ], ), ); }

   O método build descreve a interface do usuário do app de chat. Ele cria uma árvore de widgets com a configuração e o estado atual, que o framework do Flutter renderiza na tela. Nesta interface do app de chat, o código mostra as mensagens em uma coluna, além de um campo de texto e um botão de envio para o comando do usuário. As mensagens inseridas pelo usuário (comandos) são renderizadas em uma caixa azul e as mensagens de resposta ou erro do app (bot) são renderizadas em uma caixa cinza.

   Quando o usuário clica em Enviar no app de chat ou pressiona Enter no campo de texto depois de inserir um comando, o método de callback _sendMessage() é invocado.

Adicionar importações

O código adicionado depende de determinadas bibliotecas ou pacotes dos SDKs do Dart e do Flutter.

1. Para importar esses pacotes, adicione as seguintes instruções import no início do arquivo main.dart abaixo da instrução import atual:

   import 'package:http/http.dart' as http; import 'dart:convert'; import 'package:flutter/services.dart' show rootBundle;
   • O pacote http.dart contém um conjunto de funções e classes de alto nível que facilitam o consumo de recursos HTTP.
   • A biblioteca dart:convert tem funções que lidam com conversões de dados comuns, como serialização JSON e codificação/decodificação UTF-8.
   • A propriedade rootBundle é um objeto estático global que fornece acesso ao pacote de recursos principal incluído no seu app do Flutter.

2. Para salvar as alterações no app, no menu de navegação do IDE, clique em Arquivo > Salvar.

Atualizar dependências

O arquivo pubspec.yaml especifica os metadados do projeto, as dependências de pacotes e os recursos do seu app do Flutter.

1. Selecione o arquivo pubspec.yaml no painel "Explorer" no IDE para editá-lo. O arquivo está na pasta chat_app.

2. Na seção dependencies, adicione a dependência do pacote http abaixo da biblioteca de fontes cupertino_icons:

   http: ^1.6.0 Mantenha o recuo correto do espaço.

   

3. Role até a seção flutter no arquivo pubspec.yaml e remova a marca de comentário da linha 63. Adicione a pasta assets em assets preservando o recuo do espaço:

   assets: - assets/

   

   Isso configura a pasta de recursos em que o arquivo config.json do app está armazenado.

4. Para salvar as alterações no arquivo pubspec.yaml, no menu de navegação do IDE, clique em Arquivo > Salvar.

Integrar o app do Flutter ao back-end do Cloud Run

O app do Flutter se integra ao agente do Reasoning Engine que você implantou no começo no laboratório. A integração é feita conectando o app do Flutter ao endpoint do app de back-end que você também criou e implantou no Cloud Run.

No método _sendMessage(), talvez você tenha notado um código que verifica se a propriedade _cloudRunHost está vazia ou não configurada em um arquivo chamado assets/config.json. Vamos adicionar esse arquivo ao app do Flutter nesta subtarefa.

1. Primeiro, recupere o nome do host do endpoint do Cloud Run do app de back-end e armazene o valor em uma variável de ambiente.

   Na janela do terminal do IDE, execute o seguinte:

   BACKEND_APP_HOST=$(gcloud run services describe ag-web --region {{{project_0.default_region|set at lab start}}} --format 'value(status.url)' | cut -d'/' -f3); echo $BACKEND_APP_HOST

2. Crie o diretório /assets no diretório inicial do seu app de chat do Flutter:

   mkdir ~/chat_app/assets

3. Crie o arquivo config.json no diretório /assets:

   cat <<EOF > ~/chat_app/assets/config.json { "cloudRunHost": "$BACKEND_APP_HOST" } EOF

4. Para verificar a mudança, atualize o conteúdo no menu Explorer do IDE e clique no arquivo IDE-DEV/chat_app/assets/config.json para abri-lo. Verifique se o valor da entrada de configuração cloudRunHost foi atualizado com o valor do nome do host do app de back-end do Cloud Run.

   Observação: esse valor precisa corresponder ao da variável de ambiente BACKEND_APP_HOST que você definiu em uma etapa anterior.

Implantar o app do Flutter

Agora que a configuração do app do Flutter está concluída, é possível criar e implantar o app. Neste laboratório, você usará o Fwr para executar o app como um web app. Ele consiste em um servidor de desenvolvimento para o Flutter Web.

1. Verifique se você está na pasta do app do Flutter. Na janela do terminal do IDE, execute o seguinte:

   cd ~/chat_app

2. Para buscar as dependências do projeto do app, execute o seguinte:

   flutter pub get

3. Para gerar o projeto e iniciar o servidor da web, execute o seguinte:

   fwr

   Aguarde o servidor ser iniciado e disponibilizar o app do Flutter. Depois disso, a resposta ao comando será como a seguinte:

   

Tarefa 6. Testar o app do Flutter

É hora de testar a funcionalidade do app do Flutter.

Testar o app

1. Para acessar o app do Flutter, copie o URL do Servidor em tempo real do painel de credenciais do laboratório e abra-o em uma nova guia da janela de navegação anônima.

   Aguarde alguns segundos até que o app de chat seja carregado.

2. No campo de mensagem, na parte de baixo, digite:

   What is fallingwater? Escreva a resposta em texto simples.

   Depois de alguns segundos, a resposta do agente de back-end é exibida no app.

3. Para testar o app e o agente, no campo de mensagem, digite:

   Where can I buy the Chrome dino pin?

   Depois de alguns segundos, a resposta do agente de back-end é exibida no app.

   O app de chat chama o endpoint do Cloud Run /ask_gemini do app de back-end, que invoca o agente do LangChain que usa o Gemini para retornar uma resposta do repositório de dados do Agent Search.

4. Para que o app do Flutter fique alinhado no layout de um dispositivo móvel, redimensione a janela do navegador para aproximadamente o tamanho de um dispositivo móvel:

   

   Isso indica que o app do Flutter é responsivo a mudanças no tamanho da tela ou da janela. O Flutter tem pacotes e widgets que ajudam a tornar o app responsivo e adaptável a mudanças com base na configuração do dispositivo.

Para verificar o objetivo, clique em Verificar meu progresso. Desenvolver e testar o app de chat do Flutter.

Finalize o laboratório

Após concluir o laboratório, clique em Terminar o laboratório. O Google Skills remove os recursos usados e limpa a conta para você.

Você poderá classificar sua experiência neste laboratório. Basta selecionar o número de estrelas, digitar um comentário e clicar em Enviar.

O número de estrelas indica o seguinte:

• 1 estrela = muito insatisfeito
• 2 estrelas = insatisfeito
• 3 estrelas = neutro
• 4 estrelas = satisfeito
• 5 estrelas = muito satisfeito

Feche a caixa de diálogo se não quiser enviar feedback.

Para enviar seu feedback, fazer sugestões ou correções, use a guia Suporte.

Parabéns!

Neste laboratório, você:

• Criou um repositório de dados de pesquisa e um app de pesquisa usando AI Applications no console do Google Cloud.
• Implantou um agente do LangChain usando o Agent Platform Workbench.
• Criou um app Python integrado à Agent Search e ao agente do LangChain.
• Implantou o app no Cloud Run e usá-lo como back-end para um app do Flutter.
• Desenvolveu um app de chat do Flutter e o integrou ao serviço de back-end para interagir com o Gemini.

Próximas etapas/saiba mais

• Visão geral do Gemini para Google Cloud
• Agent Platform Workbench
• Gemini Enterprise Agent Platform Studio
• Flutter
• Dart

Copyright 2026 Google LLC. Todos os direitos reservados. Google e o logotipo do Google são marcas registradas da Google LLC. Todos os outros nomes de empresas e produtos podem ser marcas registradas das empresas a que estão associados.