Storybook Mcp

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

[](https://cursor.com/en-US/install-mcp?name=storybook-mcp&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkByYWtzYmlzaHQvc3Rvcnlib29rLW1jcCJdLCJlbnYiOnsiU1RPUllCT09LX1VSTCI6Imh0dHBzOi8vc3Rvcnlib29rLmpzLm9yZyJ9fQ==)

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

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: raksbisht
• Source: raksbisht/storybook-mcp
• License: MIT

Install and usage instructions live in the source repository linked above.