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
MCP Config Generator
A web tool for safely adding MCP servers to your Claude Desktop configuration.
Nereid - Mermaid charts
Create and explore Mermaid diagrams in collaboration with AI agents
ContextKeeper
Provides perfect memory for AI-assisted development by capturing project context snapshots, enabling natural language search, evolution tracking, and code intelligence.
Tmux MCP Server
Provides persistent shell execution through tmux sessions.
Hyperlend
Enables AI agents to interact with the Hyperlend protocol.
ZIN MCP Client
A lightweight CLI client that bridges local LLMs running on Ollama with STDIO MCP Servers.
OpenTelemetry Collector MCP Server
An MCP server for dynamically configuring OpenTelemetry Collectors, including receivers, processors, and exporters.
Voiceflow MCP Client
A Node.js client that integrates with remote MCP servers to provide tools for Voiceflow Agents.
Petstore MCP Server & Client
An MCP server and client implementation for the Swagger Petstore API.
MCP Experiments
An experimental dotnet MCP server that returns the current time, based on Laurent Kempé's tutorial.