Storybook：AI MCP
Storybook 釋出 AI 整合功能，透過 MCP 工具讓 AI 代理使用現有元件生成 UI，並利用 Storybook Test 進行自動化測試反饋，確保 UI 質量與一致性。
Storybook 近日正式推出了面向 AI 代理的整合功能，旨在幫助開發團隊利用生成式 AI 更高效地構建使用者介面。該功能基於 Model Context Protocol (MCP) 工具，允許 AI 代理直接訪問專案中已有的元件、屬性、故事和文件，從而生成與程式碼庫規範完全一致的 UI，從根本上避免模型憑空捏造或產生幻覺的問題。
其核心設計理念是讓 AI 代理“展示工作成果”——代理必須透過 Storybook 編寫和更新故事，覆蓋元件的各種狀態和邊界情況。這些故事不僅使每一次變更變得明確且易於審查，還強制代理重用現有元件。Storybook 暴露了生產級元件及其完整的 API，確保 UI 組裝完全基於已有的資產，而非模型自行發明。
在質量控制方面，Storybook Test 提供了快速的反饋迴圈：代理生成程式碼後，Storybook 會在真實的瀏覽器環境中對實際故事執行測試，測試失敗的資訊會直接返回給代理，促使它自動糾正問題。測試在後臺非同步執行，代理可以邊編寫程式碼邊獲取即時結果。互動問題和無障礙問題同樣會被捕獲，失敗資訊與具體的故事和斷言關聯，指導代理進行精確定位和修復。
為了保持跨團隊的一致性，Storybook 透過 Chromatic 服務釋出單一權威的 UI 上下文。所有環境中的代理、工具和 CI 都引用同一個上下文，從而避免決策漂移。對 UI 上下文的更新是顯式且可人工稽核的，Chromatic 會跟蹤變更、強制執行許可權並保留完整的歷史記錄。最終，開發者只有在測試全部透過後才需要介入，確保 UI 質量達到生產標準。
這項功能目前需要 Storybook v10.3 及以上版本，並支援 React，更多框架的支援即將到來。它代表了前端開發與 AI 協作的一個重要方向：透過結構化的上下文和自動化的測試反饋，讓 AI 代理真正成為開發團隊中可靠的成員。