ストリームダウンの統合プロセスは、3つの主要ステップに分かれている:
- 依存的なインストール:npm/pnpmなどで最新版をインストールする。
npm i streamdown
Node.js ≥ 18 および React ≥ 19.1.1 環境のサポートが必要です。 - スタイル構成:コア・スタイルシートをグローバルCSSファイル(globals.cssなど)に追加する。
@import '../node_modules/streamdown/dist/index.css';
プロジェクトの実際の構造に応じて、node_modulesのパスを調整する必要がある。 - 基本的な使い方:Markdownコンテンツを導入し、通常のReactコンポーネントのようにラップします。
import { Streamdown } from 'streamdown';
<Streamdown>{yourMarkdownText}</Streamdown>
特に、構文解析をリアルタイムで行うことが重要であるため、以下のことを推奨する。parseIncompleteMarkdown属性をデフォルトのtrueに設定します。レンダリングコンポーネントをカスタマイズする必要がある場合(リンクの振る舞いを上書きするなど)はcomponentsカバレッジ・ルールを提案する。
この答えは記事から得たものである。Streamdown: AIストリーミングの応答性を追求したMarkdownレンダラについて































