Trocar react-markdown por Streamdown para texto de IA em streaming

Install

npm i streamdown

Para quem

Este skill serve para quem já renderiza Markdown no React e vai trocá-lo por algo feito para saída de IA em streaming. Oficialmente o Streamdown é um substituto direto de react-markdown, desenhado para streaming movido por IA. Também serve para projetos que já usam Tailwind e podem mudar globals.css.

Não serve para quem ainda não tem um app React, ou não quer mudar a entrada de estilos. O texto exige atualizar o globals.css do Tailwind para o Tailwind detectar as classes utilitárias que o Streamdown usa. Se essas variáveis não estiverem definidas, o componente pode ficar sem fundo ou borda, ou com espaçamento errado.

O repositório oficial é

https://github.com/vercel/streamdown

Siga os comandos já escritos nessa página. O uso é escrito como usar com o AI SDK num app React, mas o texto visível não dá uma tabela completa de props.

Primeira tentativa em 3 minutos

Siga só o único caminho de instalação de pacote que o texto oficial escreve.

Pré-requisito: o diretório atual é um projeto React que pode receber dependências, e esta máquina consegue executar npm. Confirme primeiro: npm i streamdown vai mudar a lista de dependências. Se ainda não quiser mudar este projeto, não execute. Esta etapa não deve mudar estilos de produção nem fazer deploy.

Local de instalação: na raiz do projeto, confirme esses efeitos colaterais e então execute:

npm i streamdown

Checagem de baixo risco: após instalar o pacote, peça primeiro ao agente para apontar em somente leitura o globals.css do Tailwind que precisa mudar e explicar que o Tailwind deve detectar as classes utilitárias do Streamdown. Não deixe ele gravar CSS sozinho nem invente caminhos @source ou nomes de variáveis que não aparecem. Se for renderizar texto em streaming com o AI SDK, marque primeiro só o componente que vai substituir react-markdown e mude depois da confirmação.

Sinal de sucesso: streamdown aparece nas dependências e você sabe que o próximo passo deve mudar globals.css. Se o agente pular estilos e disser que já pode ir ao ar, pare.

Casos de uso

Caso 1: trocar o react-markdown existente por Streamdown para renderizar Markdown de IA em streaming. O comando oficial de instalação é npm i streamdown. Serve para quem já tem um lugar de render no React e quer instalar primeiro e depois comparar pontos de troca. Instalar grava em disco; confirme antes de executar. O texto só diz que «pode ser usado com o AI SDK» e não lista campos de interface de streaming; não invente props.

Caso 2: completar a detecção do Tailwind e as variáveis de estilo. O texto exige atualizar globals.css, senão as utilitárias podem não ser detectadas; se as variáveis não estiverem definidas, podem faltar fundos, bordas ou haver espaçamento errado. Serve para quem já instalou o pacote e vai mudar a entrada de estilos. Antes de mudar CSS, faça backup ou mostre um preview de patch. O texto não cola uma lista completa de variáveis neste trecho; não invente nomes de variáveis.

Limites de uso

Só um comando oficial de instalação está escrito: npm i streamdown. Não coloque um instalador que não aparece no caminho principal. Está posicionado como substituto de react-markdown voltado a streaming de IA; não prova uso fora de React ou Tailwind.

Estilos são premissa dura: é preciso atualizar o globals.css do Tailwind e definir essas variáveis, senão a aparência fica incompleta. O uso do AI SDK só está escrito como «dá para usar assim»; se não houver código de exemplo completo, não finja que existe um fragmento oficial de componente.

A página oficial é