Como ele é
Parece ver alguém montar um painel de controle ao vivo, bloco por bloco. Num cartão claro, o cabeçalho tem um ponto que pulsa enquanto o agente trabalha, o título e o status. As peças surgem uma a uma, subindo de leve e saindo de um desfoque: um título, três métricas com a variação em verde ou vermelho, um gráfico de barras que cresce, uma lista com etiquetas de prioridade, um formulário e botões. Quando o agente atualiza um número, o bloco pisca com um contorno na cor de destaque. Embaixo, um painel recolhível lista as ações disparadas. Na demonstração, o painel é a triagem de uma clínica.
Você pode estar procurando isto se pediu algo assim
- a IA montar a tela sozinha em vez de responder só com texto
- chatbot que devolve gráfico, formulário e botões no lugar de parágrafos
- painel que vai aparecendo pedaço por pedaço enquanto o agente gera
- transformar a resposta JSON do agente em componentes na tela
- dashboard criado sob demanda pela IA dentro do meu produto
- aquele efeito de UI generativa em que os cards surgem um a um
- renderizar com segurança a interface que o modelo de IA inventa
Também chamado de
- UI generativa
- interface generativa
- renderizador de UI
- interface gerada por IA
- agent UI
- JSON to UI
- server-driven UI
- streaming UI
Quando usar
- Agentes e apps com MCP que montam painéis, formulários e relatórios sob demanda
- Copilotos que respondem com métricas e gráficos em vez de parágrafos
- Assistentes internos que coletam dados por um formulário gerado na hora
- Protótipos de UI generativa antes de definir o catálogo final de componentes
Quando evitar
- Telas fixas que não mudam, em que um componente comum é mais simples de manter
- Exibir imagens de qualquer endereço, já que só caminhos que começam em /thm/ são aceitos sem ajuste
Como pedir para a sua IA
Crie um renderizador de UI generativa nas cores da minha marca: o agente envia JSON por streaming com títulos, métricas, cartões, listas, formulários com validação, gráficos e botões, a interface se monta ao vivo, tipos desconhecidos não quebram a tela e cada clique devolve uma ação nomeada ao agente.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Quebra-cabeça
Como o agente fala com Quebra-cabeça?
O agente envia NDJSON, uma operação por linha: add para criar um bloco com id e pai, update para mudar campos, remove, clear e done. Você passa esse fluxo na prop source, ou uma árvore pronta na prop spec. Quebra-cabeça emite action com nome e contexto a cada botão clicado ou formulário enviado.
Usar Quebra-cabeça é seguro com respostas imprevisíveis da IA?
O código é defensivo. Quebra-cabeça valida cada bloco: tipo desconhecido vira um aviso discreto, campo inválido é normalizado e registrado como problema, e nada derruba o painel. Não usa v-html, e imagens só são aceitas de caminhos que começam em /thm/, o que impede o agente de carregar endereços externos.
Quais blocos Quebra-cabeça sabe desenhar?
O catálogo de Quebra-cabeça tem 11 tipos: heading, text, metric, card, row, column, list, form, chart, image e actions. O formulário aceita campos de texto, número, seleção, caixa de marcação e área de texto, com obrigatório, mínimo e máximo, e o gráfico pode ser de barras ou de linha.
