Streamdown
Vercel · コーディング
StreamdownはReactアプリ向けのストリーミングMarkdownレンダラーで、AIモデルからトークン単位で届くMarkdownをそのまま扱えるように作られている。Vercelによるreact-markdownの代替品であり、閉じていない太字や、最後のバッククォートが欠けたコードブロックといった、ストリーミング出力の厄介な部分を引き受ける。ストリーミングチャット画面やAIストリーミングUIを作るなら、Streamdownは整形がちらついて崩れるのを防ぎ、安定させる。無料。オープンソース。npmパッケージとして配布される。
Streamdown について
Streamdownとは
Streamdownは、AI生成コンテンツを表示するReactアプリ向けのオープンソースMarkdownレンダラーだ。解決する中心的な問題はタイミングにある。通常のレンダラーは完成した文書を受け取る前提で動くが、LLMが回答をストリーミングすると、アプリには断片が届く。文が単語の途中で切れることもある。リンクに閉じ括弧がないこともある。テーブルがヘッダー行より先に現れることもある。react-markdownのような従来のツールは、こうした不完全なブロックで詰まるか、誤って描画する。
Streamdownは不完全なブロックを意図的に解析する。終端のない構文を検出し、すでに届いた部分にスタイルを当て、さらにトークンが届くたびに滑らかに更新する。結果として、壊れたのではなく意図的に見える文字の出現になる。
代償として、これは完成品ではなく開発者向けのツールだ。ダウンロードするアプリも、クリックして回るダッシュボードもない。Reactプロジェクト、Node.js 18以降、そして出力を装飾するためのTailwind CSSの知識が要る。コードを書かない人には向かない。
はじめかた
- パッケージマネージャーでインストールする。たとえば
npm i streamdown、あるいはAI Elementsライブラリからmessageコンポーネントを取得する。 - グローバルCSSファイルに
@source "../node_modules/streamdown/dist/*.js";を含め、StreamdownのソースファイルをTailwindの設定に加える。 <Streamdown>コンポーネントをページやチャットビューに置き、届いたmarkdown文字列を子要素として渡す。- タイピング効果が欲しければ
animatedプロパティで単語ごとのアニメーションを有効にし、isAnimatingをストリーミング状態に結びつける。 - 公開前にrehype-hardenのオプションでリンクと画像を制限し、ユーザーやモデルのコンテンツが信頼できないものを読み込まないようにする。
AIツール情報
Streamdownの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- AIチャットアプリを作るReact開発者
- AIプロダクトのチーム
- Markdownと数式と図をまとめて扱いたいフロントエンドエンジニア
タスク
- ストリーミングするLLM応答の描画
- リッチな出力のチャット画面の構築
- AIの回答でのコードと数式の表示
シーン
- 回答を一語ずつストリーミングするAIアシスタントの出荷
- 多言語の回答の表示
- 信頼できないコンテンツの安全確保
主な機能
ストリーミングに最適化した描画
Streamdownの存在理由はストリーミングの場面そのものにある。**太字 が開いたまま、あるいはリンクに閉じ括弧がないといった不完全なMarkdownを検出し、ブロックを閉じることで何も生のテキストとして表示されないようにする。新しいトークンが届くたび、コンポーネントはその場でスタイルを更新する。チャットUIが単語の完成前に壊れたアスタリスクをちらつかせるのを見たことはないか。それが問題だ。ストリーミングチャット画面を作る者にとって、この滑らかさこそが狙いである。
react-markdownの代替品
プロジェクトがすでにreact-markdownを使っているなら、Streamdownへの差し替えはほぼ検索と置換に近い。コンポーネントは同じmarkdown文字列を子として受け取るため、ほとんどの統合は新しいimport以外にほとんど要らない。この低い移行コストのおかげで、メッセージ表示の書き直しを約束せずに試せる。囲い込みもない。
リッチなコンテンツの対応
Streamdownは素のテキスト以上のものをカバーする。GitHub Flavored Markdownがテーブル、タスクリスト、取り消し線、脚注をもたらす。KaTeXがLaTeXの数式を扱う。Mermaidがコードブロックから図を描画し、Shikiがコードに構文ハイライトを加える。散文と数式やコード片が混ざるAIの回答でも、別々のレンダラーを積み上げずに整形が手に入る。
単語ごとのアニメーション
animated プロパティは単語を1つずつフェードインさせ、fadeIn、blurIn、slideUpの3つのスタイルを内蔵する。長さ、イージング、単語か文字かでの分割を設定できる。blurInは高速なモデルで便利だ。ぼかしが、多くのトークンが一度に届いた事実を隠してくれる。ストリーミングが止まると、アニメーションは完全に取り除かれる。
セキュリティの強化
Streamdownはrehype-sanitizeとrehype-hardenを既定で有効にして出荷される。hardenプラグインでは許可するプロトコル、リンクの接頭辞、画像の接頭辞を設定でき、画像のdata URLを許可するかも決められる。AIの出力には自分が書いていないリンクが含まれうるため、実際のユーザーに届く前にこの制御が効いてくる。
プラグインの構造
組み込みの処理は2段階で動く。remarkがMarkdown構文、rehypeがHTML出力を担う。自前のプラグイン配列を渡して既定を拡張または置き換えられ、既定値もエクスポートされているので、一から作り直すのではなく足し込むこともできる。特定の処理の流れを思い描く人が、既定の挙動に縛られることはない。
メリットとデメリット
メリット
- 不完全なMarkdownを優雅に扱う。これはまさに、素のreact-markdownがストリーミング中に詰まる場面だ。
- 無料かつオープンソースで、ライセンス費用やAPIの請求を考える必要がない。
- テーブル、数式、図、コードへの幅広い対応を、追加ライブラリなしで実現する。
- アニメーションはストリーミング終了後に自ら片づけられ、完了したメッセージにDOMの負荷を残さない。
- すでにreact-markdownで作られたプロジェクトにとって、無理のない移行経路がある。
デメリット
- 完全な対応にはReact 19.1.1以降とTailwind CSSの設定が必要で、あらゆるスタックに合うわけではない。
- ホスト版もビジュアルビルダーもない。要素をドラッグするのではなく、コンポーネントのコードを書く。
- プラグインと設定の範囲が深く、初心者はドキュメントにかなり頼ることになる。
- 1つの問題をうまく解くだけで、完全なチャットフレームワークを目指してはいない。周囲のUIは自分で作ることになる。
よくある質問
Reactアプリの中で、AIモデルから少しずつ届くMarkdownを描画する。途中まで書かれたテキストで崩れる代わりに、部分的な内容を整形し、さらにトークンが届くたびに更新する。これがチャット画面を読みやすく保つ。
関連コンテンツ
Streamdownに関連するツール、スキル、記事を探す。
Streamdownの代替ツール
Forefront
Forefront · コーディングForefrontはオープンソースAIで構築するためのウェブプラットフォームだ。主要なオープンソース言語モデルを自分のデータで微調整し、性能を評価し、API経由で実行したり、エクスポートして自分でホストしたりできる。クローズドなプラットフォームの手軽さを求めつつ、モデルとデータの所有権にはこだわる開発者が対象だ。
Startkit
StartKit.AI · コーディングStartkitは、AI SaaSとAIラッパー製品を作るためのボイラープレートだ。面倒な部分をあらかじめ配線済みにしたAIスタートアップボイラープレートと考えればいい。認証、StripeとLemon Squeezyの決済、利用制限、トランザクションメール、そしてOpenAI、Anthropic、Groq、Llamaと通信するAI APIスターターキットが含まれる。リポジトリをクローンして価格を設定し、ユーザーが実際にお金を払う部分に取りかかれる。ReactとTailwind上のNext.jsで作られているため、ボイラープレートコードの多くはすでに見慣れたものだ。
Testim
Tricentis · コーディングTestimは、Web・モバイル・Salesforceアプリ向けにエンドツーエンドテストを構築して実行するAIテスト自動化プラットフォームだ。機械学習を頼りに、インターフェースが変わってもテストを安定させ、チームが壊れたセレクターの修正に費やす時間を減らす。今日から使い始められる自動テストツールとしては悪くない。ブラウザで操作を録画してテストを作り、より細かい制御が必要なときはJavaScriptを足す。忙しいQAチームにとって堅実な選択肢である。