インストール
npm i streamdown誰向けか
このスキルは、すでに React で Markdown を描画しており、それを AI ストリーミング出力向けに替える準備がある人向けである。公式は Streamdown を react-markdown の差し替えとして書き、AI 駆動のストリーミング向けに設計している。すでに Tailwind を使い globals.css を変えられるプロジェクトにも向く。
まだ React アプリが無い人、またはスタイル入口を変えたくない人には向かない。原文は Tailwind の globals.css を更新し、Streamdown が使うユーティリティクラスを Tailwind が検出できるようにすることを求める。それらの変数が未定義なら、コンポーネントは背景や枠が欠け、余白が正しくないことがある。
公式リポジトリは
https://github.com/vercel/streamdown
そのページにすでに書かれたコマンドに従う。使い方は React アプリで AI SDK と一緒に使うと書いてあるが、見える原文に完全なコンポーネント属性表は無い。
3 分で最初の試行を終える
公式が書いたこの 1 本のパッケージ導入経路だけを取る。
前提：今のディレクトリは依存を書き込んでよい React プロジェクトで、このマシンは npm を実行できる。先に確認する：npm i streamdown は依存一覧を変える。まだこのプロジェクトを変えたくなければ実行しない。この段階では本番スタイルを変えず、デプロイもしない。
インストール場所：プロジェクトルートで上記の副作用を確認してから実行する：
npm i streamdown
低リスクな確認：パッケージ導入後、先にエージェントに、変えるべき Tailwind globals.css を読み取り専用で指させ、Tailwind が Streamdown のユーティリティクラスを検出する必要があると説明させる。勝手に CSS を書かせず、現れない @source パスや変数名も作らせない。AI SDK でストリーミング文言を描くなら、先に react-markdown を替えるコンポーネントだけ印し、確認してから変える。
成功の合図：依存に streamdown が現れ、次に必ず globals.css を変えると分かっていること。エージェントがスタイルを飛ばして本番投入できると言ったら止める。
利用例
例 1：既存の react-markdown を Streamdown に替え、AI ストリーミング Markdown を描く。公式インストールコマンドは npm i streamdown。すでに React の描画箇所があり、先に入れてから置換点を対照したい人向け。導入はディスクに書くので、実行前に確認する。原文は「AI SDK と一緒に使える」としか書いておらず、ストリーミングインタフェースのフィールドは列挙していない。props を自分で足さない。
例 2：Tailwind の検出とスタイル変数を揃える。原文は globals.css の更新を求める。さもなければユーティリティが検出されないことがある。変数が未定義なら、背景や枠の欠落、誤った余白が出ることがある。すでにパッケージを入れ、スタイル入口を変える準備がある人向け。CSS を変える前にバックアップするかパッチプレビューを出す。原文はこの段に完全な変数一覧を貼っていないので、変数名を作らない。
利用上の境界
公式インストールコマンドは原文に 1 本だけ書かれている：npm i streamdown。現れないインストーラを主経路に書かない。位置づけは react-markdown の置換で、AI ストリーミング向けであり、非 React や非 Tailwind プロジェクトで使えることは証明しない。
スタイルは硬い前提である。Tailwind globals.css を更新し、それらの変数を定義しなければ見た目が欠ける。AI SDK の用法は「こう使える」までしか書いていない。完全なサンプルコードが無ければ、公式コンポーネント断片があるふりをしない。
公式ページは
https://github.com/vercel/streamdown
エージェントが勧める導入コマンドやスタイルファイル名がそのページと食い違うなら、そのページを優先する。