Sustituir react-markdown por Streamdown para texto IA en streaming

Install

npm i streamdown

Para quién

Este skill encaja en quien ya renderiza Markdown en React y se dispone a cambiarlo por algo pensado para salida IA en streaming. Oficialmente Streamdown es un reemplazo directo de react-markdown, diseñado para streaming impulsado por IA. También encaja en proyectos que ya usan Tailwind y pueden cambiar globals.css.

No encaja en quien aún no tiene una app React, o no quiere cambiar la entrada de estilos. El texto exige actualizar el globals.css de Tailwind para que Tailwind detecte las clases utilitarias que usa Streamdown. Si esas variables no están definidas, el componente puede carecer de fondo o borde, o tener un espaciado incorrecto.

El repositorio oficial es

https://github.com/vercel/streamdown

Sigue los comandos ya escritos en esa página. El uso se escribe como usarlo con el AI SDK en una app React, pero el texto visible no da una tabla completa de props.

Primera prueba en 3 minutos

Sigue solo el único camino de instalación de paquete que escribe el texto oficial.

Requisito: el directorio actual es un proyecto React al que se le pueden escribir dependencias, y esta máquina puede ejecutar npm. Confirma primero: npm i streamdown cambiará la lista de dependencias. Si aún no quieres cambiar este proyecto, no lo ejecutes. Este paso no debe cambiar estilos de producción ni desplegar.

Lugar de instalación: en la raíz del proyecto, confirma esos efectos secundarios y luego ejecuta:

npm i streamdown

Comprobación de bajo riesgo: tras instalar el paquete, pide primero al agente que señale en solo lectura el globals.css de Tailwind que hay que cambiar y explique que Tailwind debe detectar las clases utilitarias de Streamdown. No dejes que escriba CSS por su cuenta ni inventes rutas @source ni nombres de variables que no aparecen. Si vas a renderizar texto en streaming con el AI SDK, marca primero solo el componente que sustituirá react-markdown y cámbialo tras confirmar.

Señal de éxito: streamdown aparece en las dependencias y sabes que el siguiente paso debe cambiar globals.css. Si el agente se salta los estilos y dice que ya se puede publicar, para.

Casos de uso

Caso 1: sustituir el react-markdown existente por Streamdown para renderizar Markdown IA en streaming. El comando oficial de instalación es npm i streamdown. Encaja en quien ya tiene un hueco de render en React y quiere instalar primero y luego comparar puntos de sustitución. Instalar escribe en disco; confirma antes de ejecutar. El texto solo dice que «se puede usar con el AI SDK» y no lista campos de interfaz de streaming; no inventes props.

Caso 2: completar la detección de Tailwind y las variables de estilo. El texto exige actualizar globals.css o las utilidades pueden no detectarse; si las variables no están definidas, pueden faltar fondos, bordes o haber un espaciado erróneo. Encaja en quien ya instaló el paquete y va a cambiar la entrada de estilos. Antes de cambiar CSS, haz copia o muestra un parche. El texto no pega una lista completa de variables en este tramo; no inventes nombres de variables.

Límites de uso

Solo hay un comando oficial de instalación escrito: npm i streamdown. No pongas un instalador que no aparece en el camino principal. Está planteado como reemplazo de react-markdown orientado a streaming IA; no prueba el uso fuera de React o Tailwind.

Los estilos son un requisito duro: hay que actualizar el globals.css de Tailwind y definir esas variables, o el aspecto quedará incompleto. El uso del AI SDK solo está escrito como «se puede usar así»; si no hay código de ejemplo completo, no finjas que hay un fragmento oficial de componente.

La página oficial es