Storybook 如何安装 MCP Addon 并让 AI Agent 连接本地 Storybook 服务器【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook如果你的项目里已经有一个能跑起来的 Storybook希望 AI Agent 不只是“凭空写 UI”而是先读懂你已有的组件库——查询组件文档、复用现有组件、为生成结果写 story 并跑交互测试——就需要把 Storybook 的 MCP 服务器接到 Agent 上。MCPModel Context Protocol是一个标准的 AI Agent 工具协议任何支持 MCP 的 Agent 都可以连接 Storybook 的 MCP 服务器。完成这篇文章后你的 Agent 就能调用docs-list等 MCP 工具查询本地 Storybook 中的组件文档并用test-run对 story 跑测试。前提条件一个已安装、可以启动的 Storybook 项目本地能运行 Storybook dev server一个支持 MCP 的 AI AgentClaude Code、OpenAI Codex、Cursor、Google Gemini CLI、VS Code Copilot 等均可。注意Storybook 的 AI 能力目前处于 preview 阶段API 在未来版本中可能变化。先了解 MCP 服务器提供的三组工具安装后MCP 服务器按三组工具集toolset向 Agent 暴露能力devdevelopment写 story、预览 story 等对框架没有要求docs查询组件清单与组件文档依赖 components manifest 是否生成见下文“启用 components manifest 一节”并非所有框架都支持test运行 story 测试。test-run工具只有在项目安装了storybook/addon-vitest时才会出现。三组工具集默认全部启用也可以在你的main.js|ts中通过storybook/addon-mcp的toolsets选项开关dev、docs、test均为boolean默认都是true。第一步安装并注册 MCP Addon在你的 Storybook 项目根目录运行以下命令它会一步完成安装和注册# npm npx storybook add storybook/addon-mcp # pnpm pnpm exec storybook add storybook/addon-mcp # yarn yarn exec storybook add storybook/addon-mcpstorybook add会自动把 addon 写入你的配置并完成注册无需手工编辑 addons 列表。第二步在浏览器中确认 MCP 端点可用启动 Storybook dev server 后MCP 服务器端点随 dev server 一起提供默认地址是http://localhost:6006/mcp端口以你项目的实际配置为准。用浏览器打开这个地址你应该看到类似下面的页面顶部提示 “Storybook MCP server successfully running viastorybook/addon-mcp”中间列出当前可用的工具集dev / docs / test 及各自状态底部有跳转到 component manifest 调试页的入口。这是文档给出的示意页面能看到这个页面说明 addon 已注册成功、MCP 端点已经上线接下来只是把地址交给 Agent。启用 components manifest可选但决定 docs 工具集是否可用docs 工具集读取的是 components manifest而这个 manifest 默认是关闭的。如果你的框架支持生成 manifest就在.storybook/main.js或main.ts的features中打开// .storybook/main.js export default { framework: storybook/your-framework, stories: [../src/**/*.mdx, ../src/**/*.stories.(js|jsx|mjs|ts|tsx)], features: { componentsManifest: true, }, };其中storybook/your-framework是占位写法需要替换成你实际使用的 framework 包名例如storybook/react-vite、storybook/nextjs或storybook/nextjs-vite。各框架的支持情况如下来自 MCP server 文档Framework需要启用的特性组件 API 可被docs-show读取所有 React 框架react-vite、react-webpack5、nextjs、nextjs-vite、tanstack-react、react-native-web-vitecomponentsManifest是storybook/angular-vitecomponentsManifest它自身已启用experimentalDocgenServer是storybook/vue3-vitecomponentsManifest和experimentalDocgenServer是storybook/angularWebpack不支持 manifest否其他框架不支持 manifest否也就是说Vue 项目storybook/vue3-vite需要在同一个features对象里同时设置两个开关// .storybook/main.js features: { componentsManifest: true, experimentalDocgenServer: true, },Angular 项目只有使用storybook/angular-vite才能生成 manifest它会从 TypeScript 源码读取组件 APIWebpack 版的storybook/angular不生成 manifestdocs 工具集在那里不可用。另外如果显式设置了experimentalDocgenServer: falsemanifest 也会被禁用docs 工具集随之不可用。如果框架不生成 manifest这一步可以跳过docs 工具集会报告不可用但 dev 和 test 工具集仍然全部可用。第三步把 MCP 服务器注册到你的 Agent这一步需要你的 Storybook dev server 正在运行。文档给出的方式是用mcp-add——一个把 MCP 服务器注册到各类 Agent 的外部 CLI 工具# npm npx mcp-add --type http --url http://localhost:6006/mcp --scope project # pnpm pnpm exec mcp-add --type http --url http://localhost:6006/mcp --scope project # yarn yarn exec mcp-add --type http --url http://localhost:6006/mcp --scope project两个要点如果你的 dev server 端口不是 6006把 URL 里的端口改成实际端口执行过程中会提示你给这个 MCP 服务器起一个名字例如my-project-sb-mcp。这个名字就是 Agent 后续调用工具时的标识起一个有辨识度、不与其他工具重名的名字。不想用mcp-add的话也可以按你所用 Agent 的文档手动把http://localhost:6006/mcp配置为一个 HTTP 类型的 MCP 服务器Claude Code、Gemini CLI、Codex、VS Code Copilot 等都有对应的手动配置入口。第四步在 Agent 说明文件中引导它使用 Storybook在项目的AGENTS.md如果你用 Claude则写在CLAUDE.md里加入引导内容。下面是 官方文档给出的起点示例使用时把your-project-sb-mcp替换为第三步中你给 MCP 服务器起的名字When working on UI components, always use the your-project-sb-mcp MCP tools to access Storybooks component and documentation knowledge before answering or taking any action. - **CRITICAL: Never hallucinate component properties!** Before using ANY property on a component from a design system (including common-sounding ones like shadow, etc.), you MUST use the MCP tools to check if the property is actually documented for that component. - Query docs-list to get a list of documented components - Query docs-show for that component to see all available properties and examples - Only use properties that are explicitly documented or shown in example stories - If a property isnt documented, do not assume properties based on naming conventions or common patterns from other libraries. Check back with the user in these cases. - Use the get-storybook-story-instructions tool to fetch the latest instructions for creating or updating stories. This will ensure you follow current conventions and recommendations. - Check your work by running test-run. Remember: A story name might not reflect the property name correctly, so always verify properties through documentation or example stories before using them.这段说明的作用要求 Agent 在动任何组件前先查 Storybook 的组件与文档知识、只用文档中明确记录的属性、写 story 前取最新的编写指引、并跑test-run自验。验证 Agent 是否真正连上了 MCP 服务器确认 Storybook 正在运行后向 Agent 发一条这样的提示词List all documented components成功条件来自官方文档你应该看到 Agent 发起了对docs-list工具的调用并收到来自你 Storybook 的组件列表作为响应。如果 Agent 没有调用工具、而是直接“凭印象”回答组件名说明 MCP 连接没生效回到第三步检查服务器注册。另外如果浏览器里能看到 MCP 页面、但 Agent 仍连不上重点核对两处Agent 配置里的 MCP URL 是否为http://localhost:6006/mcp端口是否与你实际启动的 dev server 一致、MCP 服务器是否注册成功。限制说明Storybook 的 AI 能力处于 preview 阶段工具名称和参数可能在未来版本中变化。docs 工具集仅在框架生成 components manifest 时可用见上表的框架支持范围不生成 manifest 的框架只有 dev 和 test 工具集。部分 dev 工具依赖其他特性开启例如stories-changed需要启用 change detectionreview-create需要启用 review 特性test-run需要安装storybook/addon-vitest。MCP 端点依赖本地 dev serverStorybook 停止运行后Agent 侧的 MCP 连接也随之不可用。下一步查看 MCP server API 了解storybook/addon-mcp的toolsets等配置项参考 MCP server overview 中的典型工作流生成 UI、预览 story、跑测试需要让团队共用时参见 Sharing your MCP server。【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考