Pontos-Chave (TL;DR)

• A2UI (Agent to UI) é um protocolo declarativo que permite que agentes de IA gerem interfaces interativas e ricas usando mensagens JSON.
• O Protocolo A2A (Agent to Agent) fornece comunicação segura e padronizada para sistemas multiagente, com suporte nativo ao A2UI.
• O Protocolo A2UI separa a estrutura da UI do estado da aplicação, permitindo atualizações reativas e renderização multiplataforma.
• A2UI funciona com qualquer mecanismo de transporte, incluindo o Protocolo A2A, AG UI, SSE e WebSockets.
• Construa UIs seguras e com sensação nativa, funcionando em plataformas Web, móvel e desktop, usando A2UI e o Protocolo A2A.

O que são o A2UI e o Protocolo A2A?

Entendendo o Protocolo A2UI

O A2UI (Agent to UI) é um protocolo de interface de usuário declarativo projetado especificamente para interfacces guiadas por agentes. O Protocolo A2UI permite que agentes de IA gerem interfaces de usuário interativas e ricas que podem ser renderizadas nativamente em múltiplas plataformas (Web, móvel, desktop) sem a execução de código arbitrário. Diferente dos métodos tradicionais que dependem de interação em texto puro ou HTML/JavaScript embarcado, o A2UI transmite descrições de UI como dados JSON estruturados.

O Protocolo A2UI resolve um desafio crítico em sistemas multiagente: como permitir que agentes remotos gerem interfaces de usuário que se sintam nativas, seguras e integradas à aplicação. Quando os agentes rodam em servidores e organizações diferentes, eles não podem manipular diretamente a UI da aplicação – devem se comunicar por meio de mensagens. O Protocolo A2UI fornece uma maneira padronizada para os agentes descreverem componentes de UI, que os clientes renderizam usando seus frameworks nativos.

Entendendo o Protocolo A2A

O Protocolo A2A (Agent to Agent) é um protocolo de comunicação entre agentes, seguro e padronizado. Ele fornece segurança integrada, autenticação e ligações para múltiplos formatos de mensagem e protocolos de transporte. Ao construir sistemas multiagente, o Protocolo A2A permite que os agentes se comuniquem de forma segura através de fronteiras de confiança.

O Protocolo A2A inclui uma extensão que integra facilmente o A2UI. Isso significa que, ao usar o Protocolo A2A para comunicação entre agentes, o suporte ao A2UI é quase automático. A combinação do A2UI e do Protocolo A2A fornece uma base poderosa para construir aplicações guiadas por agentes, seguras e interoperáveis.

Características-chave do Protocolo A2A:

• Formato de mensagem padronizado para comunicação entre agentes.
• Mecanismos integrados de segurança e autenticação.
• Suporte a múltiplos protocolos de transporte (HTTP, WebSockets, gRPC).
• Extensão para transporte transparente de mensagens A2UI.
• Projetado para malhas corporativas e orquestração multiagente.

Como A2UI e o Protocolo A2A Trabalham Juntos

O Protocolo A2UI e o Protocolo A2A foram projetados para funcionar perfeitamente juntos:

1. O Protocolo A2A lida com a comunicação segura entre agentes.
2. Mensagens do Protocolo A2UI são transmitidas através do Protocolo A2A.
3. O agente gera mensagens JSON do A2UI que descrevem componentes de UI.
4. O cliente recebe as mensagens A2UI via Protocolo A2A e as renderiza nativamente.

Esta integração torna o A2UI e o Protocolo A2A ideais para malhas corporativas e sistemas multiagente onde segurança e interoperabilidade são cruciais.

Arquitetura do A2UI

Arquitetura de Três Camadas

O Protocolo A2UI separa as preocupações em três camadas distintas:

1. Camada de Estrutura de UI – Define componentes através de mensagens surfaceUpdate no Protocolo A2UI.
2. Camada de Estado da Aplicação – Define o modelo de dados através de mensagens dataModelUpdate no Protocolo A2UI.
3. Camada de Renderização do Cliente – Mapeamento e renderização nativa dos componentes das mensagens A2UI.

Tipos de Mensagem Nucleares do Protocolo A2UI

Tipo de Mensagem	Propósito	Exemplo de Uso
surfaceUpdate	Define ou atualiza componentes de UI	Criar um formulário com campos de entrada
dataModelUpdate	Atualiza o estado da aplicação	Preencher valores do formulário ou atualizar dados exibidos
beginRendering	Sinaliza ao cliente para renderizar	Acionar a exibição da UI após os componentes estarem prontos
deleteSurface	Remove uma superfície de UI	Limpar após a conclusão de um fluxo de trabalho

Modelo de Lista de Adjacência

Diferente das árvores JSON aninhadas tradicionais, o A2UI utiliza um modelo de lista de adjacência – os componentes são armazenados como uma lista plana com referências por ID. Este design torna o Protocolo A2UI particularmente adequado para LLMs.

Abordagem aninhada tradicional:

• Requer aninhamento perfeito de uma só vez.
• Difícil atualizar componentes profundamente aninhados.
• Difícil de transmitir incrementalmente.

Lista de Adjacência A2UI:

• Estrutura plana, fácil para LLMs gerarem – é por isso que o Protocolo A2UI é tão adequado para LLMs.
• Componentes enviados incrementalmente – A2UI suporta renderização progressiva.
• Atualização de qualquer componente por ID – o Protocolo A2UI permite atualizações eficientes.
• Separação clara entre estrutura e dados – a arquitetura A2UI promove um design limpo.

Exemplo: Definição de Componente A2UI

{
  "surfaceUpdate": {
    "surfaceId": "reserva",
    "components": [
      {"id": "raiz", "component": {"Column": {"children": {"explicitList": ["saudacao", "botoes"]}}}},
      {"id": "saudacao", "component": {"Text": {"text": {"literalString": "Olá"}}}},
      {"id": "botoes", "component": {"Row": {"children": {"explicitList": ["btn-cancelar", "btn-ok"]}}}},
      {"id": "btn-cancelar", "component": {"Button": {"child": "txt-cancelar", "action": {"name": "cancelar"}}}}
    ]
  }
}

Configurando a Aplicação Cliente

Escolhendo o Renderizador

Renderizador	Plataforma	Status
Lit (Web Components)	Web	Estável
Angular	Web	Estável
Flutter (GenUI SDK)	Móvel/Desktop/Web	Estável
React	Web	Lançamento previsto para 2026 Q1
SwiftUI	iOS/macOS	Planejado para 2026 Q2
Jetpack Compose	Android	Planejado para 2026 Q2

Configuração do Renderizador Web (Lit)

npm install @a2ui/web-lib lit @lit-labs/signals

O renderizador Lit fornece:

• Processador de Mensagens: Gerencia o estado A2UI e processa mensagens A2UI recebidas.
• Componente <a2ui-surface>: Renderiza superfícies A2UI na aplicação.
• Lit Signals: Fornece gerenciamento de estado reativo para atualizações automáticas da UI A2UI.

Configuração do Angular

npm install @a2ui/angular @a2ui/web-lib

O renderizador Angular fornece integração completa com injeção de dependência e detecção de mudanças do Angular.

Configuração do Flutter (GenUI SDK)

flutter pub add flutter_genui

O GenUI SDK fornece renderização nativa do A2UI.

Conectando-se ao Agente

Sua aplicação cliente precisa:

1. Receber mensagens A2UI (através de transporte do agente).
2. Processar as mensagens (usando o processador de mensagens).
3. Enviar ações do usuário (de volta para o agente).

Construindo um Agente A2UI

Visão Geral Rápida

Construir um agente A2UI envolve:

1. Entender a intenção do usuário → Decidir qual UI exibir.
2. Gerar JSON A2UI → Usar saída estruturada de LLM ou prompts.
3. Validar e transmitir → Verificar o esquema, enviar ao cliente.
4. Processar ações → Responder a interações do usuário.

Código de Exemplo do Agente

import json
from google.adk.agents.llm_agent import Agent
from google.adk.tools.tool_context import ToolContext

def obter_restaurantes(contexto_ferramenta: ToolContext) -> str:
    """Chame esta ferramenta para obter uma lista de restaurantes."""
    return json.dumps([
        {
            "nome": "Xi'an Famous Foods",
            "detalhe": "Macarrão picante e saboroso.",
            "urlImagem": "http://localhost:10002/static/shrimpchowmein.jpeg",
            "classificacao": "★★★★☆",
            "linkInfo": "[Mais informações](https://www.xianfoods.com/)",
            "endereco": "81 St Marks Pl, New York, NY 10003"
        },
        # ... mais restaurantes
    ])

INSTRUCAO_AGENTE="""
Você é um assistente útil para encontrar restaurantes. Seu objetivo é ajudar os usuários a encontrar e reservar restaurantes usando uma UI rica.
Para isso, você deve seguir esta lógica:
1.  **Para encontrar restaurantes:**
    a. Você DEVE chamar a ferramenta `obter_restaurantes`. Extraia a culinária, localização e um número específico (`contagem`) de restaurantes da consulta do usuário.
    b. Após receber os dados, você DEVE gerar estritamente o JSON final da UI a2ui, usando os exemplos de UI correspondentes do arquivo `construtor_prompt.py` com base na contagem de restaurantes.
"""

agente_raiz = Agent(
    model='gemini-2.5-flash',
    name="agente_restaurantes",
    description="Um agente que encontra restaurantes e ajuda a reservar mesas.",
    instruction=INSTRUCAO_AGENTE,
    tools=[obter_restaurantes],
)

Implementando o Transporte com o Protocolo A2A

Entendendo a Integração com o Protocolo A2A

O Protocolo A2A fornece comunicação segura e padronizada entre agentes, com suporte integrado ao A2UI. Quando você usa o Protocolo A2A para comunicação entre agentes, o suporte ao A2UI é quase automático.

Configurando o Protocolo A2A para A2UI

Ao usar o Protocolo A2A, você precisa:

1. Configurar o Protocolo A2A: Defina autenticação e transporte do Protocolo A2A.
2. Habilitar a Extensão A2UI: A extensão A2UI do Protocolo A2A deve estar disponível automaticamente.
3. Reportar Capacidades do Cliente: Inclua a2uiClientCapabilities nos metadados do Protocolo A2A.
4. Processar Mensagens A2UI: Lide com mensagens A2UI recebidas através do transporte Protocolo A2A.

Práticas Recomendadas para Desenvolvimento com A2UI

Design de Componentes

Faça:

• Use IDs descritivos: "cartao-perfil-usuario" em vez de "c1".
• Mantenha hierarquias rasas.
• Use data binding para separar estrutura do conteúdo.

Não faça:

• Use estruturas de componentes profundamente aninhadas.
• Codifique valores que deveriam estar vinculados a dados.

Integração com o Protocolo A2A

Faça:

• Sempre inclua a2uiClientCapabilities nas mensagens do Protocolo A2A.
• Use o Protocolo A2A para comunicação multiagente segura.
• Aproveite a extensão do Protocolo A2A para suporte automático ao A2UI.
• Configure corretamente a autenticação do Protocolo A2A.

Não faça:

• Esqueça de reportar capacidades do cliente nos metadados do Protocolo A2A.
• Ignore os recursos de segurança do Protocolo A2A ao transmitir mensagens A2UI.

Perguntas Frequentes sobre A2UI e o Protocolo A2A

P: O A2UI é adequado para LLMs?

R: Sim. O Protocolo A2UI usa um modelo de lista de adjacência plana em vez de uma árvore aninhada, tornando mais fácil para as LLMs gerarem incrementalmente. Os componentes A2UI são identificados por IDs simples, os erros são fáceis de corrigir e o formato A2UI suporta a transmissão em fluxo para renderização progressiva.

P: Preciso usar o Protocolo A2A com o A2UI?

R: Não, o A2UI é agnóstico ao transporte e funciona com qualquer mecanismo. No entanto, o Protocolo A2A fornece a solução mais robusta para sistemas multiagente, com segurança integrada, autenticação e suporte ao A2UI. Para malhas corporativas e comunicação através de fronteiras de confiança, o Protocolo A2A é altamente recomendado.

P: Como o Protocolo A2A melhora a segurança do A2UI?

R: O Protocolo A2A fornece múltiplas camadas de segurança para aplicações A2UI. Inclui mecanismos integrados de autenticação e autorização, protegendo a transmissão de mensagens A2UI. O Protocolo A2A também fornece validação de integridade da mensagem, garantindo que as mensagens A2UI não sejam adulteradas durante o transporte. Ao usar o Protocolo A2A com o A2UI, os desenvolvedores se beneficiam de segurança de nível corporativo sem configuração adicional.