mcp-server5
Storybook MCP
Storybook MCP 是一款官方的模型上下文協定（MCP）伺服器，能將 AI 助手連接到您的 Storybook，提供機器可讀的組件元數據、故事、屬性和文件，讓助手能夠智能地重複使用 UI 組件並透過測試自我修正。
概述
Storybook MCP 是由 Storybook 官方團隊提供的整合方案，將 模型上下文協議 (MCP) 的強大功能引入元件驅動的 UI 開發。它將您現有的 Storybook 轉變為一個豐富、結構化的資料來源，AI 代理可以即時查詢。
透過以經過優化、符合權杖效率的格式來公開元件元資料、故事、屬性類型、使用範例和文件，Storybook MCP 讓 AI 代理能夠構建符合您團隊設計系統的 UI，而非產生通用或不一致的程式碼。
主要功能
- 元件探索與上下文：代理能夠列出元件，並擷取詳細的屬性、故事、控制項和文件。
- 優化的清單：提供經過篩選、可供機器讀取的資料載荷（元件清單），其中包含 API、變體、設計權杖和使用片段——遠比原始原始程式碼更有效率。
- 故事生成與測試：代理能夠為元件撰寫新的故事並自主執行測試，並內建自我修正的回饋循環。
- 無縫整合：透過
@storybook/addon-mcp套件安裝；MCP 伺服器與您的 Storybook 開發伺服器並行運行（通常位於/mcp端點）。 - 獨立函式庫：可獨立使用
@storybook/mcp進行自訂設定。 - 支援 React (v10.3+)：目前主要針對 React 進行優化，未來計劃擴展到其他框架。
運作方式
- 安裝附加元件：
npx storybook add @storybook/addon-mcp - 執行您的 Storybook 開發伺服器。
- 將任何相容 MCP 的 AI 代理（Claude、Cursor 等）連接到 MCP 端點。
- 代理現在可以直接存取您現行的設計系統，以進行具有上下文感知的程式碼生成。
這創造了一個迭代式的工作流程，讓代理能夠生成程式碼、透過故事預覽、執行測試並修復問題，而無需持續的人工介入。
為開發者帶來的好處
- 更高品質的 AI 輸出：代理遵循您既定的模式和元件 API，減少臆測和重做工作。
- 權杖效率：更小、更集中的上下文載荷意味著更好的效能和更低的成本。
- 生產環境 UI 的護欄：測試回饋循環幫助代理產出符合您標準的程式碼。
- 加速前端開發：非常適合設計系統團隊、大型程式碼庫以及代理工作流程。
使用情境
- 在重複使用您的元件函式庫的同時，生成新的 UI 功能。
- 將 Figma 設計轉換為符合您現有 Storybook 元件的生產環境程式碼。
- 為元件覆蓋率進行自主的故事撰寫和測試。
- 以前端專屬的智慧功能增強 AI 編碼工具（例如 Cursor、Windsurf 或自訂代理）。
- 在團隊環境中維護大型設計系統的一致性。
安裝與入門指南
需要 Storybook 10.3+（React 渲染器）。
# 升級 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
storybookmcpai-agentreactui-componentsdesign-systemfrontendtypescript
Related Entries
Keep exploring similar tools and resources in this category.
Related Reads
Background, tutorials, and protocol context connected to this entry.
