Submit Log in

Storybook

by Storybook

Repository Docs npm

Developer Tools

storybookui-testingfrontendreactcomponent-library

Summary

Official addon that connects a running Storybook to AI agents for component-aware UI generation and testing.

Features

Exposes a project's own component library and usage guidelines to AI agents
Returns live story URLs from a running Storybook for visual preview
Generates and previews new stories for agent-written UI
Runs targeted interaction and accessibility tests on changed stories only
Works with any MCP client: Claude Code, Cursor, Gemini CLI, VS Code Copilot, and more

Installation

Set up this MCP server in your favorite AI agent — copy a ready-made configuration below.

Any MCP-compatible agent

Most agents (Claude, Cursor, Windsurf, VS Code, and more) read a standard mcpServers configuration.

Open your agent's MCP configuration file.
Merge the snippet below into it.
Restart the agent — the "Storybook" tools will be available.

{
  "mcpServers": {
    "storybook-addon-mcp": {
      "command": "npx",
      "args": [
        "mcp-add",
        "--type",
        "http",
        "--url",
        "http://localhost:6006/mcp",
        "--scope",
        "project"
      ]
    }
  }
}

Claude Code

Add the server with a single CLI command.

claude mcp add storybook-addon-mcp -- npx mcp-add --type http --url http://localhost:6006/mcp --scope project

Claude Desktop

Add the server to claude_desktop_config.json (Settings → Developer → Edit Config).

{
  "mcpServers": {
    "storybook-addon-mcp": {
      "command": "npx",
      "args": [
        "mcp-add",
        "--type",
        "http",
        "--url",
        "http://localhost:6006/mcp",
        "--scope",
        "project"
      ]
    }
  }
}

Description

The Storybook MCP addon turns a project's own component library into context an AI agent can use directly, instead of asking the agent to guess at conventions from scratch. Once installed and running, it exposes the agent's client to two tools: one that hands over UI development instructions and documented usage guidelines for the project's existing components, and one that returns live story URLs from the running Storybook instance so generated UI can be previewed against real, rendered components.

Because the agent can see what components already exist and how they're meant to be used, it reuses them instead of inventing new one-off markup, then writes matching stories so a human can visually verify each new UI state. From there, Storybook can run interaction and accessibility tests against just the stories that changed, giving a fast, targeted feedback loop rather than a full test-suite run on every edit.

It currently supports Vite-based Storybook setups (React, Next.js, and SvelteKit are called out explicitly) and works with any MCP-compatible client, including Claude Code, Cursor, Gemini CLI, and VS Code Copilot. The addon and its AI features are in preview and currently focused on React projects.