home / mcp / storybook mcp server

Storybook MCP Server

Provides tools to extract component data from Storybook by querying index.json and rendering docs with headless browsers.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "mcpland-storybook-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "storybook-mcp@latest"
      ],
      "env": {
        "CUSTOM_TOOLS": "[{\"name\":\"getIconList\",\"description\":\"Get All Icons from the Icon page\",\"parameters\":{},\"page\":\"https://your-storybook.com/?path=/docs/icon--docs\",\"handler\":\"Array.from(document.querySelectorAll('.icon-name')).map(i => i.textContent)\"}]",
        "STORYBOOK_URL": "https://your-storybook-domain.com/index.json"
      }
    }
  }
}

You deploy this MCP server to interact with a Storybook instance, exposing component data and props through built-in and customizable tools so you can automate extraction and analysis of your Storybook docs and components.

How to use

Use an MCP client to connect to the Storybook MCP server you run locally or remotely. The server provides built-in tools to list components and fetch their props, plus the ability to add custom tools that run JavaScript on Storybook pages to extract any data you need. Start the server with the command you configured, then query the available tools and pass parameters like component names to retrieve structured data for your documentation, testing, or automation workflows.

How to install

Prerequisites you need before installation do not require anything beyond a modern Node.js environment and a Chromium-capable browser for headless automation.

Install and run this MCP server using the following steps.

Configuration and usage notes

Configure the MCP server to point at your Storybook instance and, optionally, add any custom tools that you want to run. The configuration example below shows how to set the Storybook URL and include optional custom tools in the environment.

{
  "mcpServers": {
    "storybook": {
      "command": "npx",
      "args": ["-y", "storybook-mcp@latest"],
      "env": {
        "STORYBOOK_URL": "<your_storybook_url>/index.json"
      }
    }
  }
}

Examples of built-in and custom tools

The server includes built-in tools and supports custom tools that you define. Built-in tools include getComponentList and getComponentsProps. You can also define custom tools to navigate to specific Storybook pages and run JavaScript to extract data.

Example custom tools defined to extract data from Storybook pages can look like this.

[
  {
    "name": "getIconList",
    "description": "Get All Icons from the Icon page",
    "parameters": {},
    "page": "https://your-storybook.com/?path=/docs/icon--docs",
    "handler": "Array.from(document.querySelectorAll('.icon-name')).map(i => i.textContent)"
  },
  {
    "name": "getColorPalette",
    "description": "Extract color palette from design tokens",
    "parameters": {},
    "page": "https://your-storybook.com/?path=/docs/design-tokens--colors",
    "handler": "Array.from(document.querySelectorAll('.color-swatch')).map(el => ({ name: el.getAttribute('data-color-name'), value: el.style.backgroundColor }))"
  }
]

Install and run locally (step-by-step)

Step 1. Install dependencies for development. If you are using Yarn, install the project dependencies.

Step 2. Install Playwright browsers so headless automation can launch a Chromium instance.

Step 3. Set the Storybook URL that you want to connect to.

Step 4. Run the server in development mode.

yarn install
npx playwright install chromium
export STORYBOOK_URL="your-storybook-url"
yarn dev

How to start from a basic JSON configuration

Use the following minimal MCP configuration to run with the built-in and default tooling.

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "npx",
      "args": ["-y", "storybook-mcp@latest"],
      "env": {
        "STORYBOOK_URL": "https://opensource.adobe.com/spectrum-web-components/storybook/index.json"
      }
    }
  }
}

Notes on running and troubleshooting

If you run into errors, verify that the Storybook URL is accessible and returns a valid index.json (or stories.json for a newer Storybook). Ensure Playwright can launch Chromium in your environment and that the specified environment variables are correctly set.

Security and maintenance considerations

Keep the MCP server up to date with the latest version of the storybook-mcp package to benefit from new features and security fixes. Limit access to your MCP endpoints to trusted clients and consider adding authentication for sensitive automation tasks.

Examples and notes

The server expects a Storybook instance that exposes an index.json file. Common patterns include index.json at the root or under a storybook path like /storybook/index.json. The environment variables you provide guide the server to the correct Storybook data and optional custom tooling.

Available tools

getComponentList

Retrieves a list of all components available in the configured Storybook.

getComponentsProps

Fetches detailed props information for multiple components, including property names, types, default values, descriptions, and required/optional status.

CustomTools

Allows you to define custom tools that navigate to a Storybook page, run JavaScript, and return structured data to the MCP client.