369文字
2分
編集

Storybook 10.3、React向けMCPアドオンでエージェントにコンポーネント文脈とテスト手段を提供

#Storybook #React #Chromatic

エージェントがコードベースのコンポーネント仕様を把握しにくく、既存パターンから外れた出力になりがちという課題に対し、Storybook 側から stories・API・ドキュメントなどのメタデータを MCP で渡し、ストーリー執筆やプレビュー、テスト実行までエージェントのループに組み込む流れ。React プロジェクトでは Storybook 10.3 から利用可能。デザインシステム・アプリ・サードパーティなど複数の Storybook を composition で束ねた入力を MCP サーバがまとめて扱うため、エージェントが接続先を増やさずに横断参照しやすい。

#主な機能・特徴

Reshaped コンポーネントライブラリを使った UI 生成で Baseline と MCP ドキュメント参照を対比した例では、次表のとおり。

比較軸Baseline 対 MCP Docs
品質（コード利用）約 12.8% 改善
速度（所要時間）約 2.76 倍
コスト（トークン）約 27% 削減
  • 作業完了後にチャット UI へライブストーリーを埋め込み、ホバーなどの見た目確認をクライアント内で行える。MCP Apps による埋め込みと、詳細確認用のストーリーリンク。
  • コンポーネントテストとアクセシビリティテストをエージェントが起動。関連度の高い範囲に絞った実行でフィードバックを短くし、失敗時は自動修正または人間判断が必要な場合の通知。
  • Chromatic が Storybook MCP のリモート公開を標準対応し、無償で利用可能。品質チェック・バージョニング・セキュアな認可を備える。

対応は現時点で React のみ。他フレームワーク向け MCP は年内の予定。

bash
npx storybook@latest upgrade
npx storybook add @storybook/addon-mcp
npx mcp-add --type http --url "http://localhost:6006/mcp" --scope project

#参考文献