O que é, de verdade, "UI de agente"
Quando se fala em "UI de agente", o nome abre aspas: a OpenAI não lançou um produto chamado "Agent UI" literal. O que existe é o AgentKit, um conjunto de ferramentas para construir, implantar e otimizar agentes, lançado em outubro de 2025, com dois blocos de interface:
- Agent Builder — um canvas visual para montar fluxos multi-agente com drag-and-drop, conectar ferramentas e configurar guardrails, com versionamento e preview.
- ChatKit — uma biblioteca para embutir experiências de chat com agentes (streaming, threads, "model thinking") de forma customizável no seu produto.
E há ainda um detalhe de atualidade importante: em junho de 2026 a OpenAI anunciou que está descontinuando o Agent Builder e o Evals, que deixam a plataforma em 30 de novembro de 2026. Para fluxos que devem continuar como código, a orientação oficial é usar o Agents SDK; para casos de "linguagem natural", os Workspace Agents no ChatGPT.
Ou seja: o "Agent UI" da OpenAI é um campo em movimento, e parte das suas peças de interface não é mais um produto estável. É por isso que vale a pena olhar para a alternativa madura e aberta.
AG-UI: o protocolo aberto que virou padrão
AG-UI (github.com/ag-ui-protocol/ag-ui, licença MIT, mais de 16 mil estrelas) é o protocolo de interação agente-usuário que leva agentes para o frontend. Diferente de uma biblioteca de componentes, define wire types — a linguagem comum entre o agente e a interface — cobrindo mensagem, chamada de ferramenta, aprovação de ferramenta, handoff entre agentes e fim de conversa.
O ponto que mais importa para arquitetura: Google, Microsoft e AWS adotam AG-UI, o que cria um backend-agnostic para UIs de agente. Você constrói a interface uma vez e ela conversa com agentes de qualquer framework que fale AG-UI. É o "algo parecido" maduro que substitui a incerteza do Agente Builder.
Fluxo 1 — Um agente simples com guardrail
O diagrama abaixo mostra o arco básico de um agente com UI: o usuário interage, o agente gera, um guardrail decide se passa ou bloqueia, a ferramenta é chamada e o resultado volta em streaming para a interface.
Código Mermaid do diagrama 1
```mermaid flowchart LR A[Usuário] --> B[ChatKit / UI] B --> C[Agente: gera resposta] C --> D{Guardrail} D -- passa --> E[Ferramenta / MCP] D -- bloqueia --> Z[Devolve revisão] E --> F[Resultado] F --> G[Stream de volta à UI] G --> A ```Esse é o mesmo raciocínio dos gates que usamos em processos de dados: produzir, verificar, e só então escalar. A diferença é que aqui a verificação acontece em tempo de execução, dentro do loop do agente.
Fluxo 2 — Pipeline multi-agente estilo Agent Builder
O Agent Builder expressa fluxos visualmente. Um exemplo típico de atendimento tem nós como Start, guardrail de jailbreak, agente de classificação, if/else, e agentes especializados (retenção, informação), fechando num End:
Código Mermaid do diagrama 2
```mermaid flowchart TD S[Start] --> G1[Guardrail jailbreak] G1 --> C[Agente de classificação] C --> I{If/else} I -- retenção --> R[Agente de retenção] I -- informação --> N[Agente de informação] R --> G2[Guardrail de alucinação] N --> G2 G2 --> E[End: resposta final] ```A lição de desenho: cada ramo tem um guardrail de saída e um ponto de decisão humano quando necessário. O fluxo respeita a regra sistêmica de que "algumas decisões nunca são totalmente delegadas".
Fluxo 3 — Wire types do AG-UI
No AG-UI, os wire types são os blocos do protocolo. Em alto nível, uma conversa alterna entre estes eventos:
Código Mermaid do diagrama 3
```mermaid sequenceDiagram participant U as Usuário participant C as Cliente AG-UI participant A as Agente (backend) U->>C: mensagem de texto C->>A: TextMessage A->>C: ToolCall C->>U: solicita aprovação U->>C: aprova C->>A: ToolResult A->>C: Handoff (outro agente) A->>C: TextEnd C->>U: resposta final ```Isso mostra por que AG-UI é interessante para quem monta UIs: a interface não precisa conhecer o framework do agente, apenas o protocolo.
Como renderizar Mermaid numa página
Os diagramas acima são definidos em Markdown (fenced blocks mermaid). Para que o leitor veja o gráfico (e não o código), injeta-se a biblioteca Mermaid via CDN e ordena-se que ela processe os blocos code.language-mermaid:
Para renderizar no navegador (fora de plataformas que bloqueiam script), carrega-se uma biblioteca Mermaid via CDN e ela processa os blocos com language-mermaid, chamando mermaid.initialize e mermaid.run. O link da documentação está em Fontes consultadas. Nesta plataforma, o script é tratado como código (por segurança), então os fluxos são entregues como imagens acima, com o código-fonte disponível nos detalhes.
Isso funciona sem plugin e sem mexer na infra — o script roda apenas quando há diagrama na página. (Se o ambiente bloquear scripts, o fallback é exportar o diagrama como imagem PNG/SVG no Mermaid Live Editor e linkar a imagem.)
Bloco de HTML moderno (exemplo mínimo)
Um dos pontos do pedido era usar HTML moderno e bibliotecas modernas sem sair da Grav. Um card simples, com CSS grid e dark mode, já transmite a ideia:
O importante não é o CSS, é o padrão: markup limpo, comportamento progressivo e dados apresentados em streaming. É o mesmo HTML que você usaria num componente React — sem o cost de build, quando o caso não exige.
Um protótipo para você testar
Para ver a UI de agente em ação (com thinking, aprovação de ferramenta e handoff), montei um protótipo em HTML/JS puro. Ele não roda dentro desta página por segurança (a plataforma bloqueia scripts), mas basta abri-lo localmente:
- Baixe o arquivo e abra no navegador:
agui-proto.html(uma página só, sem build e sem dependências). - O braço "Rodar simulação" executa um fluxo de exemplo: o agente pensa, chama uma ferramenta, pede aprovação (você aprova ou nega), faz um handoff e entrega a resposta em streaming.
- O botão "Ver fluxo (Mermaid)" carrega o Mermaid via CDN e desenha o diagrama do fluxo ao vivo.
O que o protótipo demonstra é o mesmo arco do guia: ação limitada por aprovação humana, ferramenta invocada só após consentimento e handoff claro entre etapas. Se quiser, este mesmo esqueleto vira base de um componente real com AG-UI ou ChatKit.
Ligações com o que já publicamos
Este guia conversa com dois artigos que você já encontra aqui na plataforma: o Data Request Agent (um agente de intake com fila central, triagem humana e vínculo com OKRs) e o artigo sobre distribuir conhecimento com disciplina (pensamento sistêmico aplicado ao fluxo de demandas). A UI de agente é a ponta visível desse mesmo arco: a "porta única" onde o usuário conversa, e por onde o fluxo entra no sistema.
Próximos passos
- Se quiser interface pronta: Explore o AG-UI (repo + hello world + dojo) para ver a UI em ação.
- Se quiser lógica de agente: use o Agents SDK (OpenAI) ou qualquer framework que fale AG-UI.
- Se quiser monetizar/reusar conhecimento: transforme este padrão (pesquisa → guia com Mermaid → protótipo → skill) numa skill reutilizável, pra repetir o ciclo sem recomeçar do zero.
Fontes consultadas
- OpenAI, Introducing AgentKit (novidade + nota de descontinuação do Agent Builder/Evals).
https://openai.com/index/introducing-agentkit/ - OpenAI Dev, Agents (API Guides) — Agents SDK, Responses, ChatKit.
https://developers.openai.com/api/docs/guides/agents - AG-UI, Agent-User Interaction Protocol (repo oficial, MIT, ag-ui.com).
https://github.com/ag-ui-protocol/ag-ui - Mermaid, Diagramming and charting tool (repo oficial).
https://github.com/mermaid-js/mermaid - Stack Overflow, Mermaid in Markdown via CDN (técnica de renderização).
https://stackoverflow.com/questions/53883747/how-to-make-github-pages-markdown-support-mermaid-diagram
