Storybook 推出 AI MCP，让 AI 代理生成可用 UI

前端组件开发工具 Storybook 推出 AI MCP（Model Context Protocol）能力，让 AI 编程代理能够直接读取项目的组件、属性、Story 与文档等结构化 UI 上下文，并基于真实 Storybook 测试结果自动迭代修正，从而把生成的界面真正接入生产环境，而非停留在原型阶段。该能力目前要求 Storybook v10.3 及以上版本，并优先支持 React，后续将扩展到更多框架。

让 Agent 复用既有组件

Storybook 的核心思路是：UI 应当由团队既有的组件库拼装而来，而不是由 Agent 凭空生成。AI MCP 把已通过评审的组件、API 与 Story 暴露给 Agent，作为其生成界面的「唯一可信上下文」。当组件或 Story 发生更新时，上下文会随之自动同步，避免 Agent 拿到过时的 UI 信息或产生与团队规范不一致的代码。

同时，Agent 在编写和更新组件时，会同步生成覆盖边界场景与状态的 Story，使改动显式可读，便于工程师在评审时快速判断意图与覆盖范围。

测试驱动 Agent 自纠

Storybook Test 在真实浏览器中针对真实 Story 运行测试，将交互行为与可访问性（a11y）等失败结果回传给 Agent，作为上下文的一部分。Agent 据此自动迭代修复，直到测试通过，工程师只需在最后介入审阅。

• 测试在后台持续执行，结果流式进入 Agent 上下文；
• 失败信息与具体的 Story、断言绑定，便于定位；
• 覆盖交互、可访问性等质量维度。

跨团队共享同一份 UI 上下文

AI MCP 借助 Chromatic 发布「唯一的规范化 UI 上下文」，确保 Agent、本地工具与 CI 在不同环境、不同仓库中引用同一份经过评审的资源，杜绝上下文漂移。上下文更新由 Chromatic 追踪并受权限控制，历史可追溯，由人类最终决定哪些内容进入 Agent 上下文。

更多细节与接入方式可前往 Storybook 官方文档查看。