# Prosa A resposta do assistente aparece aos poucos, palavra por palavra, saindo de um leve desfoque, como num chat de IA. > Prosa é um componente exclusivo do THM Componentes que mostra a resposta de um assistente de IA chegando token a token, com fade, desfoque, cursor piscando e pausas naturais na pontuação. Interpreta markdown sem bibliotecas, tem blocos de código com botão Copiar e aceita streaming real do seu backend. Serve para chats de atendimento, triagem e copilotos. - Categoria: Interfaces de IA - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado, Rolagem - URL: https://vibecode.thmtecnologia.com/componentes/prosa/ ## Como ele é Lembra a resposta de um chatbot sendo escrita na sua frente. No topo, um pequeno avatar redondo em degradê de índigo para ciano, com uma estrela, fica ao lado do nome do assistente e de um status que brilha enquanto o texto chega e depois mostra quanto tempo levou. As palavras surgem uma a uma, saindo de um leve desfoque, num ritmo irregular: pausas curtas nas vírgulas, mais longas nos pontos e rajadas de vez em quando. Um cursor fino em degradê pisca no fim. Negrito, listas e código já chegam formatados, e os blocos de código ganham fundo azul-marinho e botão Copiar. ## Você pode estar procurando isto se pediu algo assim - “resposta da IA aparecendo palavra por palavra no meu chat” - “texto que vai se escrevendo sozinho do jeito que o ChatGPT faz” - “efeito de máquina de escrever para a resposta do assistente virtual” - “mostrar a resposta do modelo de linguagem chegando em tempo real” - “cursor piscando enquanto a IA escreve a resposta” - “chat de IA com bloco de código e botão de copiar” - “deixar meu assistente com cara de app de IA de verdade” - “markdown aparecendo aos poucos enquanto a resposta chega do servidor” ## Também chamado de texto em streaming, streaming de tokens, streaming text, efeito de digitação de IA, typing effect, resposta token a token, LLM streaming UI, streaming markdown ## Quando usar - Chats de atendimento, triagem e suporte com respostas geradas por IA - Copilotos dentro de SaaS que explicam passos e mostram trechos de código - Demonstrações de produto de IA, com a resposta simulada a partir de um texto fixo - Telas que recebem respostas longas do servidor e precisam mostrar progresso ## Quando evitar - Respostas com tabelas, links ou imagens, que o parser de markdown não interpreta - Interfaces escuras sem ajustar as cores, já que o texto vem em azul-marinho - Textos que precisam aparecer para buscadores, já que a resposta só é montada no navegador ## Como pedir para a sua IA ```text Crie um componente de resposta de IA em streaming no meu chat: texto revelado token a token com fade e desfoque, cursor piscando, markdown com blocos de código e botão Copiar, botões Parar e Gerar novamente, leitura de um stream do meu backend e versão sem animação para movimento reduzido. ``` 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 Prosa ### Como ligo Prosa à resposta em streaming do meu backend? Passe um AsyncIterable de texto na prop source, por exemplo um async generator que lê o corpo de um fetch. Prosa coloca cada pedaço recebido na fila, segura a última palavra até chegar um espaço, acelera quando a fila cresce e emite done, stop ou error. Sem source, o componente simula o streaming a partir da prop text. ### Quais formatações de markdown Prosa entende? Prosa interpreta parágrafos, títulos, negrito, itálico, código em linha, listas com marcadores ou numeradas e blocos de código, com um parser próprio e sem v-html: todo texto vira nó de texto escapado. Links, tabelas e imagens aparecem como texto simples. Cada bloco de código mostra o nome da linguagem e um botão Copiar. ### Prosa respeita quem prefere menos movimento? Sim. Com a preferência de movimento reduzido ativa, Prosa desliga o fade e o desfoque de cada palavra, o cursor para de piscar e o brilho do status some. O texto simulado aparece inteiro de uma vez, e o texto real aparece em blocos conforme chega. Fora da tela, a simulação pausa. ## 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. - [Mote](https://vibecode.thmtecnologia.com/componentes/mote/): Caixa de mensagem de app de IA que cresce com o texto, aceita arquivos, grava áudio e abre comandos ao digitar barra. - [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. - [Ditado](https://vibecode.thmtecnologia.com/componentes/ditado/): As palavras saem do desfoque e aparecem uma depois da outra, como se o texto estivesse sendo gerado na hora. - [Telegrama](https://vibecode.thmtecnologia.com/componentes/telegrama/): As letras aparecem uma a uma com um cursor piscando, somem e dão lugar à próxima palavra da lista. - [Sopro](https://vibecode.thmtecnologia.com/componentes/sopro/): Uma esfera luminosa que respira em espera e pulsa no ritmo da voz quando o assistente ouve ou fala. --- 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.