ブログに Storybook 公式 MCP サーバーを導入

はじめに

Storybook 公式から @storybook/addon-mcp という MCP（Model Context Protocol）アドオンが登場しました。

このアドオンを使うと、Storybook の開発サーバー内で MCP サーバーが起動し、Claude Code からコンポーネント情報に直接アクセスできるようになります。

この記事では、実際にこのブログプロジェクトに導入した手順と、MCP サーバーの機能について紹介します。

Storybook MCP とは

Storybook MCP は、AI エージェントが Storybook 環境でより効率的に作業できるようにするための Model Context Protocol サーバーです。

主な特徴は以下の通りです。

Storybook の開発サーバー内で MCP サーバーが起動し、http://localhost:6006/mcp でアクセスできるようになります。Claude Code の .mcp.json でこのエンドポイントを指定すると、AI がコンポーネント情報を参照できるようになります。

利用可能なツールとして、UI Building Instructions（ストーリー作成のベストプラクティス）、Story URLs（生成したストーリーへのリンク）、Component List（全コンポーネントの一覧）、Component Documentation（個別コンポーネントの詳細情報）が提供されます。

現在は実験的な段階で、API やアーキテクチャは変更される可能性があります。

導入手順

実際の導入手順を順を追って説明します。

1. パッケージのインストール

まず、@storybook/addon-mcp をインストールします。

npm install --save-dev @storybook/addon-mcp

2. Storybook の設定

.storybook/main.ts にアドオンを追加します。

import type { StorybookConfig } from "@storybook/nextjs-vite";

const config: StorybookConfig = {
  stories: [
    "../components/**/*.mdx",
    "../components/**/*.stories.@(js|jsx|mjs|ts|tsx)"
  ],
  addons: [
    "@chromatic-com/storybook",
    "@storybook/addon-docs",
    "@storybook/addon-onboarding",
    "@storybook/addon-a11y",
    "@storybook/addon-vitest",
    {
      name: "@storybook/addon-mcp",
      options: {
        toolsets: {
          dev: true,    // 開発用ツールを有効化
          docs: true,   // ドキュメント用ツールを有効化
        },
        experimentalFormat: "markdown",  // マークダウン形式で出力
      },
    }
  ],
  framework: {
    name: "@storybook/nextjs-vite",
    options: {}
  }
};

export default config;

設定のポイントは以下の通りです。

toolsets.dev を true にすると、開発用の MCP ツールが有効になります。toolsets.docs を true にすると、ドキュメント用のツール（list-all-components、get-component-documentation）が追加されます。

experimentalFormat: "markdown" を指定すると、コンポーネント情報がマークダウン形式で出力されます。これにより、AI が情報を読み取りやすくなります。

ドキュメント用ツールの有効化

ドキュメント用ツール（list-all-components、get-component-documentation）を使用する場合、Storybook 10.1.0 以上が必要です。現在は next 版（10.1.0-beta.1）で利用可能です。

.storybook/main.ts で experimentalComponentsManifest 機能フラグを有効にします。

const config: StorybookConfig = {
  features: {
    experimentalComponentsManifest: true,
  },
  // ...
};

このフラグを有効にすると、list-all-components で全コンポーネントの一覧を取得できるようになり、get-component-documentation で個別コンポーネントの詳細情報（Props の型定義、ストーリー、ソースコードへのリンク）にアクセスできるようになります

3. Claude Code の設定

プロジェクトルートに .mcp.json を作成します。

claude mcp add storybook-mcp --transport http http://localhost:6006/mcp --scope project

このコマンドを実行すると、.mcp.json が作成されます。

{
  "mcpServers": {
    "storybook-mcp": {
      "type": "http",
      "url": "http://localhost:6006/mcp"
    }
  }
}

4. Storybook の起動

Storybook を起動すると、MCP サーバーが自動的に起動します。

npm run storybook

ターミナルに以下のようなログが表示されれば成功です。

╭───────────────────────────────────────────────────╮
│                                                   │
│   Storybook 10.0.8 for nextjs-vite started        │
│   122 ms for manager and 625 ms for preview       │
│                                                   │
│    Local:            http://localhost:6006/       │
│    On your network:  http://192.168.11.8:6006/    │
│                                                   │
╰───────────────────────────────────────────────────╯

MCP サーバーの動作確認

MCP サーバーが正しく動作しているか確認してみましょう。

MCP Inspector での確認

MCP Inspector を使うと、利用可能なツールを確認できます。

npx @modelcontextprotocol/inspector http://localhost:6006/mcp

ブラウザで Inspector が開き、以下のツールが表示されます。

• get_ui_building_instructions: UI 構築のベストプラクティスを取得
• get_story_urls: ストーリーの URL を取得
• list-all-components: 全コンポーネントの一覧を取得
• get-component-documentation: 個別コンポーネントの詳細情報を取得

curl での確認

curl コマンドで直接 MCP サーバーにリクエストを送ることもできます。

curl -X POST http://localhost:6006/mcp \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}'

レスポンスとして、利用可能なツールのリストが返ってきます。

{
  "jsonrpc": "2.0",
  "id": 1,
  "result": {
    "tools": [
      {
        "name": "get_ui_building_instructions",
        "description": "Get instructions for building UI components with Storybook",
        "inputSchema": {
          "type": "object",
          "properties": {}
        }
      },
      {
        "name": "list-all-components",
        "description": "List all available components in Storybook",
        "inputSchema": {
          "type": "object",
          "properties": {}
        }
      },
      ...
    ]
  }
}

利用可能な MCP ツール

MCP サーバーが提供する主要なツールを紹介します。

get_ui_building_instructions

Storybook でストーリーを作成する際のベストプラクティスを取得します。

このツールは、AI に対してストーリーの作成タイミングやモジュールのモック方法などを指示します。例えば、「新しいコンポーネントを作成する際は、必ずストーリーも作成する」といったガイドラインを提供します。

get_story_urls

生成したストーリーへのリンクを有効な URL に変換します。

AI がストーリーを生成した後、ユーザーがすぐにブラウザで確認できるように、正しい URL を生成します。例えば、BlogPostCard コンポーネントの Default ストーリーなら、http://localhost:6006/?path=/story/components-blogpostcard--default といった URL になります。

list-all-components

Storybook に登録されている全コンポーネントの一覧を取得します。

例えば、このブログでは以下のコンポーネントが登録されています。

• BlogPostCard: ブログ記事カード
• Breadcrumb: パンくずリスト
• CodeBlock: コードブロック
• TableOfContents: 目次

各コンポーネントには、タイトル、ストーリー数、ファイルパスなどの情報が含まれます。

get-component-documentation

個別コンポーネントの詳細情報を取得します。

コンポーネント名を指定すると、以下の情報が返ってきます。

• コンポーネントの説明
• Props の型定義
• 利用可能なストーリー
• ソースコードへのリンク

例えば、BlogPostCard の情報を取得すると、post プロパティの型（BlogPost）や、利用可能なストーリー（Default, LongTitle, NoExcerpt, WithImage）が確認できます。

Claude Code との連携

Claude Code から MCP サーバーにアクセスしてみましょう。

コンポーネント一覧の取得

Claude Code で以下のように依頼すると、MCP サーバーからコンポーネント一覧を取得できます。

利用可能なコンポーネントを教えてください

Claude Code は list-all-components ツールを呼び出し、以下のような情報を返します。

このプロジェクトには以下のコンポーネントがあります：

1. BlogPostCard (Components/BlogPostCard)
   - 4 stories
   - /components/BlogPostCard.stories.tsx

2. Breadcrumb (Components/Breadcrumb)
   - 3 stories
   - /components/Breadcrumb.stories.tsx

3. CodeBlock (Components/CodeBlock)
   - 2 stories
   - /components/CodeBlock.stories.tsx

4. TableOfContents (Components/TableOfContents)
   - 2 stories
   - /components/TableOfContents.stories.tsx

コンポーネント情報の取得

特定のコンポーネントの詳細情報を取得することもできます。

BlogPostCard コンポーネントの詳細を教えてください

Claude Code は get-component-documentation ツールを呼び出し、Props の型定義やストーリーの情報を返します。

ストーリーの生成

新しいコンポーネントを作成する際、Claude Code に依頼すると、ベストプラクティスに従ったストーリーを生成してくれます。

新しく Pagination コンポーネントを作成したので、ストーリーも作ってください

Claude Code は get_ui_building_instructions ツールを参照し、既存のストーリーと同じ形式で新しいストーリーを生成します。

プロジェクト構成

このブログプロジェクトの構成は以下の通りです。

kusumoto-blog/
├── .storybook/
│   └── main.ts              # Storybook 設定
├── .mcp.json                # MCP サーバー設定
├── components/
│   ├── BlogPostCard.tsx
│   ├── BlogPostCard.stories.tsx
│   ├── Breadcrumb.tsx
│   ├── Breadcrumb.stories.tsx
│   ├── CodeBlock.tsx
│   ├── CodeBlock.stories.tsx
│   ├── TableOfContents.tsx
│   └── TableOfContents.stories.tsx
└── package.json

各コンポーネントには対応するストーリーファイルが用意されています。ストーリーファイルは、コンポーネントの使い方やバリエーションを示すサンプルコードです。

Storybook MCP の今後

Storybook 公式の MCP アドオンはまだ実験的な段階で、GitHub Discussions で今後の方向性が議論されています。

Agentic Workflow の提案

現在の公式アドオンでは、主に以下の機能が提供されています。

AI がストーリーを生成する際のガイドライン提供と、生成したストーリーへのリンク生成です。これにより、AI がベストプラクティスに従ってストーリーを作成し、ユーザーがすぐに確認できるようになります。

将来の拡張案

議論の中では、以下のような機能拡張も提案されています。

• AI がインタラクションテストの合否やアクセシビリティ違反をチェックし、自身の作業をレビューする機能
• ストーリーのカバレッジ情報を提供し、不足しているテストを提案する機能
• AI が生成した UI の変更点をユーザーが確認しやすい専用 UI を Storybook 内に構築する案

これらの機能が実装されれば、AI を使ったコンポーネント開発がさらに効率的になりそうです。

まとめ

今回は、Storybook 公式の @storybook/addon-mcp を Next.js ブログプロジェクトに導入しました。

導入手順はシンプルで、パッケージをインストールして設定を追加するだけです。Storybook を起動すると、http://localhost:6006/mcp で MCP サーバーが利用可能になります。

Claude Code の .mcp.json でエンドポイントを指定すると、AI がコンポーネント情報にアクセスできるようになります。コンポーネント一覧の取得や、ストーリーの生成が簡単にできるようになりました。

まだ実験的な段階ですが、将来的にはテストのレビューやカバレッジ分析など、より高度な機能が追加される予定です。

Storybook を使っているプロジェクトなら、ぜひ試してみてください。npm install @storybook/addon-mcp だけで始められます。

参考リンク

• Storybook MCP GitHub
• @storybook/addon-mcp
• Claude Code MCP Servers
• Model Context Protocol