AI导哈

Storybook组件查询工具

一个用于查询Storybook中UI组件的工具，支持通过名称搜索组件，帮助设计师和开发者更高效地协作。

  • by m-yoshiro
  • JavaScript
  • 本地部署
  • 21 星标
  • 更新于
在 GitHub 查看 m-yoshiro/storybook-mcp

使用说明

故事书MCP服务器

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

入门指南

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

1.克隆存储库

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

2.安装依赖项

我们建议使用 包子

bun install
# or
npm install

3.建造

bun run build
# or
npm run build

4.设置

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "node",
      "args": [
        "/< your path>/index.js",
        // Optional: path to your Storybook static json file
        "/< your path>/index.json"
      ]
    }
  }
}

服务器将加载您的故事书数据，并将MCP工具暴露给外部代理。

🔧 可用工具

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

相关 MCP