Storybook MCP Server

🚀 ストーリーブック MCP サーバー

このツールはテスト目的で作成されたもので、本番環境での使用は推奨されません。

🎯 目標

この MCP サーバーは以下を目的としています：

• AI モデルが設計コンテキストに基づいて使用可能な UI コンポーネントを提案できるようにする
• デザイナーがコードを書かずにコンポーネントの使用状況にアクセスできるようにする
• Figma の設計を Storybook コンポーネントに実装するプロセスを加速する
• 自然言語で設計と開発をつなぐ

🚀 クイックスタート

始める前に、Storybook の静的ファイルを準備する必要があります。 https://storybook.js.org/docs/sharing/publish-storybook

1. リポジトリをクローンする

git clone https://github.com/m-yoshiro/storybook-mcp.git
cd storybook-mcp

2. 依存関係をインストールする

Bun の使用をおすすめします。

bun install
# または
npm install

3. ビルドする

bun run build
# または
npm run build

4. 設定する

package.json に以下の内容を追加します。

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "node",
      "args": [
        "/< your path>/index.js",
        // オプション：あなたの Storybook 静的 json ファイルへのパス
        "/< your path>/index.json"
      ]
    }
  }
}

サーバーはあなたの Storybook データを読み込み、外部プロキシに MCP ツールを公開します。

💻 利用可能なツール

💡 使用例

🔍 Figma 要素に一致するコンポーネントを見つける

AI に以下のように尋ねます：

"この Figma の 'CTA ボタン' に対応する Storybook コンポーネントはありますか？" ➡️ MCP サーバーは以下の操作を実行します：

• find-component-by-name("cta button")
• get-component-details("PrimaryButton")
• get-component-usage-examples("PrimaryButton")

✨ Figma 部分に基づく UI コードを自動生成する

AI に以下のように尋ねます：

"私たちのデザインシステムを使ってお問い合わせフォームを生成してください" ➡️ MCP サーバーは以下を行います：

• TextField、Textarea、PrimaryButton の使用を提案する
• これらのコンポーネントを使用した JSX 例を提供する

❓ なぜ MCP を選ぶのか？

MCP（モデルコンテキストプロトコル）は、UI コンポーネント、ドキュメント、コードなどのコンテキスト情報に安全かつ効率的にアクセスするための標準インターフェイスを大規模言語モデルに提供します。

あなたの Storybook を MCP と統合することで：

• AI エージェントがコンポーネントを賢く提案できる
• デザイナーと開発者が共有の真実の源を持つ
• 自然言語で UI 生成機能を駆動できる

📁 プロジェクト構造

storybook-mcp/
├── tools/
│   ├── list-components.ts
│   ├── get-component-details.ts
│   ├── get-component-usage-examples.ts
│   └── get-component-variants.ts
└── index.js

👥 貢献者

[ここに貢献者をリストする]

📄 ライセンス

[ここにライセンス情報を指定する]