Streamdown: AIストリーミングの応答性を追求したMarkdownレンダラ

StreamdownはVercel社が開発したアプリケーションです。 反応 よく知られたライブラリとして使用できる。 react-markdown このツールは、AIモデルが生成したストリーミング・テキストのMarkdownレンダリングを直接置き換えるものです。このツールの中心的な設計目標は、AIモデルによって生成されたストリーミング・テキストを処理する際に遭遇するMarkdownレンダリングの問題に対処することです。AIチャットのようなアプリケーションでは、テキストは逐語的またはチャンクごとに生成されるため、Markdown構文がトランジットで不完全になることがよくあります（例えば、太字のマークアップ ** Streamdownは、Markdown構文の不完全な塊や閉じられていない塊を優雅に処理し、オンザフライで正しくレンダリングします。これにより、ユーザはレスポンス全体が生成されるのを待つのではなく、フォーマットされたテキストをリアルタイムで見ることができるため、ユーザエクスペリエンスが大幅に向上します。パフォーマンスとセキュリティに重点を置きながら、GitHubスタイルのMarkdown (GFM)、数式、コードハイライト、ダイアグラムのサポートを統合しています。

機能一覧

• ストリーミングに最適化中核となる利点は、連続的に入力される不完全なMarkdownテキストのストリームをスムーズに処理し、レンダリングできることです。
• 互換性 react-markdownとして利用可能 react-markdown は
• 閉じていない文法の説明:: 閉じていない太字、斜体、コード、リンク、見出し構文を正しく解析し、スタイルを設定する機能。
• GFMをサポート表、タスクリスト、取り消し線など、GitHubスタイルのMarkdownをサポートします。
• 数式のレンダリングKaTeX による LaTeX 数式のレンダリングをサポート。
• マーメイド・チャートコードブロック内のMermaid構文をチャートにレンダリングし、レンダリング切り替えボタンを提供することができます。
• コードのシンタックスハイライトShiki ライブラリを使って、コードブロックのシンタックスハイライトを美しく表示します。
• 安全第一をベースにしている。 harden-react-markdown レンダリングされたコンテンツのセキュリティを確保するために構築されています。
• パフォーマンス最適化メモライズド・レンダリングを採用することで、更新効率を高め、不要な再レンダリングを削減。

ヘルプの使用

Streamdownは、主にReactプロジェクトで使用されるNPMパッケージです。開発者が迅速に統合できるように設計された、非常にシンプルなインストールと使用プロセスを持っています。

1.インストール

まず streamdown.を使用することが可能である。 npmそしてyarn もしかしたら pnpm などのパッケージ・マネージャーを使ってインストールする。

利用する npm インストール：

npm i streamdown

利用する pnpm インストール：

pnpm add streamdown

2.コンフィギュレーション・スタイル

レンダリングされたHTML要素に正しいスタイル（コードブロックの背景色、参照ブロックの境界線など）を持たせるために、StreamdownはCSSファイルを持ち込む必要があります。以下のコードをプロジェクトのグローバルCSSファイルに追加する必要があります。 globals.css または同様の文書。

@import "../node_modules/streamdown/dist/index.css";

以下のことを確認してください。 @import を正しく指すように、プロジェクト構造の node_modules フォルダー

3.基本的な使い方

Reactコンポーネントで Streamdown コンポーネントを作成し、その子要素としてレンダリングするMarkdown文字列を渡します。

これは最も基本的な例のひとつである：

import { Streamdown } from 'streamdown';
export default function MyPage() {
const markdownContent = "# 你好，世界！\n\n这是一个 **流式传输** 的 *Markdown* 文本。";
return (
<article>
<Streamdown>{markdownContent}</Streamdown>
</article>
);
}

上記の例ではmarkdownContent 文字列はストリームダウンによって解析され、対応するHTMLタグにレンダリングされる。

4.バーセルAI SDKと組み合わせて使用します。

Streamdownの最大の価値は、リアルタイムに生成されるテキスト・ストリームの処理にあります。次の例は、Vercel AI SDKの useChat フックは、AIのチャット返信をリアルタイムでレンダリングするために組み合わせて使用される。

'use client';
import { useChat } from '@ai-sdk/react';
import { useState } from 'react';
import { Streamdown } from 'streamdown';
export default function ChatComponent() {
// useChat 钩子管理聊天状态和消息
const { messages, sendMessage, status } = useChat();
const [input, setInput] = useState('');
// 处理表单提交
const handleSubmit = (e) => {
e.preventDefault();
if (input.trim()) {
sendMessage({ role: 'user', content: input });
setInput('');
}
};
return (
<div>
{/* 遍历并显示所有消息 */}
<div>
{messages.map(message => (
<div key={message.id}>
<strong>{message.role === 'user' ? 'You: ' : 'AI: '}</strong>
{/* AI 的回复内容会通过 Streamdown 实时渲染 */}
<Streamdown>{message.content}</Streamdown>
</div>
))}
</div>
{/* 用户输入表单 */}
<form onSubmit={handleSubmit}>
<input
value={input}
onChange={e => setInput(e.target.value)}
disabled={status !== 'idle'}
placeholder="说点什么..."
/>
<button type="submit" disabled={status !== 'idle'}>
发送
</button>
</form>
</div>
);
}

この例ではuseChat 返品 messages この配列は、AIが応答を生成するとリアルタイムで更新される。Streamdown コンポーネント message.contentそのため、新しいコンテンツ・フラグメント（トークン）が届くと、即座にフォーマットされたHTMLにレンダリングされ、ユーザーはテキストとフォーマットが同時に表示されるのを見る。

5.コンポーネントのプロパティ（プロップス）

ストリームダウン・サポート react-markdown そして、ストリーミングに特化したオプションをいくつか追加した：

• children (string): レンダリングされるMarkdown文字列。
• parseIncompleteMarkdown (boolean、デフォルト値。 true): 閉じていないMarkdown構文を解析してレンダリングするかどうか。これはStreamdownのコア機能であり、オンにしておくことを推奨します。
• components (オブジェクト）：デフォルトの HTML 要素レンダラーをオーバーライドするために使用します。たとえば、カスタム <a> タグ・コンポーネントでリンクを処理する。
• remarkPlugins (配列）。 remark Markdown構文を拡張するプラグインの配列。デフォルトの remarkGfm (サポートフォームやタスクリストなど）と remarkMath.
• rehypePlugins (配列）。 rehype HTMLを処理するためのプラグインの配列。 rehypeKatex (数式のレンダリング用）。
• shikiTheme (文字列、デフォルト値。 github-light): コードブロックのシンタックスハイライトのためのShikiトピック名。

アプリケーションシナリオ

1. AIチャットボット
   GPTのような大規模な言語モデルと対話する場合、モデルの応答は逐語的または単語ごとに生成されます。Streamdownを使用することで、このような断片的なテキスト・ストリームをリアルタイムでコードブロック、リスト、引用などの完全にフォーマットされた段落にレンダリングすることができ、ユーザー・インタラクションの即時性とエクスペリエンスを劇的に改善します。
2. リアルタイム・コラボレーション Markdownエディタ
   複数のユーザーが同じMarkdownドキュメントを同時に編集できるアプリケーションでは、Streamdownを使用して、各ユーザーにリアルタイムのプレビュー表示を生成することができます。ユーザーによって入力されたMarkdown構文が不完全であっても、プレビューエリアは可能な限り正確にスタイルを表示します。
3. オンライン・ドキュメントとノート・アプリケーションのライブ・プレビュー
   ブログ・パブリッシング・システム、ナレッジ・ベース、個人的なノート作成ソフトウェアなど、Markdown入力ボックスを含むあらゆるアプリケーションに対して、StreamdownはリアルタイムWYSIWYGプレビュー・ウィンドウを提供し、ユーザーは入力しながら最終的なレンダリングを確認することができます。

品質保証

1. Q:ストリームダウンと比較してどうですか？ react-markdown との核心的な違いは何か？
   A: 核心的な違いは、"ストリーム "を扱う能力にある。react-markdown は完全なMarkdownドキュメントをシングルパスでレンダリングするように設計されています。Streamdownは不完全で連続的にタイプされたテキスト・ストリームを処理するために最適化されており、クローズされていない構文（たとえば **文本) である。 react-markdown 無理だ。
2. Q: なぜストリーミング・レンダリングがAIアプリケーションにとって重要なのですか？
   A: AIアプリケーションでは、モデルが全文の応答を生成するのを待つのに数秒以上かかることがあります。ストリーミング・レンダリングでは、ユーザーは最初の単語が生成されるとすぐに読み始めることができ、テキストが生成されると同時にリアルタイムのフォーマットが表示されます。
3. Q: どのようなMarkdown拡張機能をサポートしていますか？
   A: GitHubスタイルMarkdown (GFM)をネイティブでサポートしています。また、LaTeX数式（KaTeXを使用）やMermaidチャートのサポートもプラグインで統合されています。
4. Q: Streamdownを使用するためのシステム要件や考慮事項は何ですか？
   A: このプロジェクトには、Node.js 18以降とReact 19.1.1以降が必要です。さらに、スタイルが正しく表示されるように、グローバルCSSファイルにStreamdownのスタイルシートを導入してください。