Storybook MCP Server

🚀 Storybook MCP Server

This MCP server helps AI models suggest UI components, allows designers to access component usage without coding, and accelerates the implementation of Figma designs into Storybook components.

🚀 Quick Start

⚠️ Important Note

This tool is created for testing purposes and is not recommended for use in a production environment.

Before you start, you need to prepare your Storybook static files. https://storybook.js.org/docs/sharing/publish-storybook

1. Clone the Repository

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

2. Install Dependencies

We recommend using Bun

bun install
# Or
npm install

3. Build

bun run build
# Or
npm run build

4. Setup

Add the following to your package.json:

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

The server will load your Storybook data and expose the MCP tool for external proxies.

💻 Usage Examples

🔍 Find Components Matching Figma Elements

Ask the AI:

"Is there a corresponding Storybook component for the 'CTA button' in this Figma design?"

➡️ The MCP server performs the following:

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

✨ Automatically Generate UI Code Based on Figma Sections

Ask the AI:

"Generate a contact form using our design system."

➡️ The MCP server:

• Suggests using TextField, Textarea, PrimaryButton
• Provides JSX examples of using these components

✨ Features

This MCP server aims to:

• Assist AI models in suggesting available UI components based on design context.
• Enable designers to access component usage without writing code.
• Accelerate the process of implementing Figma designs into Storybook components.
• Connect design and development using natural language.

📦 Available Tools

🔧 Why Choose MCP?

MCP (Model Context Protocol) provides a standard interface for large language models to securely and efficiently access context information, such as UI components, documentation, and code.

By integrating your Storybook with MCP:

• AI agents can intelligently suggest components.
• Designers and developers have a shared source of truth.
• Natural language is sufficient to drive the UI generation function.

📚 Project Structure

storybook-mcp/
├── tools/
│   ├── list-components.ts
│   ├── get-component-details.ts
│   ├── get-component-usage-examples.ts
│   └── get-component-variants.ts
└── index.js

📄 License

[Specify license information here]

👥 Contributors

[List contributors here]