Storybook MCP Server

Playwright를 사용하여 모든 Storybook 사이트에 연결하고 실시간으로 문서를 추출하는 범용 MCP 서버입니다. MCP(Model Context Protocol)를 지원하는 모든 AI 또는 클라이언트(Cursor, Claude Desktop, Windsurf 또는 기타 MCP 호스트)와 함께 사용할 수 있습니다.

GitHub

문서

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