# Storybook MCP

Storybook MCP 是一款官方的模型上下文協定（MCP）伺服器，能將 AI 助手連接到您的 Storybook，提供機器可讀的組件元數據、故事、屬性和文件，讓助手能夠智能地重複使用 UI 組件並透過測試自我修正。

Canonical URL: https://a2a-mcp.org/entry/storybook-mcp-zh-TW

Language: zh-TW

Category: MCP Servers

Updated: 2026-04-09

## 概述

Storybook MCP 是由 Storybook 官方團隊提供的整合方案，將 [模型上下文協議 (MCP)](https://modelcontextprotocol.io/) 的強大功能引入元件驅動的 UI 開發。它將您現有的 Storybook 轉變為一個豐富、結構化的資料來源，AI 代理可以即時查詢。

透過以經過優化、符合權杖效率的格式來公開元件元資料、故事、屬性類型、使用範例和文件，Storybook MCP 讓 AI 代理能夠構建符合您團隊設計系統的 UI，而非產生通用或不一致的程式碼。

## 主要功能

---

- **元件探索與上下文**：代理能夠列出元件，並擷取詳細的屬性、故事、控制項和文件。
- **優化的清單**：提供經過篩選、可供機器讀取的資料載荷（元件清單），其中包含 API、變體、設計權杖和使用片段——遠比原始原始程式碼更有效率。
- **故事生成與測試**：代理能夠為元件撰寫新的故事並自主執行測試，並內建自我修正的回饋循環。
- **無縫整合**：透過 `@storybook/addon-mcp` 套件安裝；MCP 伺服器與您的 Storybook 開發伺服器並行運行（通常位於 `/mcp` 端點）。
- **獨立函式庫**：可獨立使用 `@storybook/mcp` 進行自訂設定。
- **支援 React (v10.3+)**：目前主要針對 React 進行優化，未來計劃擴展到其他框架。

## 運作方式

---

1. 安裝附加元件：`npx storybook add @storybook/addon-mcp`
2. 執行您的 Storybook 開發伺服器。
3. 將任何相容 MCP 的 AI 代理（Claude、Cursor 等）連接到 MCP 端點。
4. 代理現在可以直接存取您現行的設計系統，以進行具有上下文感知的程式碼生成。

這創造了一個迭代式的工作流程，讓代理能夠生成程式碼、透過故事預覽、執行測試並修復問題，而無需持續的人工介入。

## 為開發者帶來的好處

---

- **更高品質的 AI 輸出**：代理遵循您既定的模式和元件 API，減少臆測和重做工作。
- **權杖效率**：更小、更集中的上下文載荷意味著更好的效能和更低的成本。
- **生產環境 UI 的護欄**：測試回饋循環幫助代理產出符合您標準的程式碼。
- **加速前端開發**：非常適合設計系統團隊、大型程式碼庫以及代理工作流程。

## 使用情境

---

- 在重複使用您的元件函式庫的同時，生成新的 UI 功能。
- 將 Figma 設計轉換為符合您現有 Storybook 元件的生產環境程式碼。
- 為元件覆蓋率進行自主的故事撰寫和測試。
- 以前端專屬的智慧功能增強 AI 編碼工具（例如 Cursor、Windsurf 或自訂代理）。
- 在團隊環境中維護大型設計系統的一致性。

## 安裝與入門指南

---

需要 Storybook 10.3+（React 渲染器）。

```bash
# 升級 Storybook
npx storybook@latest upgrade
```

# 新增 MCP 附加元件
npx storybook add @storybook/addon-mcp
```

接著執行 `storybook dev` 並將您的代理程式連線至 `http://localhost:6006/mcp`（連接埠可能不同）。

完整文件請參閱 [官方 Storybook AI / MCP 文件](https://storybook.js.org/docs/ai/mcp/overview)。

## 相關資源

- 官方部落格：[Storybook MCP for React](https://storybook.js.org/blog/storybook-mcp-for-react/)
- GitHub：[storybookjs/mcp](https://github.com/storybookjs/mcp)
- npm：[@storybook/addon-mcp](https://www.npmjs.com/package/@storybook/addon-mcp)

## Tags

- storybook
- mcp
- ai-agent
- react
- ui-components
- design-system
- frontend
- typescript

## Sources

- [Project website](https://storybook.js.org/docs/ai/mcp/overview)