Storybook MCP Server

官方

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

GitHub

259

文件

Storybook MCP - 貢獻者指南

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

📦 套件

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

@storybook/mcp - 獨立的 MCP 函式庫，用於提供 Storybook 元件知識（可獨立使用）
@storybook/addon-mcp - Storybook 附加元件，可在您的 Storybook 開發伺服器中執行 MCP 伺服器，並從您的本機 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

此儲存庫刻意將市集目錄保存在兩個位置。根目錄目錄支援從 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 應用程式

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

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

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

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

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

格式化與程式碼檢查

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

修訂版本：錯誤修正、文件更新
次要版本：新功能、向後相容的變更
主要版本：重大變更

🤝 貢獻

我們歡迎貢獻！以下是入門方式：

Fork 儲存庫並建立一個功能分支
進行您的變更，遵循上述的程式碼慣例
使用內部 Storybook 實例測試您的變更
如果您的變更值得發布，請建立一個 changeset
提交一個 pull request，並附上清晰的說明

提交前檢查

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

取得協助

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

📄 授權

MIT - 詳情請參閱 LICENSE

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