Google + CopilotKit

Permita que Agentes IA
Gerem UI com Segurança

A2UI é um protocolo de UI declarativo aberto que permite que agentes IA renderizem interfaces interativas ricas em múltiplas plataformas sem executar código arbitrário.

v0.8
Versão Atual
Apache 2.0
Código Aberto
4+
Frameworks
a2ui-response.json
1
Declarativo Seguro
Renderização Streaming
Recursos Principais

Quatro Recursos Principais

Construído para interações UI na era da IA, resolvendo renderização segura através de limites de confiança

Segurança Primeiro

Segurança por Design

Usa formato de dados declarativo, não código executável. Agentes só podem usar componentes pré-aprovados, eliminando riscos de ataques de injeção de UI no nível arquitetural.

Saiba mais

Amigável para LLM

Formato Amigável para LLM

Estrutura JSON plana otimizada para geração token-por-token de LLM. Modelo de lista de adjacência suporta parsing eficiente e atualizações incrementais.

Saiba mais

Agnóstico de Framework

Agnóstico de Framework

A mesma resposta A2UI pode ser renderizada em React, Angular, Flutter ou plataformas móveis nativas usando componentes nativos de cada plataforma.

Saiba mais

Renderização Progressiva

Renderização Progressiva

Suporta atualizações de UI em streaming, usuários veem a interface sendo construída progressivamente em tempo real. Resposta instantânea, experiência natural.

Saiba mais
Como Funciona

Como Funciona

A2UI permite comunicação segura entre Agentes IA e clientes através de um protocolo declarativo

STEP 01

Usuário Envia Mensagem

Usuário envia uma solicitação ao Agente IA, ex., "Encontrar restaurantes próximos"

STEP 02

Agente Gera A2UI

Agente IA gera uma mensagem A2UI descrevendo a UI (árvore de componentes em formato JSON)

STEP 03

Streaming

Mensagem é transmitida ao cliente, suportando renderização durante a geração

STEP 04

Renderização Local

Cliente renderiza UI usando componentes nativos (React/Flutter/Angular)

STEP 05

Interação do Usuário

Usuário interage com a UI, eventos são enviados de volta ao Agente

STEP 06

Atualização de Resposta

Agente responde com nova mensagem A2UI, UI atualiza dinamicamente

Visão Geral da Arquitetura

Usuário
Solicitação
Agente IA(Gemini, GPT...)
A2UI JSON
Cliente(React, Flutter...)
Renderizar
UI Nativa
Demo ao Vivo · Sem Instalação

Experimente A2UI Composer

Construa e teste interfaces A2UI diretamente no navegador com ferramentas visuais,arraste e solte componentes, visualização ao vivo, exporte JSON com um clique

Abrir Demo

Desenvolvido por CopilotKit

Construtor Visual

Arraste e solte componentes para construir UI rapidamente, WYSIWYG

Visualização ao Vivo

Visualização de renderização instantânea, resposta em milissegundos

Exportar JSON

Exportação com um clique para formato A2UI padrão

Exemplo de Código

Exemplos de Código

Uma resposta A2UI, renderização nativa em múltiplas plataformas

1{
2 "type": "surface",
3 "surface_id": "main_content",
4 "components": [
5 {
6 "id": "card_1",
7 "type": "card",
8 "props": {
9 "title": "Italian Restaurant",
10 "subtitle": "0.5 km away",
11 "image": "https://..."
12 },
13 "children": ["rating_1", "btn_1"]
14 },
15 {
16 "id": "rating_1",
17 "type": "rating",
18 "props": { "value": 4.5, "count": 128 }
19 },
20 {
21 "id": "btn_1",
22 "type": "button",
23 "props": {
24 "label": "View Details",
25 "action": "view_restaurant"
26 }
27 }
28 ]
29}

Frameworks e plataformas suportados

React
Angular
Flutter
Vue
iOS
Android
Para Todos

Capacitando Cada Função

Seja qual for sua função, A2UI ajuda você a construir melhores produtos com IA

Desenvolvedor

  • SDK e especificações de protocolo claros
  • Não vinculado a nenhum framework específico
  • Suporte a componentes personalizados
  • Suporte nativo a saída em streaming
  • Segurança de tipos TypeScript
Ver Documentação
Recomendado

Gerente de Produto

  • Arquitetura declarativa, segura e em conformidade
  • Defina uma vez, renderize em qualquer lugar
  • Renderização em streaming, resposta instantânea
  • Apoiado pelo Google, confiável
  • Comunidade open source, iteração contínua
  • Menores barreiras para desenvolvimento de produtos IA
Explorar Casos de Uso

Designer

  • Use componentes nativos, mantenha consistência de design
  • Experiência nativa multiplataforma
  • IA gera UI consciente do contexto
  • Ferramenta visual Composer
  • Suporte a estilos personalizados
Explorar Guia de Design