vercel/streamdown

これは何？

主な機能

• 01react-markdownのドロップイン代替
• 02ストリーミング中の未完成・未終端のMarkdownに対応
• 03GitHub Flavored Markdownの表、タスクリスト、取り消し線に対応
• 04KaTeXによるLaTeX数式の描画
• 05描画ボタン付きのMermaid図
• 06Shikiによるコードのシンタックスハイライト

ユースケース

• ReactまたはNext.jsアプリでLLMのチャット応答を描画する
• コード、表、数式を含むAI生成の回答を表示する
• AIアシスタントが生成したMermaid図を表示する

クイックスタート

1. 1

   パッケージをインストールする

   npm i streamdown
2. 2

   globals.css に Tailwind の @source 行を追加する

3. 3

   React アプリで Streamdown コンポーネントを使ってストリーミング Markdown を描画する

使う前に知っておきたいこと

• !プロジェクトのメタデータではライセンスが明確に指定されていません。
• !正しく描画するには、Tailwind CSS と shadcn/ui スタイルの CSS カスタムプロパティが必要です。

トピック

よくある質問

streamdown とは？

AIモデルからの未完成ブロックを含むストリーミングMarkdownの描画に特化した、react-markdownのドロップイン代替。 Streamdownは、AIモデルの応答のようにトークン単位で届くコンテンツ向けに設計されたReact Markdownレンダラーです。一般的なMarkdownレンダラーでは、閉じられていないコードフェンスや途中まで書かれた表など、テキストのストリーミング中に書式が崩れて表示されることがあります。Streamdownは未完成・未終端のMarkdownブロックを扱えるよう設計されており、出力が増えても読みやすさを保ちます。

streamdown は無料で使えますか？ライセンスは？

streamdown は Other ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

streamdown は今もメンテナンスされていますか？

活発にメンテナンス中。streamdown の最終コミットは 2026年10月19日 です。

streamdown は何に使えますか？

ReactまたはNext.jsアプリでLLMのチャット応答を描画する コード、表、数式を含むAI生成の回答を表示する AIアシスタントが生成したMermaid図を表示する

streamdown のインストール方法は？

パッケージをインストールする: npm i streamdown globals.css に Tailwind の @source 行を追加する React アプリで Streamdown コンポーネントを使ってストリーミング Markdown を描画する

streamdown はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/vercel/streamdown