Home / MCP / Storybook MCP Server

Storybook MCP Server

Provides Storybook story data to MCP clients by querying configured Storybook setups.

javascript

25stars

View on GitHub

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

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

Storybook MCP Server lets you interact with Storybook through the Model Context Protocol, enabling you to query stories and integrate Storybook data into MCP-enabled clients and tooling. It provides a straightforward way to fetch story IDs from a configured Storybook setup and reuse that data across your development workflows.

How to use

You can use this MCP server with any MCP client by starting the Storybook MCP server configuration and connecting to it through the MCP transport. The server exposes a get-stories operation that returns the list of story identifiers from your Storybook configuration. Use it to populate menus, dashboards, or automated tooling that depends on Storybook story data.

How to install

Prerequisites: ensure Node.js and npm are available on your system.

Install Node.js and npm if they are not already installed. You can verify by running these commands on your shell:

node -v
npm -v

Configure the MCP server in your MCP client setup by including the following mcpServers configuration. This uses npx to fetch the latest Storybook MCP package and start it in MCP mode.

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

Additional notes

This MCP server uses a stdio transport to communicate with the MCP client and caches data in a local cache directory relative to the script location. It is built with the @modelcontextprotocol/sdk. When you set up Storybook MCP, you do not need to install the framework upfront unless the index build requires it; the MCP runtime will handle interactions through the configured command.

Security and notes

Keep your MCP credentials and any access controls in mind when exposing MCP endpoints. If you integrate with other systems, apply standard security practices for Node-based tooling and ensure your Storybook configuration directory is accessible to the MCP server.

Available tools

get-stories

Retrieves a list of story ids from a Storybook configuration, based on the provided configDir path.