MCP Server
Storybook MCP Server
A Model Context Protocol server that integrates with Storybook to help AI tools query UI components and retrieve usage examples from static Storybook files.
21
GitHub Stars
11/22/2025
Last Updated
MCP Server Configuration
1{
2 "name": "storybook-mcp",
3 "command": "node",
4 "args": [
5 "/< your path>/index.js",
6 "/< your path>/index.json"
7 ]
8}
JSON8 lines
README Documentation
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
{
"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.
š§ 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) |
Quick Install
Quick Actions
Key Features
Model Context Protocol
Secure Communication
Real-time Updates
Open Source