Storybook

You can run a Storybook MCP Server to give AI assistants and tools structured access to your Storybook, including components, stories, and visual captures. This server connects to any running Storybook instance and exposes practical actions you can trigger from your MCP client, such as listing components, inspecting stories, and taking screenshots for visual testing.

How to use

Connect your MCP client to the Storybook MCP Server and use the available tools to explore components, list stories, inspect props, and capture screenshots. You can target a local Storybook during development, a deployed Storybook in production, or public component libraries. Use natural language prompts to perform tasks like listing all components, filtering stories by component, or capturing screenshots at specified viewports.

How to install

Prerequisites: Node.js 18 or higher and a running Storybook instance. Install the MCP server package globally or run it from your project.

Installation steps

# Install the MCP server globally
npm install -g storybook-mcp-server

# If you prefer to build and run locally from a clone:
# git clone https://github.com/stefanoamorelli/storybook-mcp-server.git
# cd storybook-mcp-server
# npm install
# npm run build

Configure your client to connect

{
  "mcpServers": {
    "storybook": {
      "command": "npx",
      "args": ["storybook-mcp-server"],
      "env": {
        "STORYBOOK_URL": "http://localhost:6006"
      }
    }
  }
}

Starting Storybook and server usage

Start your Storybook instance in your project directory before using the MCP server tools. Then ensure the MCP server is running with the configured command and environment.

Additional configuration options

You can customize how the MCP server runs by setting environment variables in your client configuration. For example you can point to the Storybook URL, specify output directories for screenshots, and control logging levels.

Troubleshooting

If screenshots or connections fail, verify that Puppeteer can access Chromium, confirm the Storybook URL is correct, and ensure the MCP server process is running with the expected environment.

MCP Helpers and capabilities

The server provides commands to discover components, list stories, fetch component props, and capture screenshots. You can request details about a specific story or component to drive automated checks or generate documentation.

Configuration and end-to-end flow

The recommended run flow is to launch Storybook, start the MCP server, and then issue MCP tool calls from your client to explore and verify the Storybook content.

Notes on security and access

Keep your Storybook URL and MCP server endpoints protected when exposing them in shared environments. Use appropriate network controls and, if needed, restrict access to authorized clients only.

Tips for best results

For large Storybooks, prefer listing components first, then filter to the specific component you are interested in. Use viewport variations to validate visual consistency during screenshot captures.

Available tools

storybook_list_components

Lists all components available in the Storybook instance.

storybook_list_stories

Lists all stories, optionally filtered by component.

storybook_get_story_details

Gets detailed information about a specific story.

storybook_get_component_props

Gets the props/definitions for a component.

storybook_capture_screenshot

Captures a screenshot of a specific story.

storybook_capture_all_screenshots

Captures screenshots of all stories.