mcpField
S
Storybook MCP Addon

Storybook MCP Addon

本地服务
storybook.js.org开发工具2717 周前更新
代码仓库访问官网

关于 Storybook MCP Addon

Storybook MCP Addon 是用于 MCP 驱动 UI 开发工作流的 Storybook 插件。它面向使用 Storybook 并希望让 AI Agent 参与组件开发的开发者。README 较为简略，详细的安装与用法说明位于官方文档中。

主要功能

  1. 01在 Storybook 中暴露 MCP 服务
  2. 02支持自定义 MCP 端点路径
  3. 03在 .storybook/main.ts 中配置选项

适用场景

  1. 01让 Agent 通过 MCP 访问 Storybook 组件信息
  2. 02为不同项目设置独立的 MCP 端点路径

MCP 相关

该插件在 Storybook 中提供 MCP 服务，默认位于 /mcp 路径，端点路径可在配置中修改，供 MCP 客户端连接。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "storybookjs-addon": {
      "command": "npx",
      "args": [
        "-y",
        "@storybook/addon-mcp"
      ]
    }
  }
}
启动命令npx -y @storybook/addon-mcp

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npm@storybook/addon-mcp0.6.0

工具

还没有获取到工具列表

本地服务需要在你的电脑上运行后才能读取工具，维护者暂未提供工具列表。

详细介绍

Storybook MCP 插件

用于 MCP 驱动的 UI 开发工作流的 Storybook 插件。

Storybook MCP 插件演示

请参阅文档，了解安装说明、用法示例、API 等更多信息。

配置

默认情况下，该插件会在 /mcp 提供 MCP 服务。你可以在 .storybook/main.ts 中配置 其他固定的端点路径：

export default {
	addons: [
		{
			name: '@storybook/addon-mcp',
			options: {
				endpoint: '/custom-mcp',
			},
		},
	],
};

端点必须是 URL 路径，例如 /custom-mcp 或 /tools/mcp。

请访问 storybook.js.org 详细了解 Storybook。

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。