Storybook MCP
A universal MCP server that connects to any Storybook site and extracts documentation in real-time using Playwright. Use it with any AI or client that supports MCP (Model Context Protocol)—Cursor, Claude Desktop, Windsurf, or other MCP hosts.
Storybook MCP
A universal MCP server that connects to any Storybook site and extracts documentation in real-time using Playwright.
Use it with any AI or client that supports MCP (Model Context Protocol)—Cursor, Claude Desktop, Windsurf, or other MCP hosts.
Features
- Works with any Storybook - Auto-detects format and version
- Live browsing - Real-time Playwright-based extraction
- Auto-detection - Detects Storybook format automatically
- Single file - Just
index.js, no build step
MCP Configuration
Cursor — one-click install
Using npx (recommended)
Add to your MCP client config (e.g. Cursor: ~/.cursor/mcp.json or Settings → MCP; Claude: claude_desktop_config.json; etc.):
{
"mcpServers": {
"storybook-mcp": {
"command": "npx",
"args": ["-y", "@raksbisht/storybook-mcp"]
}
}
}
With a default Storybook URL (optional):
{
"mcpServers": {
"storybook-mcp": {
"command": "npx",
"args": ["-y", "@raksbisht/storybook-mcp"],
"env": {
"STORYBOOK_URL": "https://your-storybook.com"
}
}
}
}
From source (development)
git clone https://github.com/raksbisht/storybook-mcp.git
cd storybook-mcp
npm install
Then in your MCP config:
{
"mcpServers": {
"storybook-mcp": {
"command": "node",
"args": ["/path/to/storybook-mcp/index.js"]
}
}
}
Available Tools
| Tool | Description |
|---|---|
connect | Connect to a Storybook URL and get connection status. Required before other tools. |
list | List components and stories in the navigation. Optional: category, full (hierarchy). |
search | Search for components by name or path. Required: query. |
get_docs | Get documentation, code examples, and content for a component or story. Required: path. Optional: full, format (markdown/structured). |
screenshot | Take a screenshot of a component or story. Required: path. |
Example
1. connect({ url: "https://storybook.js.org" })
2. search({ query: "button" })
3. get_docs({ path: "components-button--basic" })
Compatibility
Works with common Storybook deployments (various URL formats and index.json-based setups).
License
MIT
관련 서버
Scout Monitoring MCP
스폰서Put performance and error data directly in the hands of your AI assistant.
Alpha Vantage MCP Server
스폰서Access financial market data: realtime & historical stock, ETF, options, forex, crypto, commodities, fundamentals, technical indicators, & more
WordPress Feel Chatbot Plugin
A WordPress plugin that transforms a WordPress site into an MCP server, allowing direct access to its content.
Rails MCP Server
An MCP server for Rails projects, allowing LLMs to interact with your application.
Facets Module
Create and manage Terraform modules for cloud-native infrastructure using the Facets.cloud FTF CLI.
Steadybit
Interact with the Steadybit platform to run chaos engineering experiments.
Cloudflare MCP Server Example
A template for deploying a remote MCP server on Cloudflare Workers without authentication.
Vibe-Coder
A structured development workflow for LLM-based coding, including feature clarification, planning, phased development, and progress tracking.
Crypto HFT MCP Server
Integrate AI with high-frequency cryptocurrency trading systems.
Fyers MCP Server
An MCP server for the Fyers API v3, featuring automated OAuth authentication.
Glider
Roslyn-powered C# code analysis server for LLMs. Supports stdio and HTTP transports.
MCP Java Bridge
A bridge for the MCP Java SDK that enables TCP transport support while maintaining stdio compatibility for clients.