Storybook MCP Server

⚠️ 此工具是为测试目的而创建的，不建议在生产环境中使用。

---

目标

此MCP服务器旨在：

• 帮助AI模型根据设计上下文建议可用的UI组件
• 允许设计师无需编写代码即可访问组件用法
• 加速使用现有Storybook组件实现Figma设计的过程
• 使用自然语言连接设计与开发

---

开始使用

在开始之前，您需要准备您的Storybook静态文件。 https://storybook.js.org/docs/sharing/publish-storybook

1. 克隆仓库

git clone https://github.com/m-yoshiro/storybook-mcp.git
cd storybook-mcp

2. 安装依赖

我们推荐使用Bun

bun install
# 或者
npm install

3. 构建

bun run build
# 或者
npm run build

4. 配置

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "node",
      "args": [
        "/<你的路径>/index.js",
        // 可选：指向你的Storybook静态json文件的路径
        "/<你的路径>/index.json"
      ]
    }
  }
}

该服务器将加载您的Storybook数据，并向外部代理暴露MCP工具。

---

可用工具

工具名称	描述	参数
list-components	列出Storybook中的所有可用组件	path（可选）：指向index.json或stories.json文件的路径（如果提供了默认路径则可选）
find-components-by-name	根据关键词查找组件（支持部分匹配）	name：要搜索的组件名或关键词<br>path（可选）：指向index.json或stories.json文件的路径（如果提供了默认路径则可选）

---

项目结构

storybook-mcp/
├── tools/
│   ├── list-components.ts
│   ├── get-component-details.ts
│   ├── get-component-usage-examples.ts
│   └── ...
├── config.ts
├── index.ts
└── README.md

---

贡献

如果您有改进的想法或想要贡献新的工具，请随时打开一个PR或issue！

---

许可证

MIT