Storybook MCP

官方

幫助代理自動編寫和測試您UI元件的故事

GitHub

270

試用此 MCP贊助

你可以用 Storybook MCP 做什麼？

列出 Storybook 文件 — 請您的 AI 呼叫 list-all-documentation，從 MCP 伺服器取得所有可用的元件文件。
檢查元件故事 — 讓您的 AI 查詢 MCP 伺服器，探索按鈕故事及其他 UI 元件在 Storybook 中的呈現方式。
偵錯 MCP 連線 — 使用 tools/list 和 tools/call 端點，確認伺服器是否正常運作，並測試特定的工具呼叫。
連接編碼代理 — 將您的 AI 助手指向本機 MCP 端點 http://localhost:6006/mcp，以便在開發過程中存取 Storybook 元件知識。

文件

[!TIP] 此儲存庫已於 Storybook v10.6.0 遷移至 storybookjs/storybook。請前往該處查看更新的文件。

Storybook MCP

歡迎來到 Storybook MCP Addon 單一儲存庫！此專案透過提供 MCP（Model Context Protocol）伺服器，公開 UI 元件資訊與開發工作流程，讓 AI 代理程式能更有效率地與 Storybook 協作。

📦 套件

此單一儲存庫包含四個主要套件：

@storybook/mcp - 獨立的 MCP 函式庫，用於提供 Storybook 元件知識（可獨立使用）
@storybook/addon-mcp - Storybook 擴充功能，可在您的 Storybook 開發伺服器內執行 MCP 伺服器，並包含 @storybook/mcp 從您本地 Storybook 的功能
@storybook/claude-code-plugin - Claude Code 外掛，具備 Storybook 設定技能與 MCP 設定
@storybook/codex-plugin - Codex 外掛，具備 Storybook 設定技能與 MCP 設定

每個套件都有各自的 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

此儲存庫刻意將市集目錄保留在兩個位置。根目錄的目錄支援從 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 pnpm@10.19.0

安裝

# 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 應用程式

若要使用並除錯作為 preview-stories 工具一部分所呈現的 MCP 應用程式，您可以：

使用 VSCode 的 Insiders 版本
確保已啟用 chat.mcp.apps.enabled 設定
在根目錄執行 pnpm storybook，以監看模式啟動儲存庫的 Storybook
重新啟動 VSCode，開啟 .vscode/mcp.json 檔案，並確保 Storybook MCP 標記為「執行中」，否則請按一下「開始」。
在 VSCode 中開啟聊天，並輸入類似以下的提示：

使用 Storybook MCP 向我展示所有按鈕故事的樣貌

在第一次提示之後，每當您進行變更，Storybook 都會自動重新啟動。等待其完全就緒，然後您可以提示「再次執行工具」。

您也可以使用 MCPJam 的 inspector 來對工具呼叫進行更底層的控制。

格式化與 Lint

# 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：

Patch：錯誤修正、文件更新
Minor：新功能、向後相容的變更
Major：破壞性變更

🤝 貢獻

我們歡迎貢獻！以下是開始的方式：

Fork 儲存庫並建立功能分支
進行變更，遵循上述程式碼慣例
測試變更，使用內部 Storybook 實例
建立 changeset，如果您的變更需要發佈
提交 pull request，附上清晰的描述

提交前

程式碼可無錯誤建置（pnpm build）
測試通過（pnpm test:run）
程式碼已格式化（pnpm format）
程式碼已通過 lint（pnpm lint）
型別檢查通過（pnpm typecheck）
變更已使用 MCP inspector 或內部 Storybook 測試
如有必要，已建立 changeset（pnpm changeset）

取得協助

想法與功能請求：發起討論
錯誤回報：開啟 issue
問題：在 GitHub Discussions 中提問

📄 授權

MIT - 詳情請參閱 LICENSE

注意：此專案為實驗性質，且正在積極開發中。API 與架構可能會隨著我們探索將 AI 代理程式與 Storybook 整合的最佳方式而有所變更。