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
संबंधित सर्वर
Alpha Vantage MCP Server
प्रायोजकAccess financial market data: realtime & historical stock, ETF, options, forex, crypto, commodities, fundamentals, technical indicators, & more
Loggles
Loggles is a local-first log sink with an MCP interface that lets coding agents (Claude Code, Cursor) query application logs directly
Shell Command MCP Server
Execute pre-configured and secure shell commands via a Go-based MCP server.
MCP Servers for CS Experimentation Workshop
A collection of MCP servers designed for rapid prototyping in CS experimentation workshops.
MCP Crash Course
A simple demonstration of the MCP Python SDK.
Code Graph RAG MCP
Code Rag with Graph - local only installation
animotion-mcp
745+ CSS3 animations and 9,000+ real SVG icons for AI coding agents. 10 MCP tools. Zero-clone setup via npx.
PromptOT
Manage, version, and publish LLM prompts via PromptOT. Build structured prompts from blocks, add variables, save drafts, publish versions, and deliver via API — all from chat.
CodeRabbit
Integrate with CodeRabbit AI for automated code reviews, pull request analysis, and report generation.
MCP Documentation Server
Integrates LLM applications with documentation sources using the Model Context Protocol.
MCP Servers
A collection of MCP servers for browser automation and database interaction, supporting Puppeteer, Postgres, MySQL, and Parquet.