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
Servidores relacionados
Scout Monitoring MCP
patrocinadorPut performance and error data directly in the hands of your AI assistant.
Alpha Vantage MCP Server
patrocinadorAccess financial market data: realtime & historical stock, ETF, options, forex, crypto, commodities, fundamentals, technical indicators, & more
Petstore MCP Server & Client
An MCP server and client implementation for the Swagger Petstore API.
MCP Node.js Debugger
Provides runtime debugging access to Node.js applications for code editors like Cursor or Claude Code.
Replicate Recraft V3
Generate high-quality images using the Recraft V3 model via the Replicate API.
Tatara MCP Server
An MCP server for interacting with the Tatara blockchain ecosystem. Requires configuration for the Tatara RPC endpoint and a wallet private key.
Axone MCP
A lightweight server exposing Axone's capabilities through the Model-Context Protocol.
Laravel Codebase Introspection
Introspects Laravel codebases to provide structured information about views, routes, classes, and models using the mateffy/laravel-introspect package.
Cisco SSH MCP Server
Connect to, configure, and monitor Cisco network devices like routers and switches via SSH.
MCP-Haskell
A complete Model Context Protocol (MCP) implementation for Haskell, supporting both StdIO and HTTP transport.
MasterGo Magic MCP
A standalone MCP service that connects MasterGo design tools with AI models, enabling them to retrieve DSL data directly from design files.
Slowtime MCP Server
A server for secure time-based operations, featuring timing attack protection and timelock encryption.