Skip to content
Storybook

StorybookMCP Server

by Storybook
Added to Onei
Repository Docs npm
Developer Tools

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.

  1. Open your agent's MCP configuration file.
  2. Merge the snippet below into it.
  3. 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"
      ]
    }
  }
}

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.

Related MCP Servers

MCP: Mantine MCP Server

by Mantine

Mantine's official documentation server: gives an agent the component list, per-component docs and the exact props table, so generated React code matches the installed version.

Developer Tools

MCP: NVIDIA Elements

by NVIDIA

NVIDIA's official MCP server for the Elements design system — component APIs, design tokens, icons and validated project scaffolding for AI/ML and robotics UIs.

Developer Tools

MCP: Panda CSS MCP Server

by Panda CSS (Chakra UI)

Official Panda CSS MCP server that exposes your design system - tokens, recipes, patterns, breakpoints and the resolved config - so an agent styles components with real values.

Developer Tools
Browse all MCP servers →