# Quebra-cabeça Painel que a IA monta sozinha na tela, peça por peça, com métricas, gráficos, listas, formulários e botões. > Quebra-cabeça é um componente exclusivo do THM Componentes que transforma o JSON enviado por um agente de IA em interface: títulos, métricas, cartões, listas, formulários com validação, gráficos e botões, montados em streaming. Tipos desconhecidos viram um aviso discreto, sem quebrar o painel, e botões e formulários devolvem ações nomeadas ao agente. - Categoria: Interfaces de IA - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/quebra-cabeca/ ## 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 ```text 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. ## Componentes relacionados - [Pingue-pongue](https://vibecode.thmtecnologia.com/componentes/pingue-pongue/): Conversa com a IA em que a resposta chega aos poucos, dá para gerar outra versão, editar a pergunta e avaliar. - [Bastidores](https://vibecode.thmtecnologia.com/componentes/bastidores/): Painel que mostra, passo a passo, o que a IA está pensando, quais ferramentas chamou e quanto tempo cada etapa levou. - [Aval](https://vibecode.thmtecnologia.com/componentes/aval/): Cartão em que a pessoa revisa o que a IA vai fazer e segura o botão para aprovar, ou então rejeita ou edita o pedido. - [Prosa](https://vibecode.thmtecnologia.com/componentes/prosa/): A resposta do assistente aparece aos poucos, palavra por palavra, saindo de um leve desfoque, como num chat de IA. - [Sismógrafo](https://vibecode.thmtecnologia.com/componentes/sismografo/): Gráfico de área com curva suave que recebe pontos novos a todo instante e desliza o eixo do tempo. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.