Storybook experimentalReview 配置详解开启面向 AI Agent 的 Agentic Review 评审流程【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook导读当 AI Agent 或编程助手在 Storybook 项目里帮你批量修改 UI 组件时跟踪它究竟改了哪些界面、影响了哪些 Story 往往十分困难。Storybook 为此推出了实验性的Agentic review智能体评审工作流而它的总开关正是.storybook/main配置中的features.experimentalReview标记feature flag。本文以仓库文档 docs/_snippets/main-config-features-experimental-review.md 为主体结合 features 类型定义 与 三态判定源码 的纵深佐证完整讲解该标记的开启方式、四种配置写法、源码级的三态语义、与changeDetection的依赖关系以及开启后与 MCP / ADE 插件协作的边界行为。读完你将在自己的 Storybook 项目中独立完成experimentalReview的开关与验证。一、标记定位features.experimentalReview是什么experimentalReview是 Storybookmain配置对象中features字段下的一个布尔型实验特性开关。官方 API 文档 main-config-features.mdx 将其描述为Enable the experimental agentic review feature, which allows you to review the work an AI agent has done in your Storybook.也就是说该标记用于启用Agentic review——允许 Agent 在工作完成后自动生成一份工作摘要包括一份经过挑选的、受变更影响的 Story 集合。你可以由此获得一个聚焦的、单页式的评审视图快速理解并核验 Agent 所做的 UI 改动而无需逐个文件翻查 diff。在源码中该字段定义于 code/core/src/types/modules/core-common.ts#L674-L682其 JSDoc 明确了两点关键语义/** * Enable the agentic review workflow: the review UI in the manager and the server-side review * channel that MCP tooling (e.g. storybook/addon-mcp) uses to push curated reviews of code * changes. Builds on change detection, so changeDetection must also be enabled. * * default false * experimental This feature is in early development and may change significantly in future releases. */ experimentalReview?: boolean;两点要点它同时启用manager 侧的 review UI与服务端 review 通道后者供storybook/addon-mcp等 MCP 工具推送精选评审它构建在 change detection 之上因此需要changeDetection同时处于开启状态该值默认即为true。二、官方文档的参数说明与默认值依据 docs/api/main-config/main-config-features.mdx 中## experimentalReview一节官方给出的完整参数契约如下标记名称experimentalReview类型boolean默认值false实验性质标注为 ⚠️Experimental作用启用实验性的 Agentic review 特性使你能够评审 AI Agent 在 Storybook 中所做的工作前置条件建立在changeDetection之上因此该特性也必须开启默认即为开启通常无需额外操作适用范围重要官方文档中experimentalReview小节位于 React 专属If rendererreact代码块内。从文档的渲染条件判断该特性在文档站中为 React 渲染器体系呈现若你的项目使用非 React 渲染器如纯 Angular、Vue在开启前应留意对应渲染器版本的文档声明在 React 场景下features可用的完整类型还包括actions、controls、backgrounds、viewport、highlight、measure、outline、interactions、changeDetection、componentsManifest、experimentalDocgenServer、experimentalTestSyntax等字段详见 main-config-features.mdx其中多数默认值为true而experimentalReview默认值为false属于需要显式选择加入的实验能力。三、标准配置写法在.storybook/main中开启仓库文档 docs/_snippets/main-config-features-experimental-review.md 给出了四种等价写法。无论选择哪种格式核心都是features: { experimentalReview: true, },下面逐一给出完整可复制的配置。3.1 传统 CSF 3 写法JavaScriptexport default { // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc. framework: storybook/your-framework, stories: [../src/**/*.mdx, ../src/**/*.stories.(js|jsx|mjs|ts|tsx)], features: { experimentalReview: true, }, };3.2 传统 CSF 3 写法TypeScript// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc. import type { StorybookConfig } from storybook/your-framework; const config: StorybookConfig { framework: storybook/your-framework, stories: [../src/**/*.mdx, ../src/**/*.stories.(js|jsx|mjs|ts|tsx)], features: { experimentalReview: true, }, }; export default config;3.3 CSF Next 写法TypeScript基于defineMain// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite) import { defineMain } from storybook/your-framework/node; export default defineMain({ framework: storybook/your-framework, stories: [../src/**/*.mdx, ../src/**/*.stories.(js|jsx|mjs|ts|tsx)], features: { experimentalReview: true, }, });3.4 CSF Next 写法JavaScript基于defineMain// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite) import { defineMain } from storybook/your-framework/node; export default defineMain({ framework: storybook/your-framework, stories: [../src/**/*.mdx, ../src/**/*.stories.(js|jsx|mjs|ts|tsx)], features: { experimentalReview: true, }, });配置要点说明以上四段中的storybook/your-framework均为占位符必须替换为项目实际使用的框架包例如storybook/react-vite、storybook/nextjs、storybook/vue3-vite等stories数组按需替换成项目实际的 Story 与 MDX 匹配规则CSF Next 属于较新的试验性格式defineMain需要从storybook/framework/node子路径导入便于获得完整的类型推导与校验之所以同时保留 CSF 3 与 CSF Next 的 JS/TS 版本是因为不同项目脚手架、包管理器的默认模板各异见 snippet 中 JS snippets still needed while providing both CSF 3 Next 的维护性注释。四、源码中的三态语义undefined / false / true与普通布尔标记不同experimentalReview在 Storybook 内部被设计为三态这一点无法仅从配置片段看出却决定了不配置与显式设 false的行为差异。核心实现位于 code/core/src/shared/review/features.tsexport const isReviewFeatureEnabled (features: StorybookFeatures | undefined): boolean features?.experimentalReview ! false !!features?.changeDetection; export const isReviewExplicitlyEnabled (features: StorybookFeatures | undefined): boolean !!features?.experimentalReview !!features?.changeDetection;结合文件头部的 JSDoc三态含义可归纳为下表配置取值基础设施review 通道 manager 层直接 MCP 客户端可见的review-create说明undefined默认不设置挂载但保持休眠直到收到一次评审推送默认不可见仅storybook aiCLI 通道按需开启默认 features preset 刻意不为它赋值默认值false显式退出什么都不挂载MCP 工具在所有通道禁用 review用户显式关闭true显式选择加入完整启用直接 MCP 客户端也可使用 review即本文 snippet 展示的开启方式这一设计的根源同样有据可查默认 preset common-preset.ts 的 features 预设 为actions、changeDetection、controls等字段统一注入默认值却刻意不写入experimentalReview// experimentalReview is deliberately NOT defaulted here. It is tri-state: MCP tooling // (storybook/addon-mcp) enables review for the storybook ai CLI channel unless the user // explicitly sets false, so an explicit default would be indistinguishable from a user // opt-out in the merged preset. See isReviewFeatureEnabled in shared/review/features.ts.原因注释写得非常清楚若默认 preset 显式写死experimentalReview: false那么在合并后的 preset 中这个显式默认值将与用户主动关闭无从区分——这正是把false语义做成显式退出的关键。配套单元测试 code/core/src/shared/review/features.test.ts 也逐一锁定了这些行为例如未触碰的默认 preset 不含experimentalReview属性且isReviewFeatureEnabled判定为true基础设施休眠但可激活{ changeDetection: true, experimentalReview: false }判定为关闭尊重用户显式退出{ experimentalReview: true }未开changeDetection判定为关闭证明 change detection 是硬性前置对isReviewExplicitlyEnabled而言即使changeDetection: true、flag 未设置也判定为关闭——说明直接 MCP 客户端通道只在显式 opt-in 时开放。两个判定函数的差异正是文章第二部分所说官方文档默认值false与源码中基础设施默认可激活之间看似矛盾的合理解释文档所指的false默认值是面向用户界面的显式选择语义而源码内部则通过不写默认值保住三态判定空间。五、开启后的服务端行为在 common-preset.ts 中可以看到该特性开启后服务端发生了什么。当isReviewFeatureEnabled(features)为真时第 414-419 行Storybook 会注册 review 服务并注册对应的工具集if (isReviewFeatureEnabled(features)) { registerReviewService({ getIndex, }); registerToolset(reviewToolset); }而在组装 MCP 的 story 元数据时第 410 行附近使用的是显式 opt-in 判定reviewEnabled: isReviewExplicitlyEnabled(features)。注释解释了为何这里不能用基础设施判定当 flag 未设置时下面的 review 基础设施仍会注册storybook aiCLI 通道按请求启用该工具但直接 MCP 客户端永远看不到review-create因此注入给模型的 story 描述文案绝不能指向它。这条两套判定各司其职的实现细节决定了你在集成 MCP 时应注意仅通过storybook aiCLI 通道使用评审不配置该标记也可用内部走基础设施休眠激活路径希望第三方直接连接 MCP 的客户端也能发起评审必须显式设置experimentalReview: true。六、依赖关系与开启前提开启experimentalReview时请一并确认以下前提对应文档 docs/ai/agentic-review.mdx 的 Requirements 一节与 features 文档的说明Storybook 版本需要 Storybook 10.5 或更高版本experimentalReview标记开启即本文前述配置如果你正在使用 Storybook 的 ADEAgent Development Environment插件该标记会被自动启用MCP 服务运行并已连接到你的 Agent或已安装对应的 ADE 插件changeDetection保持开启该特性构建于 change-detection 管线之上features.ts 中的 !!features?.changeDetection即是运行时校验而changeDetection在默认 features preset 中即为true所以一般情况下无需额外改动但若你之前手动关闭过它务必重新打开。七、开启后的工作流速览衔接上下文作为对配置语义的收束experimentalReview开启后你将能体验的 Agentic review 工作流详见 docs/ai/agentic-review.mdx该页在文档站侧栏隐藏、由 AI 文档入口引用包括Agent 完成工作后生成评审摘要内含对工作的文字总结与精选 Story 集合——注意这是精选而非全部受影响 Story 的全量清单在 Storybook 侧边栏通过评审小组件review widget进入汇总页点击缩略图进入单个 Story 详情可继续用 Storybook 的调试能力与浏览器工具检查组件甚至运行已配置的测试评审生成后再改动代码时会出现评审可能已过期的横幅可借助提示 prompt 随时向 Agent 请求新评审若同时使用 change detection评审小组件拥有更高优先级change detection 的过滤仍可用于查看新增/修改 Story。结语与自检清单experimentalReview是 Storybook 将 AI 协同从单向生成推向可评审闭环的实验性开关其配置本身只有一行背后的工程语义却相当讲究默认不写入 preset、三态判定、基础设施与 MCP 客户端通道使用两把不同的锁。配置完成后你可以用下面的清单自检.storybook/main中已写入features: { experimentalReview: true }且框架名、stories规则已替换为真实值changeDetection未被人为关闭默认为开启使用 Storybook 10.5且 MCP 服务已连接或已安装 ADE 插件若需第三方 MCP 客户端直接调用评审确认 flag 为显式true而非仅依赖默认休眠基础设施。相关参考路径snippet 原文 · features API 文档 · Agentic review 功能文档 · 字段类型定义 · 三态判定实现 · 默认 features preset【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考