Skip to main content

The-Wall Now Speaks to Your AI Agent

· 3 min read

We've added the official @storybook/addon-mcp to the web package. It turns our running Storybook into an MCP server, letting AI coding agents (Claude Code, Cursor, Copilot, etc.) discover and reuse our real design system components instead of inventing their own.

What Is It​

MCP (Model Context Protocol) is a standard way for AI tools to talk to external systems. The Storybook MCP addon exposes our component catalog over that protocol: while Storybook is running, it serves an MCP endpoint that an agent can connect to and query.

In practice, the agent stops guessing what a PrimaryButton looks like or which props QuickStakes accepts — it asks Storybook directly and gets the real stories, args, and source.

What This Unlocks​

  • Grounded UI generation — Agents build screens from our actual components and props, not hallucinated APIs.
  • Self-serve component discovery — "What do we have for X?" is answered from the live story catalog.
  • Accurate prop usage — Variants, required props, and defaults come straight from the stories.
  • Less back-and-forth — Fewer wrong imports and invented props means less time correcting AI output.

Getting Started​

Run Storybook locally as usual, then point your AI tool at the MCP endpoint it exposes: http://localhost:8000/mcp.

Claude Code​

Add it as an HTTP MCP server from the terminal:

claude mcp add --transport http storybook http://localhost:8000/mcp

Cursor​

Add the server to your .cursor/mcp.json (project) or ~/.cursor/mcp.json (global):

{
  "mcpServers": {
    "storybook": {
      "url": "http://localhost:8000/mcp"
    }
  }
}

Then enable storybook under Settings → MCP.

VS Code​

With GitHub Copilot's agent mode, add the server to .vscode/mcp.json:

{
  "servers": {
    "storybook": {
      "type": "http",
      "url": "http://localhost:8000/mcp"
    }
  }
}

Start the server from the MCP view (or the MCP: List Servers command), then use it from the Chat panel in Agent mode.

Note: Storybook must be running for the endpoint to be reachable. Start your AI tool's MCP connection after Storybook is up.

Examples of Usage​

Once connected, try prompts like:

  • "Give me all the buttons we have." — the agent lists every button component in the catalog (PrimaryButton, SecondaryButton, SportsbookBetButton, …) with their variants and props.
  • "Using our design system, build a bet confirmation screen with a primary action and a secondary cancel." — the agent pulls PrimaryButton / SecondaryButton with correct props.
  • "What PrimaryButton variants do we have, and which props are required?" — answered from the live story catalog.
  • "Add a stake selector to this view." — the agent finds QuickStakes and wires it up with valid args.
  • "Show me how Switch is used in its stories." — the agent reads the real story source instead of guessing.

Why This Matters​

A design system only delivers value when teams actually reuse its components. By making Storybook readable by AI agents, we close the gap between "ask an agent for a UI" and "get a UI built on The Wall." Less reinvention, more consistency, and faster delivery — directly from the source of truth.