The Storybook MCP Server facilitates integration between Storybook components and external tools (like AI) to enhance UI development workflows. It exposes component data via MCP, allowing you to:
List all components: Retrieve all available components from Storybook using the
list-componentstoolSearch components by name: Find components by name or keyword using the
find-components-by-nametool, supporting partial matchesFacilitate UI component discovery based on design contexts from Figma
Recommended as a runtime environment for installing dependencies and building the MCP server.
Supported as an alternative package manager for installing dependencies and building the MCP server.
Provides an MCP server that integrates with Storybook, allowing AI tools to query available UI components, retrieve component information and usage examples to help implement UI from design specifications.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Storybook MCP Serverfind components for a login form"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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-mcp2. Install dependencies
We recommend using Bun
bun install
# or
npm install3. Build
bun run build
# or
npm run build4. Set up
{
"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 MCP tools to external agents.
Related MCP server: MCP Toolkit
🔧 Available Tools
Tool Name | Description | Parameters |
| Lists all available components from Storybook |
|
| Finds components based on a keyword (partial match supported) |
|