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
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 Stream Text
Como ligo o Stream Text à 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. O Stream Text 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, ele simula o streaming a partir da prop text.
Quais formatações de markdown o Stream Text entende?
O Stream Text 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.
O Stream Text respeita quem prefere menos movimento?
Sim. Com a preferência de movimento reduzido ativa, o Stream Text 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.
