MCP Server · v0.1.0

Connect Claude to
your Storybook

Browse components, generate story variants, and audit accessibility — all from your AI chat. No copy-pasting. No context-switching.

View on GitHub Get started
$ npm install -g @jonbai/mcp-storybook-bridge
Live demo
See it in action

What a conversation with Claude looks like after connecting the server.

Claude Desktop · Storybook connected
You  List all Button stories in my design system ── calling list_components { filter: "button" } Claude  Found 6 stories under components/Button:   1. components-button--primary      Primary   2. components-button--secondary   Secondary   3. components-button--destructive  Destructive   4. components-button--ghost       Ghost   5. components-button--loading     Loading   6. components-button--disabled    Disabled
You  Generate a Button variant: outline style, icon left, loading state ── calling get_component_story { storyId: "components-button--primary" } ── calling generate_variant { description: "outline, icon left, loading" } Claude  Here's the variant — ready to paste into your stories file: /** Outline button with left icon and loading state */ export const OutlineWithIconLoading: StoryObj<typeof Button> = {   args: {     variant: 'outline',     leftIcon: <ArrowRight size={16} />,     isLoading: true,     children: 'Continue',   }, };
You  Audit accessibility on Form/Input--required ── calling audit_accessibility { storyId: "form-input--required" } Claude  ⚠ 2 violations found in "form-input--required"   [serious]  color-contrast              Label text is 3.2:1 — needs 4.5:1 (WCAG AA).              Fix: increase label color from #9ca3af → #6b7280   [critical] label              Input missing associated label element.              Fix: add htmlFor/id pairing or aria-label
API
5 tools included

Everything Claude needs to work with your component library.

list_components
Lists all stories from the Storybook index with optional keyword filter.
get_component_story
Returns full story definition — args, argTypes, tags, and import path.
generate_variant
Generates a CSF3 TypeScript story from a natural language description.
audit_accessibility
Runs a11y audit via addon-a11y and returns violations with fix suggestions.
search_components
Fuzzy-searches components by name, tag, or description across the index.
Setup
Ready in 2 minutes

Works with Claude Desktop and Claude Code out of the box.

1

Install the package

Install globally via npm.

npm install -g @jonbai/mcp-storybook-bridge
2

Add to Claude Desktop config

Edit claude_desktop_config.json and add the server block:

{
  "mcpServers": {
    "storybook": {
      "command": "npx",
      "args": ["-y", "@jonbai/mcp-storybook-bridge"],
      "env": {
        "STORYBOOK_URL": "http://localhost:6006",
        "ANTHROPIC_API_KEY": "sk-ant-..."
      }
    }
  }
}
3

Start Storybook and restart Claude

Run your Storybook on port 6006, then restart Claude Desktop. The 5 tools appear automatically.

4

Or use with Claude Code

claude mcp add storybook npx @jonbai/mcp-storybook-bridge \
  -e STORYBOOK_URL=http://localhost:6006 \
  -e ANTHROPIC_API_KEY=sk-ant-...