Storybook Mcp

Storybook MCP

Playwright を使用してあらゆる Storybook サイトに接続し、ドキュメントをリアルタイムで取得する汎用 MCP サーバーです。

Cursor、Claude Desktop、Windsurf など、MCP（Model Context Protocol）に対応するあらゆる AI やクライアントで使用できます。

機能

• あらゆる Storybook で動作 - フォーマットとバージョンを自動検出します
• ライブブラウジング - Playwright を利用してリアルタイムに情報を取得します
• 自動検出 - Storybook のフォーマットを自動的に検出します
• 単一ファイル - index.js のみで、ビルド手順は不要です

MCP の設定

Cursor — ワンクリックインストール

npx を使用する（推奨）

MCP クライアントの設定に追加します（例：Cursor の場合は ~/.cursor/mcp.json または設定 → MCP、Claude の場合は claude_desktop_config.json など）。

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "npx",
      "args": ["-y", "@raksbisht/storybook-mcp"]
    }
  }
}

デフォルトの Storybook URL を指定する場合（任意）：

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "npx",
      "args": ["-y", "@raksbisht/storybook-mcp"],
      "env": {
        "STORYBOOK_URL": "https://your-storybook.com"
      }
    }
  }
}

ソースから設定する（開発用）

git clone https://github.com/raksbisht/storybook-mcp.git
cd storybook-mcp
npm install

続いて、MCP の設定に追加します。

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "node",
      "args": ["/path/to/storybook-mcp/index.js"]
    }
  }
}

利用可能なツール

ツール	説明
connect	Storybook の URL に接続し、接続状態を取得します。他のツールを使用する前に必須です。
list	ナビゲーション内のコンポーネントとストーリーを一覧表示します。任意の項目：category、full（階層構造）。
search	名前またはパスでコンポーネントを検索します。必須項目：query。
get_docs	コンポーネントまたはストーリーのドキュメント、コード例、コンテンツを取得します。必須項目：path。任意の項目：full、format（markdown/structured）。
screenshot	コンポーネントまたはストーリーのスクリーンショットを撮影します。必須項目：path。

例

1. connect({ url: "https://storybook.js.org" })
2. search({ query: "button" })
3. get_docs({ path: "components-button--basic" })

互換性

一般的な Storybook のデプロイ環境に対応しています（さまざまな URL 形式や index.json ベースの構成）。

ライセンス

MIT