Remplacer react-markdown par Streamdown pour le texte IA en flux

Install

npm i streamdown

À qui ça s'adresse

Ce skill convient à qui rend déjà du Markdown dans React et s'apprête à le remplacer par quelque chose conçu pour la sortie IA en flux. Officiellement Streamdown est un remplacement immédiat de react-markdown, conçu pour le flux piloté par l'IA. Il convient aussi aux projets qui utilisent déjà Tailwind et peuvent changer globals.css.

Il ne convient pas à qui n'a pas encore d'application React, ou refuse de changer l'entrée de styles. Le texte exige de mettre à jour le globals.css de Tailwind pour que Tailwind détecte les classes utilitaires utilisées par Streamdown. Si ces variables ne sont pas définies, le composant peut manquer de fond, de bordure, ou avoir un espacement incorrect.

Le dépôt officiel est

https://github.com/vercel/streamdown

Suivez les commandes déjà écrites sur cette page. L'usage est écrit comme une utilisation avec l'AI SDK dans une application React, mais le texte visible ne donne pas de table complète des props.

Premier essai en 3 minutes

Ne prenez que le seul chemin d'installation de paquet écrit officiellement.

Prérequis : le répertoire courant est un projet React autorisé à recevoir des dépendances, et cette machine peut exécuter npm. Confirmez d'abord : npm i streamdown changera la liste des dépendances. Si vous ne voulez pas encore changer ce projet, n'exécutez pas. Cette étape ne doit pas changer les styles de production ni déployer.

Emplacement d'installation : à la racine du projet, confirmez ces effets de bord, puis exécutez :

npm i streamdown

Vérification à bas risque : après l'installation, demandez d'abord à l'agent de pointer en lecture seule le globals.css Tailwind à changer, et d'expliquer que Tailwind doit détecter les classes utilitaires de Streamdown. Ne le laissez pas écrire le CSS tout seul, et n'inventez pas de chemins @source ni de noms de variables absents. Si vous rendrez du texte en flux avec l'AI SDK, marquez d'abord seulement le composant qui remplacera react-markdown, puis changez-le après confirmation.

Signal de succès : streamdown apparaît dans les dépendances, et vous savez que l'étape suivante doit changer globals.css. Si l'agent saute les styles et dit que c'est prêt à mettre en ligne, arrêtez-vous.

Cas d'usage

Cas 1 : remplacer le react-markdown existant par Streamdown pour rendre du Markdown IA en flux. La commande d'installation officielle est npm i streamdown. Cela convient à qui a déjà un emplacement de rendu React et veut d'abord installer, puis comparer les points de remplacement. L'installation écrit sur le disque ; confirmez avant d'exécuter. Le texte dit seulement qu'on « peut l'utiliser avec l'AI SDK » et ne liste pas les champs d'interface de flux ; n'inventez pas de props.

Cas 2 : compléter la détection Tailwind et les variables de style. Le texte exige de mettre à jour globals.css, sinon les utilitaires peuvent ne pas être détectés ; si les variables sont indéfinies, fonds, bordures ou espacements erronés peuvent manquer. Cela convient à qui a déjà installé le paquet et s'apprête à changer l'entrée de styles. Avant de changer le CSS, sauvegardez ou montrez un aperçu de rustine. Le texte ne colle pas de liste complète de variables dans ce passage ; n'inventez pas de noms de variables.

Limites d'usage

Une seule commande d'installation officielle est écrite : npm i streamdown. Ne mettez pas un installeur absent sur le chemin principal. Il est positionné comme remplacement de react-markdown, orienté flux IA ; il ne prouve pas l'usage hors React ou hors Tailwind.

Les styles sont un prérequis dur : il faut mettre à jour le globals.css Tailwind et définir ces variables, sinon l'apparence sera incomplète. L'usage AI SDK n'est écrit que comme « on peut s'en servir ainsi » ; s'il n'y a pas d'exemple complet, ne faites pas comme s'il existait un fragment de composant officiel.

La page officielle est