mcpField
S
Storybook Mcp

Storybook Mcp

Local
github.com/raksbishtDeveloper Tools1Updated 33w ago

About Storybook Mcp

Storybook Mcp is a server for AI clients that need to inspect Storybook sites. It uses Playwright to browse live content and retrieve component and story documentation without a build step.

Key features

  1. 01Connects to Storybook sites
  2. 02Detects format and version automatically
  3. 03Browses and extracts live content with Playwright
  4. 04Lists and searches components and stories
  5. 05Retrieves docs, examples, and screenshots

Use cases

  1. 01Find a component by name or path
  2. 02Retrieve documentation for a story
  3. 03Review a component with a screenshot

MCP support

Exposes tools for connecting to a Storybook URL, listing and searching components and stories, retrieving documentation, and taking screenshots. MCP clients can use these tools to inspect live Storybook content.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
"mcpServers": {
"storybook": {
"command": "npx",
"args": [
"-y",
"@raksbisht/storybook-mcp"
],
"env": {
"STORYBOOK_URL": "<STORYBOOK_URL>"
}
}
}
}
Run commandnpx -y @raksbisht/storybook-mcp
Environment variables to set
STORYBOOK_URL

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@raksbisht/storybook-mcp

Tools

5

Saved tool list · updated 3w ago

ParameterTypeRequiredDescription
urlstringNoStorybook URL (optional if already connected, will return current status)

Details

From the project README

Storybook MCP

Storybook MCP logo

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

Add MCP server to Cursor

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

ToolDescription
connectConnect to a Storybook URL and get connection status. Required before other tools.
listList components and stories in the navigation. Optional: category, full (hierarchy).
searchSearch for components by name or path. Required: query.
get_docsGet documentation, code examples, and content for a component or story. Required: path. Optional: full, format (markdown/structured).
screenshotTake 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

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.