Storybook MCP Server

A Model Context Protocol (MCP) server that provides tools to interact with Storybook documentation and component information.

Features

• getComponentList: Get a list of all components from a configured Storybook
• getComponentsProps: Get detailed props information for multiple components using headless browser automation
• Custom Tools: Create custom tools that can extract any information from your Storybook pages using JavaScript

Installation and Configuration

MCP Settings

Add the following configuration to MCP settings:

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

storybook-mcp starts immediately and installs Chromium in the background the first time it runs. If you want to preinstall the browser ahead of time, run npx -y storybook-mcp@latest install-browser. Until that download finishes, the first browser-backed tool call can take longer.

Environment Variables

• STORYBOOK_URL (required): The URL to your Storybook's index.json file
• CUSTOM_TOOLS (optional): JSON array of custom tool definitions for extracting specific information from your Storybook

Usage

The server provides built-in tools and supports custom tools:

Built-in Tools

1. getComponentList

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

Example:

Available components:
Accordion
Avatar
Badge
Button
...

2. getComponentsProps

Gets detailed props information for multiple components, including:

• Property names
• Types
• Default values
• Descriptions
• Required/optional status

Parameters:

• componentNames (array of strings): Array of component names to get props information for

Example usage:

Tool: getComponentsProps
Parameters: { "componentNames": ["Button", "Input", "Avatar"] }

Custom Tools

You can define custom tools to extract specific information from your Storybook pages. Each custom tool can:

• Navigate to any page in your Storybook
• Execute custom JavaScript to extract data
• Return structured data to the AI assistant

Custom Tool Structure:

interface CustomTool {
  name: string; // Unique tool name
  description: string; // Tool description for the AI
  parameters: object; // Input parameters schema (optional)
  page: string; // URL to navigate to
  handler: string; // JavaScript code to execute on the page
}

Example 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)"
  },
  {
    "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 }))"
  }
]

For more examples and detailed documentation, see examples/custom-tools-example.md.

Example

Set Spectrum storybook-mcp config with STORYBOOK_URL and CUSTOM_TOOLS environment variables.

{
  "mcpServers": {
    "storybook-mcp": {
      "command": "npx",
 

... [View full README on GitHub](https://github.com/mcpland/storybook-mcp#readme)