# Storybook MCP

Storybook MCPは公式のModel Context Protocol（MCP）サーバーで、AIエージェントとStorybookを接続し、機械可読なコンポーネントメタデータ、ストーリー、プロパティ、ドキュメントを提供します。これによりエージェントはUIコンポーネントを知的に再利用し、テストを用いて自己修正できます。

Canonical URL: https://a2a-mcp.org/entry/storybook-mcp-ja

Language: ja

Category: MCP Servers

Updated: 2026-04-09

## 概要

Storybook MCPは、Storybookチームによる公式統合で、[モデルコンテキストプロトコル（MCP）](https://modelcontextprotocol.io/)の力をコンポーネント駆動の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レンダラー）が必要です。

```bash
# 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)

## Tags

- ストーリーブック
- MCP
- AIエージェント
- React
- UIコンポーネント
- デザインシステム
- フロントエンド
- TypeScript

## Sources

- [Project website](https://storybook.js.org/docs/ai/mcp/overview)