概要

Storybook MCPは、Storybookチームによる公式統合で、モデルコンテキストプロトコル（MCP）の力をコンポーネント駆動のUI開発に提供します 。これにより、既存のStorybookが豊富で構造化されたデータソースに変わり、AIエージェントがリアルタイムにクエリを実行できます。

コンポーネントメタデータ、ストーリー、プロパティタイプ、使用例、およびドキュメントを最適化されたトークン効率の良い形式で公開することで、Storybook MCPはAIエージェントが汎用的または一貫性のないコードを生成するのではなく、チームのデザインシステムに沿ったUIを構築できるようにします。

主な機能

• コンポーネントの発見とコンテキスト: エージェントはコンポーネントをリストアップし、詳細なプロパティ、ストーリー、コントロール、ドキュメントを取得できます。
• 最適化されたマニフェスト: API、バリアント、デザイントークン、使用スニペットを含む、精選された機械可読ペイロード（コンポーネントマニフェスト）を提供します。これは生のソースコードよりもはるかに効率的です。
• ストーリー生成とテスト: エージェントはコンポーネント用の新しいストーリーを書き、自主的にテストを実行できます。自己修正のためのフィードバックループが組み込まれています。
• シームレスな統合: @storybook/addon-mcpパッケージからインストール可能です。MCPサーバーはStorybook開発サーバーと一緒に実行されます（通常は/mcpエンドポイント）。
• スタンドアロンライブラリ: カスタムセットアップには@storybook/mcpを独立して使用できます。
• Reactサポート（v10.3以降）: 現在はReactに最適化されており、追加のフレームワークが計画されています。

仕組み

1. アドオンをインストール: npx storybook add @storybook/addon-mcp
2. Storybook開発サーバーを実行。
3. MCP対応のAIエージェント（Claude、Cursorなど）をMCPエンドポイントに接続。
4. エージェントは、コンテキスト対応のコード生成のために、稼働中のデザインシステムに直接アクセスできるようになります。

これにより、エージェントがコードを生成し、ストーリーでプレビューし、テストを実行し、問題を修正するという反復的なワークフローが生まれ、人間の絶え間ない介入なしに行えます。

開発者にとってのメリット

• AI出力の高品質化: エージェントは確立されたパターンとコンポーネントAPIに従うため、幻覚（ハルシネーション）と手戻りを減少させます。
• トークン効率: より小さく、焦点を絞ったコンテキストペイロードは、パフォーマンス向上とコスト削減を意味します。
• 本番UIへのガードレール: テストフィードバックループにより、エージェントが基準に準拠したコードを出荷するのに役立ちます。
• フロントエンド開発の加速: デザインシステムチーム、大規模コードベース、エージェントワークフローに最適です。

ユースケース

• 既存のコンポーネントライブラリを再利用しながら、新しいUI機能を生成。
• Figmaデザインを、既存のStorybookコンポーネントと一致する本番コードに変換。
• コンポーネントカバレッジのための自律的なストーリー作成とテスト。
• AIコーディングツール（Cursor、Windsurf、またはカスタムエージェントなど）にフロントエンド固有のインテリジェンスを強化。
• チーム環境での大規模デザインシステム全体の一貫性維持。

インストールと開始方法

Storybook 10.3以降（Reactレンダラー）が必要です。

# Storybookをアップグレード
npx storybook@latest upgrade

MCPアドオンの追加

npx storybook add @storybook/addon-mcp

次に `storybook dev` を実行し、エージェントを `http://localhost:6006/mcp`（ポートは変動する場合があります ）に接続します。

詳細なドキュメントについては、[公式 Storybook AI / MCP ドキュメント](https://storybook.js.org/docs/ai/mcp/overview)をご覧ください 。

## 関連リソース

- 公式ブログ: [Storybook MCP for React](https://storybook.js.org/blog/storybook-mcp-for-react/)
- GitHub: [storybookjs/mcp](https://github.com/storybookjs/mcp)
- npm: [@storybook/addon-mcp](https://www.npmjs.com/package/@storybook/addon-mcp)