Criar e implantar agentes do ADK (Agent Deployment Kit) com pouco código usando o ADK Visual Builder

1. Objetivo deste laboratório

Neste laboratório prático, você vai aprender a criar agentes usando o ADK (Kit de Desenvolvimento de Agente) Visual Builder. O ADK (Kit de Desenvolvimento de Agente) Visual Builder oferece uma maneira de pouco código para criar agentes do ADK (Kit de Desenvolvimento de Agente). Você vai aprender a testar o aplicativo localmente e implantar no Cloud Run.

O que você vai aprender

Entenda os conceitos básicos do ADK (Kit de Desenvolvimento de Agente) .
Entenda os conceitos básicos do ADK (Kit de Desenvolvimento de Agente) Visual Builder
Aprenda a criar agentes usando ferramentas de GUI.
Saiba como implantar e usar facilmente os agentes no Cloud Run.

Figura 1: com o ADK Visual Builder, é possível criar agentes usando a GUI com pouco código

2. Configuração do projeto

Se você ainda não tiver um projeto para usar, crie um novo no console do GCP. Selecione o projeto no seletor de projetos (canto superior esquerdo do console do Google Cloud) .

Figura 2: clicar na caixa ao lado do logotipo do Google Cloud permite selecionar seu projeto. Verifique se o projeto está selecionado.

Neste laboratório, vamos usar o editor do Cloud Shell para realizar nossas tarefas. Abra o Cloud Shell e defina o projeto usando o Cloud Shell.
Clique neste link para navegar diretamente até o editor do Cloud Shell.
Abra o terminal clicando em Terminal>Novo Terminal no menu. É possível executar todos os comandos deste tutorial nesse terminal.
Para verificar se o projeto já está autenticado, use o seguinte comando no terminal do Cloud Shell.

gcloud auth list

Execute o comando a seguir no Cloud Shell para confirmar seu projeto:

gcloud config list project

Copie o ID do projeto e use o seguinte comando para defini-lo:

gcloud config set project <YOUR_PROJECT_ID>

Se você não se lembrar do ID do projeto, liste todos os IDs com

gcloud projects list

3. Ativar APIs

Precisamos ativar alguns serviços de API para executar este laboratório. Execute o seguinte comando no Cloud Shell:

gcloud services enable aiplatform.googleapis.com
gcloud services enable cloudresourcemanager.googleapis.com

Apresentação das APIs

A API Vertex AI (aiplatform.googleapis.com) permite o acesso à plataforma Vertex AI , permitindo que seu aplicativo interaja com os modelos do Gemini para geração de texto, sessões de chat e chamadas de função.
A API Cloud Resource Manager (cloudresourcemanager.googleapis.com) permite gerenciar metadados de forma programática para seus projetos do Google Cloud, como ID e nome do projeto, que geralmente são exigidos por outras ferramentas e SDKs para verificar a identidade e as permissões do projeto.

4. Confirmar se os créditos foram aplicados

Na etapa de configuração do projeto, você solicitou os créditos sem custo financeiro que permitem usar os serviços no Google Cloud. Ao aplicar os créditos, uma nova conta de faturamento sem custo financeiro chamada "Conta de faturamento de teste do Google Cloud Platform" é criada. Para verificar se os créditos foram aplicados, siga estas etapas no Editor do Cloud Shell:

curl -s https://raw.githubusercontent.com/haren-bh/gcpbillingactivate/main/activate.py | python3

Se tudo der certo, você vai ver um resultado como este: se aparecer "Projeto vinculado com sucesso", sua conta de faturamento está configurada corretamente. Ao executar a etapa acima, você pode verificar se sua conta está vinculada. Se não estiver, ela será vinculada. Se você não tiver selecionado o projeto, será solicitado que você escolha um. Também é possível fazer isso seguindo as etapas de configuração do projeto.

Figura 3: confirmação da conta de faturamento vinculada

5. Introdução ao Kit de Desenvolvimento de Agente

O Kit de Desenvolvimento de Agente oferece várias vantagens importantes para desenvolvedores que criam aplicativos agênticos:

Sistemas multiagentes: crie aplicativos modulares e escalonáveis ao organizar vários agentes especializados em uma hierarquia. Coordene e delegue fluxos complexos.
Ecossistema de ferramentas avançado: atribua diversos recursos aos agentes ao usar ferramentas pré-criadas (pesquisa, execução de código etc.), crie funções personalizadas, integre ferramentas de frameworks de agentes de terceiros (LangChain, CrewAI) ou utilize outros agentes como ferramentas.
Orquestração flexível: defina fluxos de trabalho usando agentes de fluxo de trabalho (SequentialAgent, ParallelAgent e LoopAgent) para pipelines previsíveis ou aproveite o roteamento dinâmico orientado por LLM (transferência de LlmAgent) para um comportamento adaptativo.
Experiência integrada do desenvolvedor: desenvolva, teste e depure localmente com uma CLI avançada e uma interface de desenvolvimento interativa. Inspecione eventos, estado e a execução do agente etapa por etapa.
Avaliação integrada: avalie sistematicamente o desempenho do agente avaliando a qualidade da resposta final e a trajetória de execução detalhada de casos de teste predefinidos.
Pronto para implantação: transforme seus agentes em contêineres e implante em qualquer lugar. Execute localmente, escalone com o Vertex AI Agent Engine ou faça a integração a uma infraestrutura personalizada usando o Cloud Run ou o Docker.

Embora outros SDKs de IA generativa e frameworks de agentes permitam consultar modelos e até integrá-los a ferramentas, a coordenação dinâmica entre múltiplos modelos ainda demanda considerável esforço da sua parte.

O Kit de Desenvolvimento de Agente oferece um framework de alto nível em comparação com essas ferramentas, permitindo conectar e manter vários agentes em fluxos de trabalho complexos de forma fácil.

Figura 4: posicionamento do ADK (Kit de Desenvolvimento de Agente)

Nas versões recentes, uma ferramenta ADK Visual Builder foi adicionada ao ADK (Kit de Desenvolvimento de Agente), permitindo criar agentes ADK (Kit de Desenvolvimento de Agente) com pouco código. Neste laboratório, vamos conhecer a ferramenta ADK Visual Builder em detalhes.

6. Instalar o ADK e configurar o ambiente

Primeiro, precisamos definir o ambiente para executar o ADK (Kit de Desenvolvimento de Agente). Neste laboratório, vamos executar o ADK (Kit de Desenvolvimento de Agentes) e realizar todas as tarefas no Editor do Cloud Shell do Google Cloud .

Preparar um editor do Cloud Shell

Clique neste link para navegar diretamente até o editor do Cloud Shell.
Clique em Continuar.
Se for preciso autorizar o Cloud Shell, clique em Autorizar.
Durante o restante deste laboratório, você pode trabalhar nesta janela como seu ambiente de desenvolvimento integrado (IDE) com o editor do Cloud Shell e o terminal do Cloud Shell.
Abra um novo terminal usando Terminal>Novo terminal no editor do Cloud Shell. Todos os comandos abaixo serão executados nesse terminal.

Iniciar o editor visual do ADK

Execute os comandos a seguir para clonar a origem necessária do GitHub e instalar as bibliotecas necessárias. Execute os comandos no terminal aberto no Editor do Cloud Shell.

#create the project directory
mkdir ~/adkui
cd ~/adkui

Vamos usar o uv para criar o ambiente Python. Execute no terminal do Editor do Cloud Shell:

#Install uv if you do not have installed yet
pip install uv

#go to the project directory
cd ~/adkui

#Create the virtual environment
uv venv


#use the newly created environment
source .venv/bin/activate

#install libraries
uv pip install google-adk==1.22.1
uv pip install python-dotenv

Observação: se precisar reiniciar o terminal, defina o ambiente Python executando "source .venv/bin/activate".

No editor, acesse "View" -> "Toggle hidden files". Na pasta adkui, crie um arquivo .env com o seguinte conteúdo.

#go to adkui folder
cd ~/adkui

cat <<EOF>> .env
GOOGLE_GENAI_USE_VERTEXAI=1
GOOGLE_CLOUD_PROJECT=$(gcloud config get-value project)
GOOGLE_CLOUD_LOCATION=us-central1
IMAGEN_MODEL="imagen-3.0-generate-002"
GENAI_MODEL="gemini-2.5-flash"
EOF

7. Criar um agente simples com o ADK Visual Builder

Nesta seção, vamos criar um agente simples usando o ADK Visual Builder, uma ferramenta baseada na Web que oferece um ambiente de design de fluxo de trabalho visual para criar e gerenciar agentes do ADK (Kit de Desenvolvimento de Agente). Ele permite projetar, criar e testar seus agentes em uma interface gráfica fácil de usar para iniciantes e inclui um assistente com tecnologia de IA para ajudar na criação.

Figura 5: criador visual do ADK

Volte ao diretório principal adkui no terminal e execute o comando a seguir para executar o agente localmente (execute no terminal do Editor do Cloud Shell). Você poderá iniciar o servidor do ADK e ver resultados semelhantes à Figura 6 no terminal.

#go to the directory adkui
cd ~/adkui
# Run the following command to run ADK locally
adk web

Figura 6: inicialização do aplicativo ADK

Ctrl + clique (CMD + clique para macOS) no URL http:// exibido no terminal para abrir a ferramenta de GUI baseada em navegador ADK (Agent Development Kit).

Figura 7: interface da Web do ADK. O ADK tem os seguintes componentes: 1: alternar entre o modo claro e escuro; 2: fechar painel; 3: criar agente; 4: editar e agente.

Para criar um novo agente, pressione o botão "+".

Figura 8: caixa de diálogo para criar um novo app

Dê o nome "Agent1" e clique em "Criar".

Figura 9: interface do criador de agentes

O painel é organizado em três seções principais: o lado esquerdo abriga os controles para a criação de agentes baseada em GUI, o centro fornece uma visualização do seu progresso e o lado direito contém o Google Assistente para criar agentes usando linguagem natural.
Seu agente foi criado. Clique no botão Salvar para continuar. Observação: para evitar a perda das mudanças, é essencial clicar em "Salvar".
O agente agora está pronto para ser testado. Para começar, digite um comando na caixa de chat, como:

Hi, what can you do?

Figura 10: teste do agente.

7.Voltando ao editor, vamos examinar os arquivos recém-gerados. O explorador fica no lado esquerdo. Navegue até a pasta "adkgui" e abra para mostrar o diretório "Agent 1". Na pasta, você pode verificar o arquivo YAML que define o agente, conforme ilustrado na figura abaixo.

Figura 11: definição do agente usando um arquivo YAML

Agora vamos voltar ao editor de GUI e adicionar alguns recursos ao agente. Para isso, pressione o botão de edição (consulte a Figura 7, componente número 4, ícone de caneta).
Vamos adicionar um recurso de Pesquisa Google ao agente. Para isso, precisamos adicionar a Pesquisa Google como uma ferramenta disponível para o agente e que ele pode usar. Para isso, clique no sinal + ao lado da seção Ferramentas na parte de baixo à esquerda da tela e clique em Ferramenta integrada no menu (consulte a Figura 12).

Figura 12: como adicionar uma nova ferramenta a um agente

Na lista de Ferramentas integradas, selecione google_search e clique em Criar (consulte a Figura 12). Isso vai adicionar a Pesquisa Google como uma ferramenta no seu agente.
Clique no botão Salvar para armazenar as mudanças.

Figura 13: lista das ferramentas disponíveis na interface do criador visual do ADK

Agora você já pode testar o agente. Primeiro, reinicie o servidor do ADK. Acesse o terminal em que você iniciou o servidor do ADK (Agent Development Kit) e pressione CTRL+C para desligar o servidor se ele ainda estiver em execução. Execute o seguinte para iniciar o servidor novamente.

#make sure you are in the right folder.
cd ~/adkui

#start the server
adk web

Ctrl+clique no URL (por exemplo, http://localhost:8000) na tela. A GUI do ADK (Kit de Desenvolvimento de Agente) vai aparecer na guia do navegador.
Selecione Agent1 na lista de agentes. Agora seu agente pode fazer pesquisas no Google. Teste na caixa de chat com o seguinte comando.

What is the weather today in Yokohama?

A resposta da Pesquisa Google vai aparecer assim:

Figura 14: Pesquisa Google com o agente

Agora, vamos voltar ao editor e verificar o código criado nesta etapa. No painel lateral Explorer do Editor, clique em root_agent.yaml para abrir. Confirme se google_search foi adicionada como ferramenta (Figura 15).

Figura 15: confirmação de que google_search foi adicionado como uma ferramenta em Agent1

8. Implantar o agente no Cloud Run

Agora vamos implantar o agente criado no Cloud Run. Com o Cloud Run, é possível criar apps ou sites rapidamente em uma plataforma totalmente gerenciada.

É possível executar serviços de back-end e front-end, jobs em lote, LLMs de host e cargas de trabalho de processamento em fila sem precisar gerenciar a infraestrutura.

No terminal do Editor do Cloud Shell, se você ainda estiver executando o servidor do ADK (Agent Development Kit), pressione Ctrl+C para interromper.

Acesse o diretório raiz do projeto.

cd ~/adkui

Receba o código de implantação. Depois de executar o comando, o arquivo deploycloudrun.py vai aparecer no painel do Explorador do editor do Cloud Shell.

curl -LO https://raw.githubusercontent.com/haren-bh/codelabs/main/adk_visual_builder/deploycloudrun.py

Confira as opções de implantação em deploycloudrun.py. Vamos usar o comando adk deploy para implantar o agente no Cloud Run. O ADK (Kit de Desenvolvimento de Agente) tem a opção integrada de implantar o agente no Cloud Run. Precisamos especificar os parâmetros, como ID do projeto do Google Cloud, região etc. Para o caminho do app, este script pressupõe que agent_path=./Agent1. Também vamos criar uma conta de serviço com as permissões necessárias e anexá-la ao Cloud Run. O Cloud Run precisa de acesso a serviços como a Vertex AI e o Cloud Storage para executar o agente.

   command = [
        "adk", "deploy", "cloud_run",
        f"--project={project_id}",
        f"--region={location}",
        f"--service_name={service_name}",
        f"--app_name={app_name}",
        f"--artifact_service_uri=memory://",
        f"--with_ui",
        agent_path,
        f"--",
        f"--service-account={sa_email}",
    ]

Execute o script deploycloudrun.py. A implantação vai começar como mostrado na figura abaixo.**

python3 deploycloudrun.py

Se você receber a mensagem de confirmação abaixo, pressione Y e Enter para todas as mensagens. O depoycloudrun.py presume que seu agente está na pasta Agent1, como criado acima.

Figura 16:implantação do agente no Cloud Run. Pressione "Y" para qualquer mensagem de confirmação.

Quando a implantação for concluída, você verá o URL do serviço, como https://agent1service-78833623456.us-central1.run.app
Acesse o URL no navegador da Web para iniciar o app.

        Figure 17: Agent running in Cloud Run

9. Criar um agente com subagente e ferramenta personalizada

Na seção anterior, você criou um único agente com uma ferramenta de pesquisa do Google integrada. Nesta seção, você vai criar um sistema multiagente em que os agentes podem usar as ferramentas personalizadas.

Primeiro, reinicie o servidor do ADK (Kit de Desenvolvimento de Agente). Acesse o terminal em que você iniciou o servidor do ADK (Agent Development Kit) e pressione CTRL+C para desligar o servidor se ele ainda estiver em execução. Execute o seguinte para iniciar o servidor novamente.

#make sure you are in the right folder.
cd ~/adkui

#start the server
adk web

Ctrl+clique no URL (por exemplo, http://localhost:8000) na tela. A GUI do ADK (Kit de Desenvolvimento de Agente) vai aparecer na guia do navegador.
Clique no botão "+" para criar um novo agente. Na caixa de diálogo do agente, insira "Agent2" (Figura 18) e clique em "Create".

Figura 18: criação de um novo app de agente.

Na seção de instruções do Agent2, insira o seguinte:

You are an agent that takes image creation instruction from the user and passes it to your sub agent

Agora vamos adicionar um subagente ao agente raiz. Para isso, clique no botão "+" à esquerda do menu "Subagente" na parte de baixo do painel esquerdo (Figura 19) e clique em Agente de LLM. Isso vai criar um novo agente como um subagente do agente raiz.

Figura 19: adicione um novo subagente.

Nas instruções para sub_agent_1, digite o seguinte texto.

You are an Agent that can take instructions about an image and create an image using the create_image tool.

Agora vamos adicionar uma ferramenta personalizada a esse subagente. Essa ferramenta vai chamar o modelo do Imagen para gerar uma imagem usando as instruções do usuário. Para fazer isso, primeiro clique no subagente criado na etapa anterior e clique no botão "+" ao lado do menu "Ferramentas". Na lista de opções de ferramentas, clique em Ferramenta de função. Essa ferramenta permite adicionar nosso próprio código personalizado.

Figura 20: clique na ferramenta "Função" para criar uma nova ferramenta. 8. Nomeie a ferramenta Agent2.image_creation_tool.create_image na caixa de diálogo.

Figura 21: adicionar nome da ferramenta

Clique no botão Salvar para salvar as mudanças.
No terminal do Cloud Shell Editor, pressione Ctrl+S para desligar o servidor adk.
No terminal, insira o comando a seguir para criar o arquivo image_creation_tool.py.

touch ~/adkui/Agent2/image_creation_tool.py

Clique no arquivo image_creation_tool.py recém-criado no painel "Explorer" do editor do Cloud Shell para abri-lo. Substitua o conteúdo de image_creation_tool.py pelo seguinte e salve (Ctrl+S).

import os
import io
import vertexai
from vertexai.preview.vision_models import ImageGenerationModel
from dotenv import load_dotenv
import uuid
from typing import Union
from datetime import datetime
from google import genai
from google.genai import types
from google.adk.tools import ToolContext
import logging

# Configure logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)

async def create_image(prompt: str,tool_context: ToolContext) -> Union[bytes, str]:
  """
  Generates an image based on a text prompt using a Vertex AI Imagen model.
  Args:
      prompt: The text prompt to generate the image from.

  Returns:
      The binary image data (PNG format) on success, or an error message string on failure.
  """
  print(f"Attempting to generate image for prompt: '{prompt}'")

  try:
      # Load environment variables from .env file two levels up
      dotenv_path = os.path.join(os.path.dirname(__file__), '..', '..', '.env')
      load_dotenv(dotenv_path=dotenv_path)
      project_id = os.getenv("GOOGLE_CLOUD_PROJECT")
      location = os.getenv("GOOGLE_CLOUD_LOCATION")
      model_name = os.getenv("IMAGEN_MODEL")
      client = genai.Client(
          vertexai=True,
          project=project_id,
          location=location,
      )
      response = client.models.generate_images(
          model="imagen-3.0-generate-002",
          prompt=prompt,
          config=types.GenerateImagesConfig(
              number_of_images=1,
              aspect_ratio="9:16",
              safety_filter_level="block_low_and_above",
              person_generation="allow_adult",
          ),
      )
      if not all([project_id, location, model_name]):
          return "Error: Missing GOOGLE_CLOUD_PROJECT, GOOGLE_CLOUD_LOCATION, or IMAGEN_MODEL in .env file."
      vertexai.init(project=project_id, location=location)
      model = ImageGenerationModel.from_pretrained(model_name)
      images = model.generate_images(
          prompt=prompt,
          number_of_images=1
      )
      if response.generated_images is  None:
          return "Error: No image was generated."
      for generated_image in response.generated_images:
          # Get the image bytes
          image_bytes = generated_image.image.image_bytes
          counter = str(tool_context.state.get("loop_iteration", 0))
          artifact_name = f"generated_image_" + counter + ".png"
          # Save as ADK artifact (optional, if still needed by other ADK components)
          report_artifact = types.Part.from_bytes(
              data=image_bytes, mime_type="image/png"
          )
          await tool_context.save_artifact(artifact_name, report_artifact)
          logger.info(f"Image also saved as ADK artifact: {artifact_name}")
          return {
              "status": "success",
              "message": f"Image generated .  ADK artifact: {artifact_name}.",
              "artifact_name": artifact_name,
          }
  except Exception as e:
      error_message = f"An error occurred during image generation: {e}"
      print(error_message)
      return error_message

Primeiro, reinicie o servidor do ADK (Kit de Desenvolvimento de Agente). Acesse o terminal em que você iniciou o servidor do ADK (Agent Development Kit) e pressione CTRL+C para desligar o servidor se ele ainda estiver em execução. Execute o seguinte para iniciar o servidor novamente.

#make sure you are in the right folder.
cd ~/adkui

#start the server
adk web

Ctrl+clique no URL (por exemplo, http://localhost:8000) na tela. A GUI do ADK (Kit de Desenvolvimento de Agente) vai aparecer na guia do navegador.

Na guia da interface ADK (Agent Development Kit), selecione Agent2 na lista de agentes e pressione o botão de edição (ícone de lápis). No Editor visual do ADK (Agent Development Kit), clique no botão "Salvar" para manter as mudanças.
Agora podemos testar o novo agente.
Na interface de chat da UI do ADK (Kit de Desenvolvimento de Agente), insira o seguinte comando. Você também pode testar outros comandos. Você vai ver os resultados mostrados na Figura 22.

Create an image of a cat

Figura 22: interface de chat da interface do ADK

10. Criar um agente de fluxo de trabalho

Enquanto a etapa anterior envolvia a criação de um agente com um subagente e ferramentas especializadas de criação de imagens, esta fase se concentra em refinar as capacidades do agente. Vamos melhorar o processo otimizando o comando inicial do usuário antes da geração de imagens. Para isso, um agente sequencial será integrado ao agente raiz para processar o seguinte fluxo de trabalho de duas etapas:

Receba o comando do agente raiz e faça o refinamento.
Encaminhe o comando refinado para o agente criador de imagens para produzir a imagem final usando o IMAGEN.
Primeiro, reinicie o servidor do ADK (Kit de Desenvolvimento de Agente). Acesse o terminal em que você iniciou o servidor do ADK (Agent Development Kit) e pressione CTRL+C para desligar o servidor se ele ainda estiver em execução. Execute o seguinte para iniciar o servidor novamente.

#make sure you are in the right folder.
cd ~/adkui

#start the server
adk web

Ctrl+clique no URL (por exemplo, http://localhost:8000) na tela. A GUI do ADK (Kit de Desenvolvimento de Agente) vai aparecer na guia do navegador.
Selecione Agent2 no seletor de agentes e clique no botão Editar (ícone de lápis).
Clique em Agente2 (agente raiz) e no botão "+" ao lado do menu "Subagentes". Na lista de opções, clique em Agente sequencial.
Você vai ver a estrutura do agente, como a mostrada na Figura 23.

Figura 23: estrutura de agente sequencial

Agora vamos adicionar o primeiro agente ao Agente sequencial, que vai atuar como um aprimorador de comandos. Para fazer isso, clique no botão "Adicionar subagente" dentro da caixa "SequentialAgent" e clique em "Agente de LLM".
Precisamos adicionar outro agente à sequência. Repita a etapa 6 para adicionar outro agente de LLM (pressione o botão + e selecione LLMAgent).
Clique em sub_agent_4 e adicione uma nova ferramenta clicando no ícone"+" ao lado de Ferramentas no painel à esquerda. Clique em Ferramenta de função nas opções. Na caixa de diálogo, nomeie a ferramenta como Agent2.image_creation_tool.create_image e pressione Criar.
Agora podemos excluir sub_agent_1, já que ele foi substituído pelo sub_agent_2, que é mais avançado. Para fazer isso, clique no botão Excluir no lado direito de sub_agent_1 no diagrama.

Figura 24: excluir sub_agent_1 10. A estrutura do agente é semelhante à da Figura 25.

Figura 25: estrutura final do agente aprimorado

Clique em sub_agent_3 e insira o seguinte nas instruções.

     Act as a professional AI Image Prompt Engineer. I will provide you 
    with a basic idea for an image. Your job is to expand my idea into 
    a detailed, high-quality prompt for models like Imagen. 
    
    For every input, output the following structure:
    1. **Optimized Prompt**: A vivid, descriptive paragraph including 
    subject, background, lighting, and textures.
    2. **Style & Medium**: Specify if it is photorealistic, digital art, 
    oil painting, etc.
    3. **Camera & Lighting**: Define the lens (e.g., 85mm), angle, 
    and light quality (e.g., volumetric, golden hour).
    
    Guidelines: Use sensory language, avoid buzzwords like 'photorealistic' 
    unless necessary, and focus on specific artistic descriptors.
    Once the prompt is created send the prompt to the

Clique em sub_agent_4. Mude a instrução para o seguinte.

You are an agent that takes instructions about an image and can generate the image using the create_image tool.

Clique no botão "Salvar".
Acesse o painel do Explorer do editor do Cloud Shell e abra os arquivos YAML do agente. Os arquivos do agente devem ser parecidos com o exemplo abaixo

root_agent.yaml

name: Agent2
model: gemini-2.5-flash
agent_class: LlmAgent
instruction: You are an agent that takes image creation instruction from the
  user and passes it to your sub agent
sub_agents:
  - config_path: ./sub_agent_2.yaml
tools: []

sub_agent_2.yaml

name: sub_agent_2
agent_class: SequentialAgent
sub_agents:
  - config_path: ./sub_agent_3.yaml
  - config_path: ./sub_agent_4.yaml

sub_agent_3.yaml

name: sub_agent_3
model: gemini-2.5-flash
agent_class: LlmAgent
instruction: |
  Act as a professional AI Image Prompt Engineer. I will provide you  with a
  basic idea for an image. Your job is to expand my idea into  a detailed,
  high-quality prompt for models like Imagen. 

  For every input, output the following structure: 1. **Optimized Prompt**: A
  vivid, descriptive paragraph including  subject, background, lighting, and
  textures. 2. **Style & Medium**: Specify if it is photorealistic, digital
  art,  oil painting, etc. 3. **Camera & Lighting**: Define the lens (e.g.,
  85mm), angle,  and light quality (e.g., volumetric, golden hour).

  Guidelines: Use sensory language, avoid buzzwords like
  'photorealistic'  unless necessary, and focus on specific artistic
  descriptors. Once the prompt is created send the prompt to the 
sub_agents: []
tools: []

sub_agent_4.yaml

name: sub_agent_4
model: gemini-2.5-flash
agent_class: LlmAgent
instruction: You are an agent that takes instructions about an image and
  generate the image using the create_image tool.
sub_agents: []
tools:
  - name: Agent2.image_creation_tool.create_image

Agora vamos testar.
Primeiro, reinicie o servidor do ADK (Kit de Desenvolvimento de Agente). Acesse o terminal em que você iniciou o servidor do ADK (Agent Development Kit) e pressione CTRL+C para desligar o servidor se ele ainda estiver em execução. Execute o seguinte para iniciar o servidor novamente.

#make sure you are in the right folder.
cd ~/adkui

#start the server
adk web

Ctrl+clique no URL (por exemplo, http://localhost:8000) na tela. A GUI do ADK (Kit de Desenvolvimento de Agente) vai aparecer na guia do navegador.
Selecione "Agent2" na lista de agentes. e insira o seguinte comando.

Create an image of a Cat

Enquanto o agente está trabalhando, você pode consultar o terminal no Editor do Cloud Shell para saber o que está acontecendo em segundo plano. O resultado final será semelhante à Figura 26.

Figura 26: testar o agente

11. Criar um agente com o assistente do Agent Builder

O Assistente do Agent Builder faz parte do ADK Visual Builder, que permite a criação interativa de agentes usando comandos em uma interface de chat simples, com diferentes níveis de complexidade. Ao usar o ADK Visual Builder, você recebe feedback visual imediato sobre os agentes que desenvolve. Neste laboratório, vamos criar um agente capaz de gerar uma revista em quadrinhos em HTML com base na solicitação de um usuário. Os usuários podem dar um comando simples, como "Crie uma história em quadrinhos sobre João e Maria", ou inserir uma história inteira. Em seguida, o agente vai analisar a narrativa, segmentá-la em vários painéis e usar o Nanobanana para produzir os recursos visuais da história em quadrinhos, empacotando o resultado em um formato HTML.

Figura 27: interface do assistente do Agent Builder

Vamos começar!

Primeiro, reinicie o servidor do ADK (Kit de Desenvolvimento de Agente). Acesse o terminal em que você iniciou o servidor do ADK (Agent Development Kit) e pressione CTRL+C para desligar o servidor se ele ainda estiver em execução. Execute o seguinte para iniciar o servidor novamente.

#make sure you are in the right folder.
cd ~/adkui

#start the server
adk web

Ctrl+clique no URL (por exemplo, http://localhost:8000) na tela. A GUI do ADK (Kit de Desenvolvimento de Agente) vai aparecer na guia do navegador.
Na GUI do ADK (Agent Development Kit), clique no botão "+" para criar um novo agente.
Na caixa de diálogo, insira "Agent3" e clique no botão Criar.

Figura 28: criar o novo agente Agent3

No painel do Assistente à direita, digite o seguinte comando. O comando abaixo tem todas as instruções necessárias para criar um sistema de agentes que crie um agente baseado em HTML.

System Goal: You are the Studio Director (Root Agent). Your objective is to manage a linear pipeline of four ADK Sequential Agents to transform a user's seed idea into a fully rendered, responsive HTML5 comic book. 

0. Root Agent: The Studio Director
Role: Orchestrator and State Manager.

Logic: Receives the user's initial request. It initializes the workflow and ensures the output of each Sub-Agent is passed as the context for the next. It monitors the sequence to ensure no steps are skipped. Make sure the query explicitly mentions "Create me a comic of ..." if it's just a general question or prompt just answer the question.

1. Sub-Agent: The Scripting Agent (Sequential Step 1)
Role: Narrative & Character Architect.

Input: Seed idea from Root Agent.

Logic: 1. Create a Character Manifest: Define 3 specific, unchangeable visual identifiers 
          for every character (e.g., "Gretel: Blue neon hair ribbons, silver apron, 
          glowing boots"). 
       2. Expand the seed idea into a coherent narrative arc.

Output: A narrative script and a mandatory character visual guide.

2. Sub-Agent: The Panelization Agent (Sequential Step 2)
Role: Cinematographer & Storyboarder.

Input: Script and Character Manifest from Step 1.

Logic: 
     1. Divide the script into exactly X panels (User-defined or default to 8). 
     2. For each panel, define a specific composition (e.g., "Panel 1: 
        Wide shot of the gingerbread house").


Output: A structured list of exactly X panel descriptions.

3. Sub-Agent: The Image Synthesis Agent (Sequential Step 3)
Role: Technical Artist & Asset Generator.

Input: The structured list of panel descriptions from Step 2.

Logic: 
     1. Iterative Generation: You must execute the "generate_image" tool in 
     "image_generation.py" file 
     (Nano Banana) individually for each panel defined in Step 2. 
     2. Prompt Engineering: For every panel, translate the description into a 
     Nano Banana prompt, strictly enforcing the character identifiers 
     (e.g., the "blue neon ribbons") and the global style: "vibrant comic book style, 
     heavy ink lines, cel-shaded, 4k." . Make sure that the necessary speech bubbles
     are present in the image representing the dialogue.
     3. Mapping: Associate each generated image URL with its corresponding panel 
     number and dialogue.

Output: A complete gallery of X images mapped to their respective panel data.

4. Sub-Agent: The Assembly Agent (Sequential Step 4)
Role: Frontend Developer.

Input: The mapped images and panel text from Step 3.

Logic: 
     1. Write a clean, responsive HTML5/CSS3 file that shows the comic. The comic should be
        Scrollable with image on the top and the description below the image.   
     2. Use "write_comic_html" tool in file_writer.py to write the created html file in 
        the "output" folder.      
     4. In the "write_comic_html" tool add logic to copy the images folder to the 
        output folder so that the images in the html file are actually visible when 
        the user opens the html file.

Output: A final, production-ready HTML code block.

O agente pode pedir que você insira o modelo a ser usado. Nesse caso, digite gemini-2.5-pro na opção fornecida.

Figura 29: insira gemini-2.5-pro se for solicitado que você insira o modelo a ser usado

O Assistente pode vir com o plano e pedir que você confirme se está tudo bem para continuar. Confira o plano, digite "OK" e pressione "Enter".

Figura 30: digite OK se o plano estiver bom 8. Depois que o Assistente terminar de trabalhar, você poderá ver a estrutura do agente, como mostrado na Figura 31.

Figura 31: agente criado pelo Assistente do Agent Builder 9. Dentro de image_synthesis_agent (seu nome pode ser diferente), clique na ferramenta "Agent3.tools.image_generation.gene...". Se a última seção do nome da ferramenta não for image_generation.generate_image change, mude para image_generation.generate_image. Se o nome já estiver definido, não será necessário mudá-lo. Pressione o botão Salvar.

Figura 32: mude o nome da ferramenta para image_generation.generate_image e pressione "Salvar".

Dentro de assembly_agent (o nome do seu agente pode ser diferente), clique na ferramenta **Agent3.tools.file_writer.write_comic_...**. Se a última seção do nome da ferramenta não for **file_writer.write_comic_html**, mude para **file_writer.write_comic_html**.

Figura 33: mude o nome da ferramenta para file_writer.write_comic_html 11. Clique no botão Salvar na parte de baixo à esquerda do painel esquerdo para salvar o agente recém-criado. 12. No painel do Explorador do Editor do Cloud Shell, expanda a pasta Agent3. Dentro da pasta Agent3/, deve haver uma pasta tools. Clique em Agent3/tools/file_writer.py para abrir e substitua o conteúdo de Agent3/tools/file_writer.py pelo código a seguir. Pressione Ctrl+S para salvar. Observação: embora o assistente do agente já tenha criado o código correto, neste laboratório vamos usar o código testado.

import os
import shutil

def write_comic_html(html_content: str, image_directory: str = "images") -> str:
   """
   Writes the final HTML content to a file and copies the image assets.

   Args:
       html_content: A string containing the full HTML of the comic.
       image_directory: The source directory where generated images are stored.

   Returns:
       A confirmation message indicating success or failure.
   """
   output_dir = "output"
   images_output_dir = os.path.join(output_dir, image_directory)

   try:
       # Create the main output directory
       if not os.path.exists(output_dir):
           os.makedirs(output_dir)

       # Copy the entire image directory to the output folder
       if os.path.exists(image_directory):
           if os.path.exists(images_output_dir):
               shutil.rmtree(images_output_dir)  # Remove old images
           shutil.copytree(image_directory, images_output_dir)
       else:
           return f"Error: Image directory '{image_directory}' not found."

       # Write the HTML file
       html_file_path = os.path.join(output_dir, "comic.html")
       with open(html_file_path, "w") as f:
           f.write(html_content)

       return f"Successfully created comic at '{html_file_path}'"

   except Exception as e:
       return f"An error occurred: {e}"

No painel do explorador do Editor do Cloud Shell, expanda a pasta Agent3. Dentro da pasta **Agent3/**, deve haver uma pasta tools. Clique em Agent3/tools/image_generation.py para abrir e substitua o conteúdo de Agent3/tools/image_generation.py pelo código a seguir. Pressione Ctrl+S para salvar. Observação: embora o assistente do agente já tenha criado o código correto, neste laboratório vamos usar o código testado.

import time
import os
import io
import vertexai
from vertexai.preview.vision_models import ImageGenerationModel
from dotenv import load_dotenv
import uuid
from typing import Union
from datetime import datetime
from google import genai
from google.genai import types
from google.adk.tools import ToolContext

import logging
import asyncio

# Configure logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)

# It's better to initialize the client once and reuse it.
# IMPORTANT: Your Google Cloud Project ID must be set as an environment variable
# for the client to authenticate correctly.


def edit_image(client, prompt: str, previous_image: str, model_id: str) -> Union[bytes, None]:
   """
   Calls the model to edit an image based on a prompt.

   Args:
       prompt: The text prompt for image editing.
       previous_image: The path to the image to be edited.
       model_id: The model to use for the edit.

   Returns:
       The raw image data as bytes, or None if an error occurred.
   """

   try:
       with open(previous_image, "rb") as f:
           image_bytes = f.read()

       response = client.models.generate_content(
           model=model_id,
           contents=[
               types.Part.from_bytes(
                   data=image_bytes,
                   mime_type="image/png",  # Assuming PNG, adjust if necessary
               ),
               prompt,
           ],
           config=types.GenerateContentConfig(
               response_modalities=['IMAGE'],
           )
       )

       # Extract image data
       for part in response.candidates[0].content.parts:
           if part.inline_data:
               return part.inline_data.data

       logger.warning("Warning: No image data was generated for the edit.")
       return None

   except FileNotFoundError:
       logger.error(f"Error: The file {previous_image} was not found.")
       return None
   except Exception as e:
       logger.error(f"An error occurred during image editing: {e}")
       return None

async def generate_image(tool_context: ToolContext, prompt: str, image_name: str, previous_image: str = None) -> dict:
   """
   Generates or edits an image and saves it to the 'images/' directory.

   If 'previous_image' is provided, it edits that image. Otherwise, it generates a new one.

   Args:
       prompt: The text prompt for the operation.
       image_name: The desired name for the output image file (without extension).
       previous_image: Optional path to an image to be edited.

   Returns:
       A confirmation message with the path to the saved image or an error message.
   """
   load_dotenv()
   project_id = os.environ.get("GOOGLE_CLOUD_PROJECT")
   if not project_id:
       return "Error: GOOGLE_CLOUD_PROJECT environment variable is not set."
  
   try:
       client = genai.Client(vertexai=True, project=project_id, location="global")
   except Exception as e:
       return f"Error: Failed to initialize genai.Client: {e}"

   image_data = None
   model_id = "gemini-3-pro-image-preview"

   try:
       if previous_image:
           logger.info(f"Editing image: {previous_image}")
           image_data = edit_image(
               client=client,
               prompt=prompt,
               previous_image=previous_image,
               model_id=model_id
           )
       else:
           logger.info("Generating new image")
           # Generate the image
           response = client.models.generate_content(
               model=model_id,
               contents=prompt,
               config=types.GenerateContentConfig(
                   response_modalities=['IMAGE'],
                   image_config=types.ImageConfig(aspect_ratio="16:9"),
               ),
           )

           # Check for errors
           if response.candidates[0].finish_reason != types.FinishReason.STOP:
               return f"Error: Image generation failed. Reason: {response.candidates[0].finish_reason}"

           # Extract image data
           for part in response.candidates[0].content.parts:
               if part.inline_data:
                   image_data = part.inline_data.data
                   break

       if not image_data:
           return {"status": "error", "message": "No image data was generated.", "artifact_name": None}

       # Create the images directory if it doesn't exist
       output_dir = "images"
       os.makedirs(output_dir, exist_ok=True)

       # Save the image to file system
       file_path = os.path.join(output_dir, f"{image_name}.png")
       with open(file_path, "wb") as f:
           f.write(image_data)

       # Save as ADK artifact
       counter = str(tool_context.state.get("loop_iteration", 0))
       artifact_name = f"{image_name}_" + counter + ".png"
       report_artifact = types.Part.from_bytes(data=image_data, mime_type="image/png")
       await tool_context.save_artifact(artifact_name, report_artifact)
       logger.info(f"Image also saved as ADK artifact: {artifact_name}")

       return {
           "status": "success",
           "message": f"Image generated and saved to {file_path}. ADK artifact: {artifact_name}.",
           "artifact_name": artifact_name,
       }

   except Exception as e:
       return f"An error occurred: {e}"

Os arquivos YAML finais produzidos no ambiente do autor são fornecidos abaixo para sua referência. Observe que os arquivos no seu ambiente podem ser um pouco diferentes. Verifique se a estrutura YAML do agente corresponde ao layout mostrado no ADK Visual Builder.

root_agent.yamlname: studio_director
model: gemini-2.5-pro
agent_class: LlmAgent
description: The Studio Director who manages the comic creation pipeline.
instruction: >
 You are the Studio Director. Your objective is to manage a linear pipeline of
 four sequential agents to transform a user's seed idea into a fully rendered,
 responsive HTML5 comic book.


 Your role is to be the primary orchestrator and state manager. You will
 receive the user's initial request.


 **Workflow:**

 1.  If the user's prompt starts with "Create me a comic of ...", you must
 delegate the task to your sub-agent to begin the comic creation pipeline.

 2.  If the user asks a general question or provides a prompt that does not
 explicitly ask to create a comic, you must answer the question directly
 without triggering the comic creation pipeline.

 3.  Monitor the sequence to ensure no steps are skipped. Ensure the output of
 each Sub-Agent is passed as the context for the next.
sub_agents:
 - config_path: ./comic_pipeline.yaml
tools: []

comic_pipline.yaml
name: comic_pipeline
agent_class: SequentialAgent
description: A sequential pipeline of agents to create a comic book.
sub_agents:
 - config_path: ./scripting_agent.yaml
 - config_path: ./panelization_agent.yaml
 - config_path: ./image_synthesis_agent.yaml
 - config_path: ./assembly_agent.yaml

scripting_agent.yamlname: scripting_agent
model: gemini-2.5-pro
agent_class: LlmAgent
description: Narrative & Character Architect.
instruction: >
 You are the Scripting Agent, a Narrative & Character Architect.

 Your input is a seed idea for a comic.


 **Your Logic:**

 1.  **Create a Character Manifest:** You must define exactly 3 specific,
 unchangeable visual identifiers for every character. For example: "Gretel:
 Blue neon hair ribbons, silver apron, glowing boots". This is mandatory.

 2.  **Expand the Narrative:** Expand the seed idea into a coherent narrative
 arc with dialogue.


 **Output:**

 You must output a JSON object containing:

 - "narrative_script": A detailed script with scenes and dialogue.

 - "character_manifest": The mandatory character visual guide.
sub_agents: []
tools: []

panelization_agent.yamlname: panelization_agent
model: gemini-2.5-pro
agent_class: LlmAgent
description: Cinematographer & Storyboarder.
instruction: >
 You are the Panelization Agent, a Cinematographer & Storyboarder.

 Your input is a narrative script and a character manifest.


 **Your Logic:**

 1.  **Divide the Script:** Divide the script into a specific number of panels.
 The user may define this number, or you should default to 8 panels.

 2.  **Define Composition:** For each panel, you must define a specific
 composition, camera shot (e.g., "Wide shot", "Close-up"), and the dialogue for
 that panel.


 **Output:**

 You must output a JSON object containing a structured list of exactly X panel
 descriptions, where X is the number of panels. Each item in the list should
 have "panel_number", "composition_description", and "dialogue".
sub_agents: []
tools: []

image_synthesis_agent.yaml
name: image_synthesis_agent
model: gemini-2.5-pro
agent_class: LlmAgent
description: Technical Artist & Asset Generator.
instruction: >
 You are the Image Synthesis Agent, a Technical Artist & Asset Generator.

 Your input is a structured list of panel descriptions.


 **Your Logic:**

 1.  **Iterate and Generate:** You must iterate through each panel description
 provided in the input. For each panel, you will execute the `generate_image`
 tool.

 2.  **Construct Prompts:** For each panel, you will construct a detailed
 prompt for the image generation tool. This prompt must strictly enforce the
 character visual identifiers from the manifest and include the global style:
 "vibrant comic book style, heavy ink lines, cel-shaded, 4k". The prompt must
 also describe the composition and include a request for speech bubbles to
 contain the dialogue.

 3.  **Map Output:** You must associate each generated image URL with its
 corresponding panel number and dialogue.


 **Output:**

 You must output a JSON object containing a complete gallery of all generated
 images, mapped to their respective panel data (panel_number, dialogue,
 image_url).
sub_agents: []
tools:
 - name: Agent3.tools.image_generation.generate_image

assembly_agent.yamlname: assembly_agent
model: gemini-2.5-pro
agent_class: LlmAgent
description: Frontend Developer for comic book assembly.
instruction: >
 You are the Assembly Agent, a Frontend Developer.

 Your input is the mapped gallery of images and panel data.


 **Your Logic:**

 1.  **Generate HTML:** You will write a clean, responsive HTML5/CSS3 file to
 display the comic. The comic must be vertically scrollable, with each panel
 displaying its image on top and the corresponding dialogue or description
 below it.

 2.  **Write File:** You must use the `write_comic_html` tool to save the
 generated HTML to a file named `comic.html` in the `output/` folder.

 3.  Pass the list of image URLs to the tool so it can handle the image assets
 correctly.


 **Output:**

 You will output a confirmation message indicating the path to the final HTML
 file.
sub_agents: []
tools:
 - name: Agent3.tools.file_writer.write_comic_html

Acesse a guia da interface ADK (Kit de Desenvolvimento de Agente) , selecione "Agent3" e clique no botão de edição (ícone de lápis).
Clique no botão "Salvar" na parte inferior esquerda da tela. Isso vai manter todas as mudanças de código feitas no agente principal.
Agora podemos começar a testar nosso agente.
Feche a guia atual da interface do ADK (Agent Development Kit) e volte para a guia do editor do Cloud Shell.
No terminal da guia Editor do Cloud Shell, reinicie o servidor do ADK (Kit de Desenvolvimento de Agente). Acesse o terminal em que você iniciou o servidor do ADK (Agent Development Kit) e pressione CTRL+C para desligar o servidor se ele ainda estiver em execução. Execute o seguinte para iniciar o servidor novamente.

#make sure you are in the right folder.
cd ~/adkui

#start the server
adk web

Ctrl+clique no URL (por exemplo, http://localhost:8000) na tela. A GUI do ADK (Kit de Desenvolvimento de Agente) vai aparecer na guia do navegador.
Selecione Agent3 na lista de agentes.
Insira o seguinte comando

Create a Comic Book based on the following story,

Title: The Story of Momotaro

The story of Momotaro (Peach Boy) is one of Japan's most famous and beloved folktales. It is a classic "hero's journey" that emphasizes the virtues of courage, filial piety, and teamwork.

The Miraculous Birth
Long, long ago, in a small village in rural Japan, lived an elderly couple. They were hardworking and kind, but they were sad because they had never been blessed with children.

One morning, while the old woman was washing clothes by the river, she saw a magnificent, giant peach floating downstream. It was larger than any peach she had ever seen. With great effort, she pulled it from the water and brought it home to her husband for their dinner.

As they prepared to cut the fruit open, the peach suddenly split in half on its own. To their astonishment, a healthy, beautiful baby boy stepped out from the pit.

"Don't be afraid," the child said. "The Heavens have sent me to be your son."

Overjoyed, the couple named him Momotaro (Momo meaning peach, and Taro being a common name for an eldest son).

The Call to Adventure
Momotaro grew up to be stronger and kinder than any other boy in the village. During this time, the village lived in fear of the Oni—ogres and demons who lived on a distant island called Onigashima. These Oni would often raid the mainland, stealing treasures and kidnapping villagers.

When Momotaro reached young adulthood, he approached his parents with a request. "I must go to Onigashima," he declared. "I will defeat the Oni and bring back the stolen treasures to help our people."

Though they were worried, his parents were proud. As a parting gift, the old woman prepared Kibi-dango (special millet dumplings), which were said to provide the strength of a hundred men.

Gathering Allies
Momotaro set off on his journey toward the sea. Along the way, he met three distinct animals:

The Spotted Dog: The dog growled at first, but Momotaro offered him one of his Kibi-dango. The dog, tasting the magical dumpling, immediately swore his loyalty.

The Monkey: Further down the road, a monkey joined the group in exchange for a dumpling, though he and the dog bickered constantly.

The Pheasant: Finally, a pheasant flew down from the sky. After receiving a piece of the Kibi-dango, the bird joined the team as their aerial scout.

Momotaro used his leadership to ensure the three animals worked together despite their differences, teaching them that unity was their greatest strength.

The Battle of Onigashima
The group reached the coast, built a boat, and sailed to the dark, craggy shores of Onigashima. The island was guarded by a massive iron gate.

The Pheasant flew over the walls to distract the Oni and peck at their eyes.

The Monkey climbed the walls and unbolted the Great Gate from the inside.

The Dog and Momotaro charged in, using their immense strength to overpower the demons.

The Oni were caught off guard by the coordinated attack. After a fierce battle, the King of the Oni fell to his knees before Momotaro, begging for mercy. He promised to never trouble the villagers again and surrendered all the stolen gold, jewels, and precious silks.

The Triumphant Return
Momotaro and his three companions loaded the treasure onto their boat and returned to the village. The entire town celebrated their homecoming.

Momotaro used the wealth to ensure his elderly parents lived the rest of their lives in comfort and peace. He remained in the village as a legendary protector, and his story was passed down for generations as a reminder that bravery and cooperation can overcome even the greatest evils.

Enquanto o agente está trabalhando, é possível conferir os eventos no terminal do Editor do Cloud Shell.
Pode levar algum tempo para gerar todas as imagens. Aguarde ou tome um café rápido! Quando a geração de imagens começar, você poderá ver as imagens relacionadas à história, como abaixo.

Figura 34: a história de Momotaro como tirinha 25. Se tudo correr bem, o arquivo HTML gerado será salvo na pasta "html". Se quiser fazer melhorias no agente, volte ao assistente de agente e peça para ele fazer mais mudanças.

Figura 35: conteúdo da pasta de saída

Se a etapa 25 for executada corretamente, você vai receber comic.html na pasta output. Siga estas etapas para testar. Primeiro, abra um novo terminal clicando em Terminal>Novo terminal no menu principal do Editor do Cloud Shell. Isso vai abrir um novo terminal.

#go to the project folder
cd ~/adkui

#activate python virtual environment
source .venv/bin/activate

#Go to the output folder
cd ~/adkui/output

#start local web server
python -m http.server 8080

Ctrl+clique em http://0.0.0.0:8080

Figura 36: execução do servidor da Web local

O conteúdo da pasta vai aparecer na guia do navegador. Clique no arquivo HTML (et. comic.html). A história em quadrinhos vai aparecer assim (sua saída pode ser um pouco diferente):

Figura 37: execução no localhost

12. Limpar

Agora vamos limpar o que acabamos de criar.

Exclua o app do Cloud Run que acabamos de criar. Acesse o Cloud Run em Cloud Run . Você vai encontrar o app criado na etapa anterior. Marque a caixa ao lado do app e clique no botão "Excluir".

Figura 38: exclusão do app do Cloud Run 2. Excluir os arquivos no Cloud Shell

#Execute the following to delete the files
cd ~
rm -R ~/adkui

13. Conclusão

Parabéns! Você criou agentes do ADK (Kit de Desenvolvimento de Agente) usando o ADK Visual Builder integrado. Você também aprendeu a implantar o aplicativo no Cloud Run. Essa é uma conquista significativa que abrange o ciclo de vida principal de um aplicativo moderno nativo da nuvem, oferecendo uma base sólida para implantar seus próprios sistemas de agentes complexos.

Resumo

Neste laboratório, você aprendeu a:

Criar um aplicativo multiagente usando o ADK Visual Builder
Implante o aplicativo no Cloud Run.

Recursos úteis