How do I install the storybook mcp server?

Use a recorded configuration for your client, replace example credential values and paths, and verify the documented runtime. Restart or reconnect the client, then inspect the available tools.

What credentials does it need?

It reads `STORYBOOK_URL` from the environment. Store these in your client's env block or a secrets manager — never commit them to a repository — and grant the narrowest scope that still covers your use case.

SSyncDev

Start a project

Storybook MCP Server

MCP server that connects to any Storybook. Browse components, fetch docs and examples, search stories, and capture screenshots.

Local serverstdio

What is the Storybook MCP Server?

MCP server that connects to any Storybook. Browse components, fetch docs and examples, search stories, and capture screenshots.

What the server does

A universal MCP server that connects to any Storybook site and extracts documentation in real-time using Playwright.

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

More MCP options

Compare MCP servers by category, or browse hosted MCP servers if you prefer an endpoint over a local process.

Maintainer setup documentation.

Recorded tools

Check the linked publisher documentation and your connected client's tool list. Names and availability can vary with the server version and account permissions.

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.

How to install the Storybook MCP Server

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@raksbisht/storybook-mcp"
      ]
    }
  }
}

From the project documentation. Replace placeholders and example paths before connecting.

Example prompts to try

“Use Storybook MCP to connect.”
“Use Storybook MCP to list.”
“Use Storybook MCP to search.”

Frequently asked questions

MCP server that connects to any Storybook. Browse components, fetch docs and examples, search stories, and capture screenshots. Confirm the tools offered by your installed version in the connected client. Tool availability and permissions depend on the server and account configuration.