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