Storybook

Add the MCP server to your project

In your AI assistant's MCP configuration (e.g. .claude/settings.json for Claude Code) add one or more servers:

{
  "mcpServers": {
    "storybook-react": {
      "type": "http",
      "url": "https://atelier.pieper.io/storybook-react/mcp"
    },
    "storybook-angular": {
      "type": "http",
      "url": "https://atelier.pieper.io/storybook-angular/mcp"
    },
    "storybook-vue": {
      "type": "http",
      "url": "https://atelier.pieper.io/storybook-vue/mcp"
    }
  }
}

Use it in your prompts

Once connected, your AI assistant can look up component props, variants, and usage examples directly from Storybook:

Build a settings page using @atelier-ui/react components.
Use the storybook-react MCP to check available props.

Two MCP surfaces, three toolsets

Storybook 10.4 ships MCP in two layers. The hosted endpoint serves docs from a static manifest — works for any framework, no install. The local dev surface adds dev & test tools while a local Storybook is running, and is officially React-preview only as of 10.4. Tools are grouped into three toolsets (dev, docs, test), each toggleable in the addon options.

The hosted endpoint reads manifests/components.json emitted by @storybook/addon-mcp at build time. As of Storybook 10.4 that file is only generated for React (via TypeScript Language Server docgen — the new experimentalReactComponentMeta docgen path). Angular & Vue static builds only emit docs.json — hosted MCPs for those frameworks return MDX docs (foundations, tokens) but no per-component props. Run the local Storybook dev server for per-component data in Angular/Vue, or use the React MCP as the cross-framework API reference (the spec is identical, only the binding differs).

The dev / test toolsets require a running Node.js Storybook dev server and are gated by Storybook 10.4 to React for now. docs tools support a storybookId parameter to scope a request to one source in multi-source (composition) setups; list-all-documentation accepts withStoryIds: true when downstream tools need story IDs.

What's new in Storybook 10.4 MCP

The 10.4 release tightens the agentic loop on four fronts:

Toolset configuration

All three toolsets default to true. Disable a toolset when an agent should not see those tools — e.g. read-only agents:

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  addons: [
    {
      name: '@storybook/addon-mcp',
      options: {
        toolsets: {
          dev: true,    // preview-stories, get-storybook-story-instructions, get-changed-stories
          docs: true,   // list-all-documentation, get-documentation, get-documentation-for-story
          test: false,  // disable run-story-tests for read-only agents
        },
      },
    },
  ],
  features: {
    experimentalComponentsManifest: true, // gates the docs toolset
    changeDetection: true,                // gates get-changed-stories
  },
};

export default config;

Telemetry is on by default — disable with Storybook's core.disableTelemetry.

Endpoints