Storybook MCP

ヒント

このリポジトリは、Storybook v10.6.0 以降、storybookjs/storybook に移動しました。最新のドキュメントはそちらをご確認ください。

---

Storybook MCP

Storybook MCP Addon モノレポへようこそ！このプロジェクトでは、UI コンポーネントの情報や開発ワークフローを公開する MCP（Model Context Protocol）サーバーを提供し、AI エージェントが Storybook をより効率的に利用できるようにします。

📦 パッケージ

このモノレポには、主に 4 つのパッケージが含まれています。

• @storybook/mcp - Storybook コンポーネントのナレッジを提供するスタンドアロン MCP ライブラリ（単独で使用できます）
• @storybook/addon-mcp - Storybook の開発サーバー内で MCP サーバーを実行する Storybook アドオン。ローカルの Storybook から @storybook/mcp の機能も利用できます
• @storybook/claude-code-plugin - Storybook のセットアップスキルと MCP の設定を備えた Claude Code プラグイン
• @storybook/codex-plugin - Storybook のセットアップスキルと MCP の設定を備えた Codex プラグイン

各パッケージには、ユーザー向けドキュメントを記載した独自の README があります。このドキュメントは、これらのパッケージを開発、テスト、またはコントリビュートする方を対象としています。

🚀 クイックスタート

GitHub から Claude プラグインと Codex プラグインをテストする

外部のテスターは、このリポジトリの main ブランチからプラグインマーケットプレイスを直接インストールできます。ローカルへのクローンは不要です。

Codex (詳細はこちら)

codex plugin marketplace add storybookjs/mcp --ref main
codex plugin add storybook@storybook

マーケットプレイスとプラグインを確認します。

codex plugin marketplace list
codex plugin list --marketplace storybook

Claude Code (詳細はこちら)

claude plugin marketplace add storybookjs/mcp@main --scope user
claude plugin install storybook@storybook --scope user

プラグインと MCP サーバーを確認します。

claude plugin list --json
claude mcp list

このリポジトリでは、マーケットプレイスカタログを意図的に 2 か所に置いています。ルートのカタログは storybookjs/mcp からの GitHub インストールに対応し、パッケージ内のカタログはローカルでのパッケージ開発スクリプトに対応しています。相対プラグインソースのパスを除き、両者は同一である必要があり、パッケージの検証によってその同一性が確認されます。

前提条件

• Node.js 24+ - このプロジェクトには Node.js 24 以降が必要です（.nvmrc を参照）
• pnpm 10.19.0+ - パッケージマネージャーの厳密な要件です（package.json で強制されます）

# Use the correct Node version
nvm use

# Install pnpm if you don't have it
npm install -g [email protected]

インストール

# Clone the repository
git clone https://github.com/storybookjs/mcp.git
cd addon-mcp

# Install all dependencies (for all packages in the monorepo)
pnpm install

開発ワークフロー

# Build all packages
pnpm build

# Start development mode (watches for changes in all packages)
pnpm dev

# Run unit tests in watch mode
pnpm test

# Run unit tests once
pnpm test:run

# Run Storybook with the addon for testing
pnpm --filter internal-storybook storybook

Storybook コマンドを実行すると、次のものが起動します。

• 内部テスト用 Storybook インスタンス（http://localhost:6006）
• アドオンのウォッチモード。変更は自動的に反映されます
• MCP サーバー（http://localhost:6006/mcp）

🛠️ よく使う作業

開発

turbo watch build コマンドを実行すると、すべてのパッケージがウォッチモードで動作し、変更を加えると自動的に再ビルドされます。

# Start development mode for all packages
pnpm turbo watch build

# This is usually all you need - starts Storybook AND watches addon for changes
pnpm storybook

ビルド

# Build all packages
pnpm build

テスト

このモノレポでは、ルートに一元化された Vitest 設定を配置し、各パッケージ用のプロジェクトを設定しています。

# Watch tests across all packages
pnpm test

# Run tests once across all packages
pnpm test:run

# Run tests with coverage and CI reporters
pnpm test:ci

MCP サーバーのデバッグ

MCP Inspector を使って、MCP サーバーの機能をデバッグおよびテストできます。

# Launches the MCP inspector (requires Storybook to be running)
pnpm inspect

.mcp.inspect.json の設定を使用して、ローカルの MCP サーバーに接続します。

または、次の curl コマンドを使って、すべて正常に動作することを確認できます。

# test that the mcp server is running
# use port 6006 to test the addon-mcp server instead
curl -X POST \
  http://localhost:13316/mcp      \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "tools/list",
    "params": {}
  }'

# test a specific tool call
curl -X POST http://localhost:13316/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 2,
    "method": "tools/call",
    "params": {
      "name": "list-all-documentation",
      "arguments": {}
    }
  }'

Storybook を使ったデバッグ

次のコマンドで Storybook を起動できます。

pnpm storybook

これにより、すべてがビルドされ、addon-mcp とともに Storybook が起動します。その後、コーディングエージェントを http://localhost:6006/mcp（または設定したアドオンのエンドポイント）に接続して、動作を試すことができます。

MCP アプリの操作

preview-stories ツールの一部としてレンダリングされる MCP アプリを操作およびデバッグするには、次の手順を実行します。

1. VSCode の Insiders ビルドを使用します
2. chat.mcp.apps.enabled 設定が有効になっていることを確認します
3. ルートで pnpm storybook を実行して、リポジトリの Storybook をウォッチモードで起動します
4. VSCode を再起動し、.vscode/mcp.json ファイルを開いて、Storybook MCP が「実行中」と表示されていることを確認します。そうでない場合は「開始」をクリックします。
5. VSCode でチャットを開き、次のようなプロンプトを入力します。

Storybook MCP を使って、すべてのボタンのストーリーがどのように見えるかを教えてください

6. 最初のプロンプトを送信した後は、変更を加えるたびに Storybook が自動的に再起動します。完全に起動するまで待ってから、「ツールをもう一度実行してください」 とプロンプトを入力できます。

ツール呼び出しをより細かく制御するには、MCPJam のインスペクターも使用できます。

フォーマットとリンティング

# Format all files with Prettier
pnpm format

# Check formatting without changing files
pnpm format:check

# Lint code with oxlint
pnpm lint

# Lint with GitHub Actions format (for CI)
pnpm lint:ci

# Check package exports with publint
pnpm publint

🔍 品質チェック

モノレポには、CI で実行される複数の品質チェックが含まれています。

# Run all checks (build, test, lint, format, typecheck, publint)
pnpm check

# Run checks in watch mode (experimental)
pnpm check:watch

# Type checking (uses tsc directly, not turbo)
pnpm typecheck

# Type checking with turbo (for individual packages)
pnpm turbo:typecheck

# Testing with turbo (for individual packages)
pnpm turbo:test

📝 コード規約

TypeScript とインポート

相対インポートでは、必ずファイル拡張子を含めてください。

// ✅ Correct
import { foo } from './bar.ts';

// ❌ Wrong
import { foo } from './bar';

• JSON のインポートでは、インポート属性の構文を使用します。

import pkg from '../package.json' with { type: 'json' };

🚢 リリースプロセス

このプロジェクトでは、バージョン管理に Changesets を使用しています。

# 1. Create a changeset describing your changes
pnpm changeset

PR を作成する際、変更によってリリースが必要になる場合は changeset を追加してください。

• パッチ：バグ修正、ドキュメントの更新
• マイナー：新機能、後方互換性のある変更
• メジャー：破壊的変更

🤝 コントリビュート

コントリビュートを歓迎します。始めるには、次の手順に従ってください。

1. リポジトリをフォークし、機能ブランチを作成します
2. 上記のコード規約に従って変更を加えます
3. 内部 Storybook インスタンスを使って変更をテストします
4. リリースが必要な変更の場合は、changeset を作成します
5. 明確な説明を添えてプルリクエストを送信します

送信前の確認事項

• コードがエラーなくビルドできる（pnpm build）
• テストが成功する（pnpm test:run）
• コードがフォーマットされている（pnpm format）
• コードのリンティングが完了している（pnpm lint）
• 型チェックが成功する（pnpm typecheck）
• MCP インスペクターまたは内部 Storybook を使って変更をテスト済み
• 必要に応じて changeset を作成済み（pnpm changeset）

サポートを受ける

• アイデアと機能リクエスト：ディスカッションを開始
• バグ報告：イシューを作成
• 質問：GitHub Discussionsで質問してください

📄 ライセンス

MIT - 詳細は LICENSE をご覧ください

---

注：このプロジェクトは実験段階にあり、現在も活発に開発されています。Storybook に AI エージェントを統合する最適な方法を模索する中で、API やアーキテクチャが変更される可能性があります。