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
Server Terkait
Scout Monitoring MCP
sponsorPut performance and error data directly in the hands of your AI assistant.
Alpha Vantage MCP Server
sponsorAccess financial market data: realtime & historical stock, ETF, options, forex, crypto, commodities, fundamentals, technical indicators, & more
Flowbite MCP
This MCP server is the official tool that allows you to work with the Flowbite UI framework and generate websites, layouts, and themes using AI
Integrated MCPs Guide
An integrated MCP server combining Azure DevOps, Gmail, Browser, and Gemini AI functionalities on a Node.js server.
DIY MCP
A from-scratch implementation of the Model Context Protocol (MCP) for building servers and clients, using a Chinese tea collection as an example.
Agentic Tools MCP Companion
A VS Code extension with a GUI for the agentic-tools-mcp server, enhancing task and memory management.
Gemini Imagen 3.0
Generate high-quality images using Google's Imagen 3.0 model via the Gemini API.
Aptos NPM MCP
A MCP server for interacting with Aptos NPM packages.
Instant Meshes MCP
A 3D model processing server for automatic retopology, simplification, and quality analysis of OBJ/GLB models.
LastSaaS
SaaS boilerplate / starter kit: comprehensive, Stripe billing, product management, multi-tenant; agentic controls via MCP
Studio MCP
Turns any command-line interface (CLI) command into a simple StdIO-based MCP server.
Neo N3 MCP Server
Integrates with the Neo N3 blockchain for wallet management, asset transfers, contract interactions, and blockchain queries.