Streamdown
Vercel · Programmation
Streamdown est un moteur de rendu Markdown en streaming pour les applications React, conçu pour gérer le Markdown au fur et à mesure qu'il arrive des modèles d'IA, token par token. C'est une alternative directe à react-markdown signée Vercel qui prend en charge les parties délicates de la sortie en streaming, comme un texte en gras pas encore fermé ou un bloc de code auquel il manque les accents graves finaux. Si vous construisez une interface de chat en streaming ou n'importe quelle interface IA en streaming, Streamdown garde la mise en forme stable au lieu de la laisser clignoter et se casser. Gratuit. Open source. Distribué comme paquet npm.
À propos de Streamdown
Qu'est-ce que Streamdown
Streamdown est un moteur de rendu Markdown open source pour les applications React qui affichent du contenu généré par IA. Le problème central qu'il résout, c'est le timing. Les moteurs de rendu classiques partent du principe qu'ils reçoivent un document terminé, mais quand un LLM diffuse sa réponse, votre application reçoit des fragments. Une phrase peut se terminer au milieu d'un mot. Un lien peut être privé de son crochet fermant. Un tableau peut apparaître avant sa ligne d'en-tête. Les outils traditionnels comme react-markdown soit bloquent sur ces blocs partiels, soit les affichent de travers.
Streamdown analyse les blocs incomplets à dessein. Il repère la syntaxe non fermée, applique le style à ce qui est déjà arrivé et se met à jour sans à-coups à mesure que d'autres tokens arrivent. Le résultat : un texte qui se révèle et semble voulu, pas cassé.
La contrepartie, c'est qu'il s'agit d'un outil pour développeurs, pas d'un produit fini. Il n'y a pas d'application à télécharger ni de tableau de bord à parcourir. Il vous faut un projet React, Node.js 18 ou plus récent, et un peu d'aisance avec Tailwind CSS pour habiller la sortie. Si vous n'écrivez pas de code, ce n'est pas pour vous.
Pour démarrer
- Installez le paquet avec votre gestionnaire de paquets, par exemple
npm i streamdown, ou récupérez le composant de message dans la bibliothèque AI Elements. - Ajoutez les fichiers sources de Streamdown à votre configuration Tailwind en incluant
@source "../node_modules/streamdown/dist/*.js";dans votre fichier CSS global. - Placez le composant
<Streamdown>dans votre page ou vue de chat, et passez la chaîne markdown entrante comme enfant. - Activez l'animation mot par mot avec la prop
animatedet reliezisAnimatingà votre état de streaming si vous voulez un effet de frappe. - Restreignez les liens et les images avec les options de rehype-harden avant la mise en ligne, pour que le contenu de l'utilisateur ou du modèle ne charge rien en quoi vous n'avez pas confiance.
Informations sur le produit
Aperçu des tarifs, des plateformes compatibles et des performances de Streamdown.
Idéal pour
Les utilisateurs, tâches et cas d'usage où cet outil convient le mieux.
Utilisateurs
- Les développeurs React qui créent des applications de chat IA
- Les équipes produit IA
- Les ingénieurs front-end qui veulent Markdown, mathématiques et diagrammes ensemble
Tâches
- Afficher des réponses LLM en streaming
- Construire des interfaces de chat à sortie riche
- Montrer du code et des formules dans les réponses d'IA
Cas d'usage
- Livrer un assistant IA qui diffuse ses réponses mot par mot
- Afficher des réponses en plusieurs langues
- Garder le contenu non fiable sous contrôle
Fonctionnalités clés
Rendu optimisé pour le streaming
Toute la raison d'être de Streamdown, c'est le cas du streaming. Il détecte le Markdown incomplet, comme un **gras ouvert ou un lien privé de son crochet fermant, et ferme le bloc pour que rien ne s'affiche en texte brut. À mesure que de nouveaux tokens arrivent, le composant met le style à jour sur place. Vous avez déjà vu une interface de chat afficher des astérisques cassés avant qu'un mot se termine ? C'est ça le problème. Pour qui construit une interface de chat en streaming, cette fluidité est précisément l'objectif.
Remplacement direct de react-markdown
Si votre projet utilise déjà react-markdown, passer à Streamdown ressemble beaucoup à un rechercher-remplacer. Le composant prend la même chaîne markdown en enfant, donc la plupart des intégrations n'ont besoin de guère plus qu'un nouvel import. Ce faible coût de migration permet de l'essayer sans s'engager à réécrire votre vue de messages. Aucun verrouillage non plus.
Prise en charge de contenu riche
Streamdown couvre plus que du texte simple. GitHub Flavored Markdown apporte tableaux, listes de tâches, texte barré et notes de bas de page. KaTeX gère les mathématiques LaTeX. Mermaid génère des diagrammes à partir de blocs de code, et Shiki ajoute la coloration syntaxique au code. Pour les réponses d'IA qui mêlent prose et formules ou extraits, vous obtenez la mise en forme sans empiler des moteurs de rendu distincts.
Animation mot par mot
La prop animated fait apparaître les mots un à un, avec trois styles intégrés : fadeIn, blurIn et slideUp. Vous pouvez régler la durée, la courbe d'accélération et le découpage par mot ou par caractère. L'option blurIn est pratique avec les modèles rapides, car le flou masque le fait que beaucoup de tokens sont arrivés en un seul lot. Quand le streaming s'arrête, l'animation est retirée complètement.
Renforcement de la sécurité
Streamdown est livré avec rehype-sanitize et rehype-harden activés par défaut. Le plugin harden vous laisse définir les protocoles autorisés, les préfixes de liens et les préfixes d'images, et vous décidez si les URL de données pour les images sont permises. Comme la sortie de l'IA peut contenir des liens que vous n'avez jamais écrits, ce contrôle compte avant que quoi que ce soit n'atteigne un utilisateur réel.
Architecture de plugins
Le traitement intégré se déroule en deux étapes, remark pour la syntaxe Markdown et rehype pour la sortie HTML. Vous pouvez étendre ou remplacer les valeurs par défaut en passant vos propres tableaux de plugins, et les valeurs par défaut sont exportées si vous préférez ajouter plutôt que repartir de zéro. Ceux qui ont un pipeline précis en tête ne sont pas enfermés dans le comportement d'origine.
Avantages et inconvénients
Avantages
- Gère le Markdown incomplet avec élégance, exactement là où react-markdown seul bloque pendant le streaming.
- Gratuit et open source, donc aucun coût de licence ni facture d'API à prévoir.
- Large prise en charge du contenu pour les tableaux, les mathématiques, les diagrammes et le code, sans bibliothèques supplémentaires.
- L'animation se nettoie toute seule à la fin du streaming, sans surcharge de DOM sur les messages terminés.
- Chemin de migration raisonnable pour les projets déjà bâtis sur react-markdown.
Inconvénients
- Nécessite React 19.1.1 ou plus récent pour un support complet et une configuration Tailwind CSS, donc il ne convient pas à toutes les stacks.
- Pas de version hébergée ni de constructeur visuel. Vous écrivez du code de composant, vous ne glissez pas des éléments.
- La surface de plugins et de configuration est assez profonde pour que les débutants s'appuient beaucoup sur la documentation.
- Il résout bien un seul problème et ne cherche pas à être un framework de chat complet, donc l'interface autour, vous la construisez vous-même.
Questions fréquentes
Il affiche le Markdown qui arrive progressivement des modèles d'IA dans une application React. Au lieu de casser sur du texte à moitié terminé, il met en forme le contenu partiel et se met à jour à mesure que d'autres tokens arrivent, ce qui garde les interfaces de chat lisibles.
Contenus associés
Découvrez des outils, des compétences et des articles liés à Streamdown.
Alternatives à Streamdown
Forefront
Forefront · ProgrammationForefront est une plateforme web pour construire avec de l'IA open source. Elle vous laisse affiner les principaux modèles de langage open source sur vos propres données, évaluer leurs performances et les exécuter via une API ou les exporter pour les héberger vous-même. Les développeurs qui veulent le confort d'une plateforme fermée mais tiennent à rester propriétaires de leurs modèles et de leurs données sont le public visé ici.
Startkit
StartKit.AI · ProgrammationStartkit est un boilerplate pour créer des produits SaaS d'IA et des wrappers d'IA. Voyez-le comme un boilerplate de startup IA avec les parties ennuyeuses déjà branchées : authentification, paiements Stripe et Lemon Squeezy, limites d'usage, e-mail transactionnel et un kit de démarrage d'API IA qui parle à OpenAI, Anthropic, Groq ou Llama. Vous clonez le dépôt, fixez votre prix et attaquez la partie du produit pour laquelle les gens paient vraiment. Il repose sur Next.js au-dessus de React et Tailwind, donc une bonne partie du code boilerplate vous semble déjà familière.
Testim
Tricentis · ProgrammationTestim est une plateforme d'automatisation des tests dopée à l'IA, qui sert à créer et exécuter des tests de bout en bout sur des applications web, mobiles et Salesforce. Elle s'appuie sur l'apprentissage automatique pour garder les tests stables quand une interface change, alors les équipes passent moins de temps à réparer des sélecteurs cassés. Pas mal pour un outil de tests automatisés que vous pouvez utiliser dès aujourd'hui. Vous créez des tests en enregistrant des actions dans un navigateur, puis vous ajoutez du JavaScript quand vous avez besoin de plus de contrôle. C'est un choix solide pour une équipe QA bien occupée.