Generative UI: interfaces geradas por IA取代em 'muro de texto'

O que é Generative UI

Generative UI (GenUI) refere-se a interfaces de usuário geradas por IA em tempo real, adaptando-se à intenção do usuário. O autor diferencia três categorias principais no eixo de geração: Static/Controlled, Declarative e Open-ended, que não são mutuamente exclusivas e podem ser combinadas em produção.

Eliminando o "muro de texto"

Um dos casos de uso mais evidentes é substituir respostas textuais longas por elementos de UI efêmeros gerados sob demanda - como o Gemini já exibe imagens e mapas do Google, ou o Claude mostra flashcards interativos. Conforme o ecossistema amadurece, a tendência é ver menos texto corrido e mais componentes dinâmicos.

O paralelo com WeChat Mini Programs

O autor traça uma comparação com os Mini Programs do WeChat, lançados em 2017, que hoje atendem cerca de 1 bilhão de usuários mensais para compras, agendamentos, transporte, jogos, serviços públicos e mais. A diferença técnica é que o WeChat partiu de tecnologias proprietárias com pontos de entrada determinísticos (QR codes), enquanto a IA se apoia em padrões abertos (como MCP) e pontos de entrada baseados em intenção (texto livre).

As três categorias

Static/Controlled: o modelo apenas escolhe argumentos de ferramentas; o código da aplicação mapeia os resultados para componentes existentes. É a forma mais simples de adotar GenUI - reutiliza componentes, layouts e design systems já em uso. O fluxo envolve um agente (Mastra), ferramentas com schemas definidos e o frontend selecionando componentes pré-construídos com base no resultado.

Declarative: o modelo decide o layout e quais componentes autorizados exibir. O autor demonstra com uma página de planejamento de viagem onde o agente compõe a página inteira (widget de clima, estimativa de voo, cronograma, checklist) sem layout pré-definido. A stack usa três especificações: A2UI (o que o modelo gera), AG-UI (como os eventos viajam entre servidor e cliente) e A2A (comunicação entre agentes). CopilotKit funciona como encanamento entre essas camadas. O catálogo de componentes (definido com Zod schemas + renderizadores React) é o contrato que impede execução arbitrária de código.

Open-ended: o modelo emite código bruto (HTML/CSS/JS). Oferece máxima liberdade, mas traz riscos de segurança, latência, cacheabilidade e auditoria. A implementação mais comum hoje são iframes sandboxed (MCP Apps).

Combinações possíveis

O autor descreve três padrões híbridos: A2UI servido via MCP (sem iframe), MCP Apps embutidos dentro de uma superfície A2UI (componente wrapper de iframe), e A2UI renderizado dentro de um MCP App.

Questões em aberto

JSON não foi projetado para a era da IA - formatos como OpenUI Lang já exploram eficiência de tokens. Especificações estão assumindo o papel do código, levantando a pergunta sobre specs especializadas (para gráficos, formulários, slides). E à medida que designers e desenvolvedores sobem para abstrações mais altas, surge a pergunta: como é o trabalho de "projetar UI para intenções"?