Storybook：AI MCP

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 代理真正成為開發團隊中可靠的成員。