1. Storybook MCPとは何か？

Storybook MCPは、ローカルで動いているStorybookの情報を、Claude CodeなどのAIエージェントに直接流し込むための「神経系」です。

これまでのAIはコード（テキスト）しか見えていませんでしたが、このプロトコルを通すことで、AIは以下の情報を把握できるようになります。

  • コンポーネントの構造とProps: どんな引数で見た目が変わるか。
  • 現在のレンダリング状態: ブラウザ上でどう見えているか。
  • 既存のストーリー（カタログ）: すでにどんなパーツが存在し、どう使われているか。

2. なぜこれが「開発のゲームチェンジャー」なのか

「Paperclip」がUIを直接触るツールだとすれば、Storybook MCPは「UIの辞書をAIに持たせる」ツールです。

意図を汲み取った「デザインシステム」の維持

例えば、「新しいお知らせ一覧のパーツを作って」と頼むと、AIはStorybook内を検索し、「既存のボタンやカードのコンポーネントを再利用して、デザインに矛盾がないように」構築します。

視覚的なデバッグの自動化

「このボタン、ホバーした時に色が薄すぎる気がする」と伝えれば、AIはStorybook上の該当するストーリーを「表示」し、色のコントラストをチェックして、その場でCSSを修正します。

3. 導入によって変わる3つの景色

  1. 「ドキュメント化」の自動化 新しいコンポーネントを書くだけで、AIが勝手にStorybookのストーリーファイル（.stories.tsx）を作成。エッジケース（文字が長すぎる場合など）のテストパターンも自動で網羅します。
  2. デザインと実装の完全同期 デザイナーからの「もう少し角を丸く」というフィードバックに対し、AIがStorybook上で数パターンを瞬時に生成。人間は「これ」と選ぶだけになります。
  3. オンボーディングの高速化 新しいプロジェクトに入った際、AIに「このプロジェクトで使えるUIパーツを教えて」と聞けば、Storybook MCP経由で現在のコンポーネント資産をプレゼンしてくれます。

4. 始め方は驚くほどシンプル

すでにClaude CodeやCursorを使っているなら、Storybook MCPの追加は一瞬です。

対話開始: 「今のStorybookにあるButtonコンポーネントを、よりモダンなデザインにアップデートして」と話しかける。

サーバーのインストール: npm install @storybook/mcp

設定の追加: ClaudeのMCP設定ファイルにStorybookのURLを登録。