Storybook Mcp
What is Storybook Mcp
storybook-mcp is a custom Model Context Protocol (MCP) server that integrates with Storybook to facilitate UI implementation from Figma designs. It allows AI tools to query UI components and provides a collaborative environment for designers and developers.
Use cases
Use cases include facilitating design handoffs, enabling non-developers to interact with UI components, and improving the efficiency of implementing designs from Figma into functional UI components.
How to use
To use storybook-mcp, clone the repository, install dependencies using Bun or npm, build the project, and set up the MCP server configuration to point to your Storybook static files.
Key features
Key features include AI-assisted suggestions for UI components, enabling designers to access component usage without coding, accelerating Figma design implementations, and bridging the gap between design and development using natural language.
Where to use
storybook-mcp can be used in UI/UX design workflows, particularly in environments where designers and developers collaborate closely, such as web and mobile application development.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Overview
What is Storybook Mcp
storybook-mcp is a custom Model Context Protocol (MCP) server that integrates with Storybook to facilitate UI implementation from Figma designs. It allows AI tools to query UI components and provides a collaborative environment for designers and developers.
Use cases
Use cases include facilitating design handoffs, enabling non-developers to interact with UI components, and improving the efficiency of implementing designs from Figma into functional UI components.
How to use
To use storybook-mcp, clone the repository, install dependencies using Bun or npm, build the project, and set up the MCP server configuration to point to your Storybook static files.
Key features
Key features include AI-assisted suggestions for UI components, enabling designers to access component usage without coding, accelerating Figma design implementations, and bridging the gap between design and development using natural language.
Where to use
storybook-mcp can be used in UI/UX design workflows, particularly in environments where designers and developers collaborate closely, such as web and mobile application development.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Content
Storybook MCP Server
⚠️ This tool was created for testing purposes and is not recommended for use in production environments.
Getting Started
Before you begin, 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. Set up
The server will load your Storybook data and expose MCP tools to external agents.
🔧 Available Tools
| Tool Name | Description | Parameters |
|---|---|---|
list-components |
Lists all available components from Storybook | path (optional): Path to the index.json or stories.json file (optional if default path is provided) |
find-components-by-name |
Finds components based on a keyword (partial match supported) | name: Component name or keyword to search forpath (optional): Path to the index.json or stories.json file (optional if default path is provided) |
Dev Tools Supporting MCP
The following are the main code editors that support the Model Context Protocol. Click the link to visit the official website for more information.
