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
Screeny
A macOS-only server that enables LLMs to capture screenshots of specific application windows, providing visual context for development and debugging.
Data Structure Protocol (DSP)
Graph-based long-term memory skill for AI (LLM) coding agents — faster context, fewer tokens, safer refactors
Signet
Cryptographic action receipts for AI agents. Signs every MCP tool call with Ed25519, hash-chained audit log. 3 lines of code to integrate.
UntitledUI MCP
An MCP server for UntitledUI components
mcp-airflow-simple
simple mcp server for Airflow 3 (API version 2)
Composer Package README MCP Server
Fetches comprehensive information about Composer packages from Packagist, including READMEs, metadata, and search functionality.
pipeyard
Curated MCP connector marketplace for industry verticals — Construction, Finance, Healthcare, and Logistics with full docs, curl examples and sandbox testing.
Mong MCP Server
A moby-like random name generator for use with tools like Claude Desktop and VS Code Copilot Agent.
MCP Tool Poisoning Attacks
A Node.js project demonstrating MCP client and server interactions for tool poisoning attacks, requiring an Anthropic API key.
Scientific Computation MCP
Provides tools for scientific computation, including tensor storage, linear algebra, vector calculus, and visualization.