MCP server that connects to any Storybook. Browse components, fetch docs and examples, search stories, and capture screenshots.
Connect Storybook MCP to Claude, Cursor or any other MCP client and it stops being a tab you switch to. MCP server that connects to any Storybook. Browse components, fetch docs and examples, search stories, and capture screenshots. The storybook mcp mcp server is what makes that connection.
A universal MCP server that connects to any Storybook site and extracts documentation in real-time using Playwright.
The toolset is worth reading before you wire it up, because it tells you what the integration is really for:
connect — Connect to a Storybook URL and get connection status. Required before other toolslist — List components and stories in the navigation. Optional: category, full (hierarchy)search — Search for components by name or path. Required: queryget_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: pathConfiguration is passed through the environment: STORYBOOK_URL. Treat anything key-shaped as a real credential — scope it to the minimum the server needs, and rotate it if it ever lands in a shared config.
Setup follows the usual MCP pattern — install or clone the server, register it in your client's configuration file, restart the client. The configuration blocks on this page cover the common clients.
This sits in the browser automation group, where several servers overlap in what they claim to do but differ sharply once you actually set them up. Storybook MCP's toolset — connect, list, search and 2 more — is a fair guide to whether it matches your workflow. It is maintained by raksbisht; worth a glance at recent repository activity before you build anything load-bearing on it.
This entry was verified against Storybook MCP's own documentation before publication; SyncDev keeps the directory reviewed rather than auto-generated.
| Tool | What it does |
|---|---|
| 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. |
{
"mcpServers": {
"storybook-mcp": {
"command": "npx",
"args": ["-y", "@raksbisht/storybook-mcp"]
}
}
}Configuration as documented by the project. Restart the client after saving.
| Variable | Description | Required |
|---|---|---|
| STORYBOOK_URL | Endpoint or connection string the server talks to. | Yes |
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
Industrial-strength web extraction — render, scrape, crawl and search entire sites into clean markdown.
The original Chromium automation reference server — simple, screenshot-driven browser control.
Give your coding agent the full DevTools toolbox: traces, network, console, heap snapshots and Lighthouse.
Puppeteer-powered browser control that drives pages from the accessibility tree instead of pixels.
Cloud browsers for AI agents — automation sessions that run in Browserbase's fleet, not on your machine.