Storybook MCPサーバーをClaude Codeに繋ぐ手順とフレームワーク対応
Storybook公式MCPサーバーの導入手順と3つのツールセット、componentsManifestが要るフレームワークとの対応表を解説します。既存コンポーネントを再利用したUI生成のプレビュー機能です。
Storybookは公式のMCPサーバーを持っており、Claude CodeにコンポーネントカタログとドキュメントをMCP経由で読ませられます。既存のコンポーネントを再利用したUI生成、生成したUIのストーリー作成、インタラクションテストの実行までを1つのMCPサーバーで扱う設計です。この機能はプレビュー段階にあり、APIは今後変わる可能性があります。
MCPプロトコル自体の仕組みはMCPとは、デザインファイルからのコード生成を扱うFigma MCPサーバーの使い方とは役割が異なります。
Storybook MCPサーバーとは
Storybook MCPサーバーとは、実行中のStorybookをAIエージェントに繋ぎ、コンポーネントの仕様・使用例・ドキュメントを理解させたうえで、ストーリー生成やテスト実行までを任せられるようにする公式MCPサーバーです。エージェントは手元のコンポーネントを再利用してUIを生成し、生成したUIをストーリーとして書き出してプレビューし、インタラクションテストとアクセシビリティチェックを自動実行します。テストで問題が見つかれば、エージェント自身が修正して再実行する「自己修復ループ」を作れる点が設計の中心です。
フレームワーク別の対応状況
MCPサーバー自体はすべてのStorybookプロジェクトで動きます。ただし提供するツールセットのうち、コンポーネントの仕様を読ませる「docsツールセット」だけは、componentsManifestというJSON形式のメタデータを生成できるフレームワークに限られます。
| フレームワーク | 有効化する機能 | docsツールセットでのComponent API |
|---|---|---|
| React系全般(react-vite / react-webpack5 / nextjs / nextjs-vite等) | 有効化する機能componentsManifest | docsツールセットでのComponent API対応 |
@storybook/angular-vite | 有効化する機能componentsManifest | docsツールセットでのComponent API対応 |
@storybook/vue3-vite | 有効化する機能componentsManifestとexperimentalDocgenServer | docsツールセットでのComponent API対応 |
@storybook/angular(Webpack版) | 有効化する機能manifest非対応 | docsツールセットでのComponent API非対応 |
| その他のフレームワーク | 有効化する機能manifest非対応 | docsツールセットでのComponent API非対応 |
componentsManifestに対応していないフレームワークでも、ストーリーの生成・プレビュー・テスト実行を扱う「developmentツールセット」と「testingツールセット」はフレームワークを問わず動きます。docsツールセットだけが使えない状態になります。
導入手順
1. アドオンをインストールする
npx storybook add @storybook/addon-mcpStorybookの開発サーバーを起動すると、http://localhost:6006/mcp(ポート番号は環境による)でMCPサーバーが立ち上がります。ブラウザでこのURLを開くと、利用可能なツール一覧とマニフェストデバッガーへのリンクが表示されます。
2. componentsManifestを有効化する(docsツールセットを使う場合)
.storybook/main.tsでcomponentsManifestを有効にします。
const config: StorybookConfig = {
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
features: {
componentsManifest: true,
},
};
export default config;対応フレームワークの表にない環境ではこの設定は効かず、docsツールセットは利用不可のまま、development・testingの2ツールセットだけが使える状態になります。
3. Claude CodeにMCPサーバーを追加する
claude mcp add --transport http storybook http://localhost:6006/mcpポート番号は実際に起動しているStorybookのものに置き換えます。複数プロジェクトで同時に使う場合は、区別しやすい名前を付けておくと後で迷いません。
4. CLAUDE.mdでエージェントの振る舞いを指定する
MCPサーバーを追加しただけでは、Claudeが自発的にツールを使うとは限りません。CLAUDE.mdに、コンポーネントのプロパティを推測せず必ずdocsツールセットで確認する、といった指示を明記しておくと、存在しないプロパティを使ったコードを生成する事故を防げます。
3つのツールセット
Storybook MCPサーバーが提供するツールは、development・docs・testingの3つのツールセットに分かれています。
| ツールセット | 代表的なツール | 主な役割 |
|---|---|---|
| development | 代表的なツールstories-preview / stories-find-by-component / stories-changed | 主な役割ストーリーの生成・プレビュー・変更検知 |
| docs | 代表的なツールdocs-list / docs-show / docs-show-story | 主な役割コンポーネントの仕様・使用例の参照(componentsManifest必須) |
| testing | 代表的なツールtest-run | 主な役割インタラクションテスト・アクセシビリティチェックの実行と結果の解釈 |
stories-previewは、接続しているエージェントがMCP Appsに対応していればチャット内にストーリーのプレビューをそのまま表示し、対応していなければStorybook上のリンクを返します。Storybook Testのセットアップ自体が無い場合、testingツールセットのtest-runは実行対象がないため機能しません。
実際の使い方の流れ
Storybook MCPサーバーの3つのツールセットは、単体で使うより組み合わせたときに真価を発揮します。公式ドキュメントが示す典型的な流れの1つが、ログインフォームの生成です。
- エージェントがdocsツールセットの
docs-listで候補となるコンポーネントを探し、ユーザー名入力用のTextInputとパスワード入力用のTextInput(typeプロパティをpasswordにする)、送信用のButtonを見つける docs-showで各コンポーネントの詳細なプロパティを確認し、それらを組み合わせてLoginFormコンポーネントを生成する- developmentツールセットで、LoginFormの各状態(通常時・エラー時・送信中等)を示すストーリーを生成する
- testingツールセットの
test-runでアクセシビリティチェックを実行し、送信ボタンの色のコントラスト比が不足していることを検出する - docsツールセットで参照した既存のテーマカラーに沿って色を修正し、再度
test-runで問題が解消したことを確認する
この一連の流れがすべて1つのMCPサーバー内で完結し、エージェントは既存のコンポーネントとデザイントークンの外に出ることなくUIを作り切れます。テストの再実行まで自動化されている点が、単にコードを生成するだけのAIツールとの違いです。
Figma MCPとの役割の違い
Figma MCPサーバーとStorybook MCPサーバーは、どちらもUI開発向けのMCPサーバーですが役割が異なります。Figma MCPはデザインファイルからコードを生成する入口を担い、Storybook MCPは生成後のコードを既存のコンポーネントライブラリと整合させ、ストーリーとテストで検証する出口を担います。両方を併用すると、Figmaのデザインを起点にコードを生成し、Storybook MCPのdocsツールセットで既存コンポーネントとの重複や命名の不一致をチェックし、testingツールセットで動作を確認する、という一連の流れをエージェントに任せられます。Reactのデザインシステムをコードベースと同期させる別のアプローチはClaude Code design-syncの使い方でも扱っています。
よくあるつまずき
docsツールセットが「利用不可」と表示される
フレームワークがcomponentsManifestに対応していないか、対応していてもcomponentsManifest機能フラグが有効になっていないかのどちらかです。まず対応フレームワークの表で自分の環境を確認し、対応している場合はmain.tsの設定を見直します。
experimentalDocgenServer有効時にマニフェストのJSONルートが404になる
experimentalDocgenServerを有効にしていると、開発サーバーはcomponents.jsonのJSONルートに対して404を返す仕様です。これはバグではなく、マニフェストがディスクに書き出されずdocgenサービスからオンデマンドで組み立てられる方式に変わるためです。@storybook/angular-viteと@storybook/vue3-viteでは常にこの挙動になり、Reactプロジェクトでは機能を有効にした場合のみ発生します。生成済みビルドから読むか、マニフェストデバッガーを使います。
複数のStorybookを合成しているのに一部のコンポーネントが見えない
StorybookのComposition機能で複数のStorybookを結合している場合、合成先のStorybookがマニフェストを持っていないと、その分のコンポーネント情報はMCPサーバーの応答に含まれません。合成元それぞれでcomponentsManifestが有効になっているかを確認します。
エージェントがMCPツールを使ってくれない
claude mcp addでサーバーを追加しただけでは、Claudeは既存のコンポーネント知識より一般的な実装パターンを優先してコードを書くことがあります。CLAUDE.mdにMCPツールの利用を明示的に指示する記述が無い場合によく起きる挙動です。ツール名を含めて「UIコンポーネントを扱うときは必ずyour-project-sb-mcpのツールを使う」のように具体的に書くと改善します。
対応するAIエージェント
Storybook MCPサーバーは標準のMCPプロトコルに準拠しているため、Claude Code以外の主要なエージェントからも接続できます。公式ドキュメントが挙げているのはClaude Code・OpenAI Codex・Cursor・Google Gemini CLI・VS Code Copilotで、いずれもMCPサーバーをツールプロバイダーとして追加する設定に対応しています。接続方法自体はエージェントごとに異なり、Claude Codeでは本記事で扱ったclaude mcp addが公式の追加手段です。複数のエージェントを併用しているチームでは、mcp-addというサードパーティ製CLIを使うと、エージェントごとの設定差分を吸収して同じコマンドから追加できます。
まとめ
Storybook MCPサーバーは、アドオンのインストールとcomponentsManifestの有効化、claude mcp add --transport httpでの接続という3ステップで使い始められます。フレームワークによってdocsツールセットの可否が分かれる点だけ押さえておけば、development・testingの2ツールセットはどのStorybookプロジェクトでも動きます。プレビュー機能である以上、ツール名やレスポンス形式は今後変わる可能性があるため、CLAUDE.mdに書いた指示が古いツール名を参照していないか、アップデート時には見直すのが安全です。