Storybook MCP Server

故事书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": [
        "//index.js",
        // Optional: path to your Storybook static json file
        "//index.json"
      ]
    }
  }
}

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

______________________________________________________________________

🔧 可用工具

______________________________________________________________________

"What Storybook component matches this 'CTA Button' in my Figma design?"

➡️ MCP server runs:

• find-component-by-name("cta button")
• get-component-details("PrimaryButton")
• get-component-usage-examples("PrimaryButton")

✨ Auto-generate UI code from a Figma section

Ask the AI:

"Generate a contact form using our design system"

➡️ MCP server:

• Suggests TextField, Textarea, PrimaryButton
• Provides JSX using those components

🧠 Why MCP?

MCP (Model Context Protocol) provides a standard interface for large language models to safely and efficiently access contextual information like UI components, documentation, and code.

By integrating your Storybook via MCP:

• AI agents can suggest components intelligently
• Designers and developers get a shared source of truth
• Natural language is enough to drive UI generation

📁 Project Structure

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

🤝 Contributing

If you have ideas to improve or want to contribute new tools, feel free to open a PR or issue!

📜 License

MIT -->