Streamdown
Vercel · Programação
O Streamdown é um renderizador de Markdown em streaming para apps de React, feito para lidar com o Markdown conforme ele chega dos modelos de IA, token a token. É uma alternativa direta ao react-markdown criada pela Vercel que dá conta das partes complicadas da saída em streaming, como um texto em negrito que ainda não foi fechado ou um bloco de código sem as crases finais. Se você está construindo uma interface de chat em streaming ou qualquer interface de IA com streaming, o Streamdown mantém a formatação estável em vez de deixá-la piscar e quebrar. Grátis. Código aberto. Distribuído como pacote npm.
Sobre Streamdown
O que é o Streamdown
O Streamdown é um renderizador de Markdown de código aberto para apps de React que exibem conteúdo gerado por IA. O problema central que ele resolve é o timing. Renderizadores comuns partem do princípio de que recebem um documento pronto, mas quando um LLM transmite sua resposta, seu app recebe fragmentos. Uma frase pode terminar no meio de uma palavra. Um link pode estar sem o colchete de fechamento. Uma tabela pode aparecer antes da linha de cabeçalho. Ferramentas tradicionais como o react-markdown ou travam nesses blocos parciais ou os renderizam errado.
O Streamdown analisa os blocos incompletos de propósito. Ele detecta sintaxe sem fechamento, aplica o estilo ao que já chegou e se atualiza sem tranco conforme mais tokens entram. O resultado é um texto que se revela e parece intencional, não quebrado.
O trade-off é que se trata de uma ferramenta para desenvolvedores, não um produto pronto. Não há app para baixar nem painel para navegar. Você precisa de um projeto de React, Node.js 18 ou mais recente e alguma familiaridade com Tailwind CSS para estilizar a saída. Se você não escreve código, isto não é para você.
Primeiros passos
- Instale o pacote com seu gerenciador de pacotes, por exemplo
npm i streamdown, ou pegue o componente de mensagem da biblioteca AI Elements. - Adicione os arquivos-fonte do Streamdown à sua configuração do Tailwind incluindo
@source "../node_modules/streamdown/dist/*.js";no seu arquivo CSS global. - Coloque o componente
<Streamdown>na sua página ou visão de chat e passe a string de markdown recebida como filho dele. - Ligue a animação palavra por palavra com a prop
animatede vinculeisAnimatingao seu estado de streaming se quiser um efeito de digitação. - Restrinja links e imagens com as opções do rehype-harden antes de publicar, para que o conteúdo do usuário ou do modelo não carregue nada em que você não confie.
Informações do produto
Uma visão rápida dos preços, das plataformas compatíveis e do desempenho de Streamdown.
Ideal para
Os usuários, tarefas e cenários em que esta ferramenta se encaixa melhor.
Usuários
- Desenvolvedores de React que criam apps de chat com IA
- Equipes de produto de IA
- Engenheiros de front-end que querem Markdown, matemática e diagramas juntos
Tarefas
- Renderizar respostas de LLM em streaming
- Criar interfaces de chat com saída rica
- Exibir código e fórmulas em respostas de IA
Cenários
- Publicar um assistente de IA que transmite suas respostas palavra por palavra
- Mostrar respostas em vários idiomas
- Manter o conteúdo não confiável seguro
Principais recursos
Renderização otimizada para streaming
Toda a razão de existir do Streamdown é o caso do streaming. Ele detecta Markdown incompleto, como um **negrito aberto ou um link sem o colchete de fechamento, e fecha o bloco para que nada apareça como texto puro. Conforme novos tokens chegam, o componente atualiza o estilo no lugar. Já viu uma interface de chat mostrar asteriscos quebrados antes de uma palavra se completar? Esse é o problema. Para quem constrói uma interface de chat em streaming, essa fluidez é justamente o ponto.
Substituto direto do react-markdown
Se seu projeto já usa react-markdown, trocar pelo Streamdown é quase um localizar e substituir. O componente aceita a mesma string de markdown como filho, então a maioria das integrações precisa de pouco mais que um novo import. Esse baixo custo de migração torna fácil testá-lo sem se comprometer a reescrever sua visão de mensagens. Também não há aprisionamento.
Suporte a conteúdo rico
O Streamdown cobre mais que texto puro. O GitHub Flavored Markdown traz tabelas, listas de tarefas, tachado e notas de rodapé. O KaTeX cuida da matemática em LaTeX. O Mermaid renderiza diagramas a partir de blocos de código e o Shiki adiciona realce de sintaxe ao código. Para respostas de IA que misturam prosa com fórmulas ou trechos, você tem a formatação sem empilhar renderizadores separados.
Animação palavra por palavra
A prop animated faz as palavras surgirem uma a uma, com três estilos embutidos: fadeIn, blurIn e slideUp. Você pode definir a duração, a suavização e se dividir por palavra ou por caractere. A opção blurIn é útil com modelos rápidos, já que o desfoque esconde o fato de que muitos tokens chegaram num único lote. Quando o streaming para, a animação é removida por completo.
Reforço de segurança
O Streamdown vem com rehype-sanitize e rehype-harden ativados por padrão. O plugin harden permite definir protocolos permitidos, prefixos de links e prefixos de imagens, e você decide se as URLs de dados para imagens são permitidas. Como a saída da IA pode incluir links que você nunca escreveu, esse controle importa antes que algo chegue a um usuário de verdade.
Arquitetura de plugins
O processamento embutido roda em duas etapas, remark para a sintaxe de Markdown e rehype para a saída HTML. Você pode ampliar ou substituir os padrões passando suas próprias matrizes de plugins, e os padrões são exportados se você quiser acrescentar em vez de começar do zero. Quem tem um pipeline específico em mente não fica preso ao comportamento de fábrica.
Prós e contras
Prós
- Lida com Markdown incompleto com elegância, que é exatamente onde o react-markdown puro trava durante o streaming.
- Grátis e de código aberto, então não há custo de licença nem fatura de API a considerar.
- Amplo suporte de conteúdo para tabelas, matemática, diagramas e código sem bibliotecas extras.
- A animação se limpa sozinha quando o streaming termina, sem sobrecarga de DOM nas mensagens já finalizadas.
- Caminho de migração razoável para projetos já construídos sobre react-markdown.
Contras
- Exige React 19.1.1 ou mais recente para suporte completo e uma configuração de Tailwind CSS, então não cabe em qualquer stack.
- Não há versão hospedada nem construtor visual. Você escreve código de componente, não arrasta elementos.
- A superfície de plugins e configuração é profunda o bastante para que iniciantes dependam bastante da documentação.
- Resolve bem um único problema e não tenta ser um framework de chat completo, então a interface ao redor você ainda constrói por conta própria.
Perguntas frequentes
Ele renderiza Markdown que chega aos poucos dos modelos de IA dentro de um app de React. Em vez de quebrar com texto pela metade, formata o conteúdo parcial e se atualiza conforme mais tokens entram, o que mantém as interfaces de chat legíveis.
Conteúdo relacionado
Explore ferramentas, skills e artigos relacionados a Streamdown.
Alternativas a Streamdown
Forefront
Forefront · ProgramaçãoO Forefront é uma plataforma web para construir com IA de código aberto. Você ajusta os principais modelos de linguagem de código aberto com seus próprios dados, avalia o desempenho deles e os roda por uma API ou os exporta para hospedar por conta própria. Desenvolvedores que querem a conveniência de uma plataforma fechada, mas fazem questão de ser donos dos modelos e dos dados, são o público-alvo aqui.
Startkit
StartKit.AI · ProgramaçãoStartkit é um boilerplate para criar produtos de SaaS com IA e wrappers de IA. Pense nele como um boilerplate para startups de IA com as partes chatas já conectadas: autenticação, pagamentos com Stripe e Lemon Squeezy, limites de uso, e-mail transacional e um kit inicial de API de IA que conversa com OpenAI, Anthropic, Groq ou Llama. Você clona o repositório, define seu preço e começa pela parte do produto que as pessoas realmente pagam. Ele é feito em Next.js sobre React e Tailwind, então boa parte do código boilerplate já parece familiar.
Testim
Tricentis · ProgramaçãoO Testim é uma plataforma de automação de testes com IA para criar e executar testes de ponta a ponta em aplicações web, mobile e Salesforce. Ele se apoia no aprendizado de máquina para manter os testes estáveis quando uma interface muda, então as equipes gastam menos tempo consertando seletores quebrados. Nada mal para uma ferramenta de testes automatizados que você pode começar a usar hoje. Você cria testes gravando ações no navegador e depois adiciona JavaScript quando precisa de mais controle. É uma escolha sólida para equipes de QA ocupadas.