react-markdown durch Streamdown für KI-Streaming-Text ersetzen

Install

npm i streamdown

Für wen

Dieses Skill passt zu Leuten, die in React schon Markdown rendern und auf etwas für KI-Streaming-Ausgabe umstellen wollen. Offiziell ist Streamdown ein Drop-in-Ersatz für react-markdown, für KI-getriebenes Streaming entworfen. Es passt auch zu Projekten, die Tailwind schon nutzen und globals.css ändern können.

Es passt nicht zu Leuten ohne React-App oder die den Stileinstieg nicht ändern wollen. Der Ursprungstext verlangt, Tailwinds globals.css zu aktualisieren, damit Tailwind die von Streamdown genutzten Utility-Klassen erkennt. Sind diese Variablen undefiniert, kann dem Baustein Hintergrund oder Rahmen fehlen oder der Abstand falsch sein.

Das offizielle Repository ist

https://github.com/vercel/streamdown

Die auf dieser Seite bereits geschriebenen Befehle befolgen. Die Nutzung ist als Einsatz mit dem AI SDK in einer React-App geschrieben, aber der sichtbare Ursprungstext gibt keine vollständige Props-Tabelle.

Ersten Versuch in 3 Minuten abschließen

Nur den einen Paketinstallationsweg gehen, den der offizielle Text schreibt.

Voraussetzung: das aktuelle Verzeichnis ist ein React-Projekt, das Abhängigkeiten schreiben darf, und dieser Rechner kann npm ausführen. Zuerst bestätigen: npm i streamdown ändert die Abhängigkeitliste. Willst du dieses Projekt noch nicht ändern, nicht ausführen. In diesem Schritt keine Produktionsstile ändern und nicht deployen.

Installationsort: im Projektwurzelverzeichnis die genannten Nebenwirkungen bestätigen, dann ausführen:

npm i streamdown

Risikoarme Prüfung: nach der Paketinstallation zuerst den Agenten schreibgeschützt auf das zu ändernde Tailwind-globals.css zeigen lassen und erklären, dass Tailwind Streamdowns Utility-Klassen erkennen muss. Ihn nicht selbst CSS schreiben lassen und keine nie genannten @source-Pfade oder Variablennamen erfinden. Soll Streaming-Text mit dem AI SDK gerendert werden, zuerst nur den Baustein markieren, der react-markdown ersetzen soll, dann nach Bestätigung ändern.

Erfolgssignal: streamdown erscheint in den Abhängigkeiten, und du weißt, dass als Nächstes globals.css geändert werden muss. Überspringt der Agent Stile und sagt, es könne live gehen, anhalten.

Anwendungsfälle

Fall 1: Vorhandenes react-markdown durch Streamdown ersetzen, um KI-Streaming-Markdown zu rendern. Der offizielle Installationsbefehl ist npm i streamdown. Das passt zu Leuten, die schon einen React-Renderplatz haben und zuerst installieren, dann Ersatzstellen vergleichen wollen. Die Installation schreibt auf die Platte; vor dem Ausführen bestätigen. Der Ursprungstext sagt nur, es „kann mit dem AI SDK genutzt werden“, und listet keine Streaming-Schnittstellenfelder; keine props erfinden.

Fall 2: Tailwind-Erkennung und Stilvariablen vervollständigen. Der Ursprungstext verlangt, globals.css zu aktualisieren, sonst werden Utilities möglicherweise nicht erkannt; sind Variablen undefiniert, können Hintergründe, Rahmen oder falsche Abstände fehlen. Das passt zu Leuten, die das Paket schon installiert haben und den Stileinstieg ändern wollen. Vor CSS-Änderungen sichern oder einen Patch-Preview zeigen. In diesem Abschnitt klebt der Ursprungstext keine vollständige Variablenliste; keine Variablennamen erfinden.

Nutzungsgrenzen

Nur ein offizieller Installationsbefehl steht: npm i streamdown. Keinen nie genannten Installer auf den Hauptweg schreiben. Es ist als Ersatz für react-markdown für KI-Streaming positioniert; es beweist keine Nutzung in Nicht-React- oder Nicht-Tailwind-Projekten.

Stile sind harte Voraussetzung: Tailwind-globals.css muss aktualisiert und jene Variablen definiert werden, sonst fehlt das Erscheinungsbild. Die AI-SDK-Nutzung steht nur als „so kann man es nutzen“; fehlt vollständiger Beispielcode, nicht so tun, als gäbe es ein offizielles Bausteinfragment.

Die offizielle Seite ist