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
Reactive AI Agent Framework
A reactive AI agent framework for creating agents that use tools to perform tasks, with support for multiple LLM providers and MCP servers.
MCP Servers
A collection of MCP servers for browser automation and database interaction, supporting Puppeteer, Postgres, MySQL, and Parquet.
MCP Server Example
An example MCP server for educational purposes, demonstrating how to build a functional server that integrates with LLM clients.
PinRAG
Cited RAG MCP: PDFs, GitHub, YouTube, Discord exports, local files, one shared index.
ActionKit MCP Starter
A demonstration server for ActionKit, providing access to Slack actions via Claude Desktop.
BlenderMCP
Integrates with Blender to enable text and image-based 3D model editing using the Model Context Protocol.
MCP WordPress Post Server
Manage WordPress posts and upload images directly from file paths.
Oso Cloud MCP Server
Understand, develop, and debug authorization policies in Oso Cloud.
Remote DCInside MCP Server (Authless)
An example of a remote MCP server without authentication, deployable on Cloudflare Workers.
Jetty.io
Work on dataset metadata with MLCommons Croissant validation and creation.