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
Project Atlantis
A Python MCP host server that allows for dynamic installation of functions and third-party MCP tools.
SkyDeckAI Code
A comprehensive toolkit for AI-driven development, offering file system operations, code analysis, execution, web searching, and system information retrieval.
Opentrons
Control Opentrons robots, manage protocols, and search API documentation.
GrowthBook
Create and read feature flags, review experiments, generate flag types, search docs, and interact with GrowthBook's feature flagging and experimentation platform.
Remote MCP Server (Authless)
An example of a remote MCP server without authentication, deployable on Cloudflare Workers.
Ultra Context
The context API for AI agents
Lanhu MCP
⚡ Boost Requirement Analysis Efficiency by 200%! The World's First Team Collaboration MCP Server Designed for the AI Coding Era. Automatically analyzes requirements, generates full-stack code, and downloads design assets.
Dify Plugin Agent
An agent that supports Function Calling and ReAct for the MCP protocol via HTTP with SSE or Streamable HTTP transport.
Semgrep
Enable AI agents to secure code with Semgrep.
Buildable
Official MCP server for Buildable AI-powered development platform. Enables AI assistants to manage tasks, track progress, get project context, and collaborate with humans on software projects.