核心功能與目標

Storybook MCP for React 是一套為人工智慧 Agent 提供結構化元件和設計系統上下文的工具，使其能更好地在首次嘗試時建構 UI。該工具透過強制 Agent 使用既有元件而非憑空捏造程式，提高程式品質、加快開發速度並減少 token 消耗。

解決的核心問題

不具備元件知識的 Agent 會生成無法合併的程式，存在渲染錯誤、視覺缺陷與虛構 API。原因在於大語言模型從訓練資料的模式預測，沒有明確指引時會從概率中心採樣，導致「安全但缺乏個性」的輸出（如 Inter 字型、紫色漸層與最小動畫）。Storybook MCP 透過提供元件 API、故事、使用模式與測試等上下文，讓 Agent 生成符合系統的程式。

主要功能與能力

• 為 Agent 提供元件中繼資料（故事、API、文件）以重用既有元件
• 指引 Agent 撰寫故事並預覽其工作成果
• 讓 Agent 執行測試並自我修正問題
• 將測試執行整合到反饋迴圈中，Agent 偵測到錯誤時可自行修復，需要人工判斷（如色彩對比問題）時會主動詢問
• 在聊天介面中嵌入即時故事預覽，讓使用者無需離開對話窗口即可驗證生成 UI 的外觀與互動狀態

跨團隊協作能力

Storybook MCP 支援「組合」功能，使 Agent 能從多個已發佈的遠端 MCP 伺服器讀取資料，無需連接多個端點。這對於分散應用程式與設計系統為不同 Storybook 的團隊特別實用，也允許產品團隊在使用多個設計系統與元件庫的情況下，讓 Agent 自動尋找並參考來自所有組合 Storybook 的元件。

發佈與團隊共享

Chromatic 支援免費發佈 Storybook MCP 伺服器，讓整個組織存取共享的 MCP 實例以改進生成程式品質。關鍵特性包括：

• 自動部署：發佈啟用 MCP 的 Storybook 時，MCP 伺服器自動部署在 /mcp 端點
• 內建驗證：透過既有的 Chromatic 帳戶進行驗證，鏡像 GitHub Organization、Bitbucket Group 或 GitLab Team 的權限設定，Enterprise 計畫支援 SSO
• 版本與分支管理：為每次 Storybook 部署發佈 MCP 伺服器，特別適用於支援多版本或長期分支的專案，可使用永久連結指引 Agent 特定分支的上下文
• 組合多個伺服器：支援將本地 Storybook MCP 與多個遠端已發佈 MCP 合併，避免 Agent 連接多個端點的不可預測性

效能優勢與現狀

使用 Reshaped 元件庫的基準測試顯示，使用 Storybook MCP 時，程式生成速度更快且 token 消耗更少。該工具目前可用於 React 專案，其他框架支援預計於今年稍後推出。使用者可透過升級至 Storybook 10.3 版本並安裝 @storybook/addon-mcp 外掛程式來開始使用。