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
Related Servers
Alpha Vantage MCP Server
sponsorAccess financial market data: realtime & historical stock, ETF, options, forex, crypto, commodities, fundamentals, technical indicators, & more
mcp-registry-mcp
Interact with an MCP registry to check health, list entries, and get server details.
PHP MCP Server for Laravel
A Laravel wrapper for the php-mcp/server library to expose Laravel applications as MCP servers.
Dify MCP HTTP Tools
Fetch and call tools via MCP over HTTP with SSE or Streamable transport. Supports configuration of multiple MCP services.
Mobile Xray MCP
Take screenshots and analyze mobile apps with AI assistance directly from your IDE.
Photon
A TypeScript framework that turns a single class into an MCP server, CLI tool, and web dashboard with a marketplace of 35 ready-made photons.
oclif MCP Server Plugin
An oclif CLI plugin that automatically discovers and serves commands via the Model Context Protocol (MCP).
BuiltWith
Query the BuiltWith API to discover the technology stacks of websites. Requires a BuiltWith API key.
Codex MCP Wrapper
An MCP server that wraps the OpenAI Codex CLI, exposing its functionality through the MCP API.
Kubeshark
MCP access to cluster-wide L4 and L7 network traffic, packets, APIs, and complete payloads.
mcp-graphql
A GraphQL server that supports the Model Context Protocol (MCP), enabling Large Language Models (LLMs) to interact with GraphQL APIs through schema introspection and query execution.