Streamdown

Der ganze Daseinszweck von Streamdown ist der Streaming-Fall. Er erkennt unvollständiges Markdown, etwa ein offenes **fett oder einen Link ohne schließende Klammer, und schließt den Block, damit nichts als Rohtext erscheint. Während neue Token eintreffen, aktualisiert die Komponente das Styling an Ort und Stelle. Schon einmal gesehen, wie eine Chat-Oberfläche kaputte Sternchen aufblitzen lässt, bevor ein Wort fertig ist? Das ist das Problem. Wer eine Chat-Oberfläche für Streaming baut, für den ist genau diese Ruhe das Ziel.

Wenn Ihr Projekt bereits react-markdown nutzt, ist der Wechsel zu Streamdown fast ein Suchen und Ersetzen. Die Komponente nimmt dieselbe Markdown-Zeichenkette als Kind, sodass die meisten Integrationen kaum mehr als einen neuen Import brauchen. Diese niedrigen Umstellungskosten machen es leicht, sie auszuprobieren, ohne sich zu einer Neufassung Ihrer Nachrichtenansicht zu verpflichten. Auch eine Bindung gibt es nicht.

Streamdown deckt mehr als reinen Text ab. GitHub Flavored Markdown bringt Tabellen, Aufgabenlisten, Durchstreichungen und Fußnoten. KaTeX kümmert sich um LaTeX-Mathematik. Mermaid rendert Diagramme aus Codeblöcken, und Shiki fügt Code eine Syntaxhervorhebung hinzu. Für KI-Antworten, die Prosa mit Formeln oder Schnipseln mischen, bekommen Sie die Formatierung, ohne getrennte Renderer zu stapeln.

Die Prop animated blendet Wörter einzeln ein, mit drei eingebauten Stilen: fadeIn, blurIn und slideUp. Sie können Dauer, Beschleunigung und die Aufteilung nach Wort oder Zeichen festlegen. Die Option blurIn ist bei schnellen Modellen praktisch, da die Unschärfe verbirgt, dass viele Token in einem einzigen Schwung eingetroffen sind. Wenn das Streaming stoppt, wird die Animation vollständig entfernt.

Streamdown wird mit standardmäßig aktivierten rehype-sanitize und rehype-harden ausgeliefert. Das harden-Plugin lässt Sie erlaubte Protokolle, Link-Präfixe und Bild-Präfixe festlegen, und Sie entscheiden, ob Daten-URLs für Bilder zulässig sind. Da KI-Ausgaben Links enthalten können, die Sie nie geschrieben haben, zählt diese Kontrolle, bevor etwas einen echten Nutzer erreicht.

Die eingebaute Verarbeitung läuft in zwei Stufen, remark für die Markdown-Syntax und rehype für die HTML-Ausgabe. Sie können die Voreinstellungen erweitern oder ersetzen, indem Sie eigene Plugin-Arrays übergeben, und die Voreinstellungen werden exportiert, wenn Sie ergänzen statt neu anfangen möchten. Wer eine bestimmte Pipeline im Kopf hat, ist nicht auf das Standardverhalten festgelegt.