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 代理真正成为开发团队中可靠的成员。