Storybook MCP Server for Claude

Content

The Storybook MCP server connects Claude and other MCP-capable agents to a running Storybook project. Once @storybook/addon-mcp is installed and the Storybook dev server is running, the local MCP endpoint exposes toolsets for component documentation, story authoring guidance, previews, and Storybook tests.

This is useful when an agent is building UI inside a real design system. Instead of hallucinating component props or copying patterns from unrelated projects, Claude can inspect documented components, read story examples, generate or update stories, preview UI states, and run Storybook tests or accessibility checks when they are configured.

Features

• Local HTTP MCP endpoint exposed from the Storybook dev server.
• Installation through npx storybook add @storybook/addon-mcp.
• Agent configuration through npx mcp-add --type http --url STORYBOOK_LOCAL_MCP_URL --scope project or manual MCP client config.
• Docs toolset for listing component documentation, fetching component docs, and reading story-specific documentation.
• Development toolset for story-writing instructions and story previews.
• Testing toolset for running Storybook tests and returning results, including accessibility findings when configured.
• Storybook composition support, so composed Storybooks with manifests can expose combined component knowledge to agents.
• Project-instruction guidance for telling agents to verify component props and usage before generating UI.

Use Cases

• Ask Claude to build UI using only documented components from the local Storybook design system.
• Inspect component props and examples before generating a new screen or state.
• Generate or update stories that demonstrate a component or feature workflow.
• Preview generated stories directly in an MCP-capable chat interface or return links to local Storybook stories.
• Run Storybook interaction tests and accessibility checks for stories touched by an agent.
• Use composed Storybooks to let an agent find components across multiple internal design systems without copying implementation details manually.

Installation

Add the Storybook MCP addon

From the project with Storybook installed, run:

npx storybook add @storybook/addon-mcp

Start the Storybook dev server, then set STORYBOOK_LOCAL_MCP_URL to the local MCP endpoint shown by Storybook.

STORYBOOK_LOCAL_MCP_URL

Add the MCP server to an agent

Use Storybook's documented mcp-add flow, replacing STORYBOOK_LOCAL_MCP_URL with the local Storybook MCP endpoint:

npx mcp-add --type http --url STORYBOOK_LOCAL_MCP_URL --scope project

Choose a descriptive server name, such as project-storybook, so the agent can distinguish it from other MCP tools.

Manual MCP configuration

{
  "mcpServers": {
    "storybook": {
      "type": "http",
      "url": "STORYBOOK_LOCAL_MCP_URL"
    }
  }
}

Examples

List documented components

Use the Storybook MCP server to list all documented components before generating UI.

Inspect props before coding

Get documentation for the Button and TextInput components, then build a login form using only documented props.

Generate a story

Fetch the latest Storybook story-writing instructions and create a story for the empty, loading, and error states of this component.

Preview a state

Preview the dark-mode Button story and return the Storybook link or embedded preview if supported.

Run component tests

Run Storybook tests for stories that cover the Header component and summarize failures without changing code yet.

Source notes

• Storybook's official MCP docs describe the MCP server as a preview AI capability that connects Storybook to AI agents so they can understand components and documentation, generate stories, run tests, and reuse existing design-system components.
• The docs state that Storybook's AI capabilities, specifically manifests and the MCP server, are currently supported for React projects and that the API may change in future releases.
• Storybook documents installation with npx storybook add @storybook/addon-mcp and a local MCP endpoint served by the Storybook dev server.
• The setup guide documents adding the local MCP server to an agent with npx mcp-add, or manually following agent-specific MCP configuration docs.
• The docs list development, docs, and testing toolsets, including get-storybook-story-instructions, preview-stories, get-documentation, get-documentation-for-story, list-all-documentation, and run-story-tests.
• The GitHub repository is storybookjs/mcp, is MIT licensed, and hosts the Storybook MCP implementation.

Duplicate check

Checked current content/mcp/, content/tools/, guides, skills, agents, open pull requests, live issue state, and repository-wide content for Storybook MCP, storybookjs/mcp, @storybook/addon-mcp, storybook.js.org/docs/ai/mcp, STORYBOOK_LOCAL_MCP_URL, mcp-add Storybook, list-all-documentation, get-documentation, preview-stories, run-story-tests, and component documentation mcp. An existing slash-command agent example mentions writing Storybook stories as a generic workflow example, but no dedicated Storybook MCP entry, Storybook MCP source URL duplicate, or open duplicate PR was found.

Disclosure

Editorial listing. No paid placement or affiliate link is used.

• Source repositorygithub.com 2026-07-18T19:14:44+00:00
• Documentationstorybook.js.org
• Submitted by oktofeesh12026-06-03