storybook

This Storybook MCP Server provides programmatic access to a running Storybook instance. It enables an AI assistant to discover components, list and filter stories, inspect props and parameters, and generate visual test artifacts like screenshots. The server automatically detects the Storybook setup and exposes endpoints and capabilities that let you browse components, explore stories by component, and retrieve detailed story data including args, parameters, and prop definitions. You can also trigger visual testing by capturing screenshots of specific stories or across responsive viewports. To use it, point the server at a running Storybook via the STORYBOOK_URL environment variable and invoke the available MCP tools to request data or visuals from your Storybook instance.

Prerequisites:

• Node.js (v18+ as indicated by the README) and npm or yarn installed
• Access to run npm global installs or clone/pull the repository

Install via npm (recommended):

npm install -g storybook-mcp-server

Or clone and build locally:

git clone https://github.com/stefanoamorelli/storybook-mcp-server.git
cd storybook-mcp-server
npm install
npm run build

Configure Claude Desktop (example):

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

Start Storybook locally first if needed:

npm run storybook
# or
yarn storybook

Ensure Storybook is accessible at the URL you provide in STORYBOOK_URL.

Tips and notes:

• Puppeteer-based screenshot functionality will download a compatible Chromium automatically when first used. You can override this by ensuring Chrome/Chromium is installed on your system.
• Common environment variables:
  • STORYBOOK_URL: URL to the Storybook instance (default http://localhost:6006)
  • OUTPUT_DIR: Directory to save screenshots (default ./screenshots)
  • LOG_LEVEL: Logging level (error, warn, info, debug) (default info)
• If using a custom Storybook build path or a non-standard setup, you may need to adjust the STORYBOOK_URL or additional CLI options supported by the server.
• When running locally, ensure the Storybook process remains alive while the MCP server operates to allow continuous querying and screenshot generation.