Storybook MCP Server

公式

エージェントがUIコンポーネントのストーリーを自動で作成・テストできるように支援します

GitHub
258

ドキュメント

Storybook MCP - コントリビューターガイド

Storybook MCP アドオンモノレポへようこそ！このプロジェクトは、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 コマンドが開始するもの:

  • http://localhost:6006 上の内部テスト Storybook インスタンス
  • ウォッチモードのアドオン (変更が自動的に反映されます)
  • http://localhost:6006/mcp で利用可能な 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 アプリの操作

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

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

Storybook MCP を使用して、すべてのボタンストーリーがどのように見えるかを表示して

  1. この最初のプロンプトの後、変更を加えるたびに 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 attributes 構文を使用します。
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)

ヘルプ

📄 ライセンス

MIT - 詳細は LICENSE を参照

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