# Storybook MCP

Storybook MCP is an official Model Context Protocol (MCP) server that connects AI agents to your Storybook, providing machine-readable component metadata, stories, props, and docs so agents can intelligently reuse UI components and self-correct with tests.

Canonical URL: https://a2a-mcp.org/entry/storybook-mcp

Language: en

Category: MCP Servers

Updated: 2026-04-09

## Overview

Storybook MCP is the official integration from the Storybook team that brings the power of the [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) to component-driven UI development. It transforms your existing Storybook into a rich, structured data source that AI agents can query in real time.

By exposing component metadata, stories, prop types, usage examples, and documentation in an optimized, token-efficient format, Storybook MCP enables AI agents to build UI that aligns with your team's design system instead of generating generic or inconsistent code.

## Key Features

- **Component Discovery & Context**: Agents can list components, retrieve detailed props, stories, controls, and documentation.
- **Optimized Manifests**: Delivers curated, machine-readable payloads (Component Manifest) with APIs, variants, design tokens, and usage snippets—far more efficient than raw source code.
- **Story Generation & Testing**: Agents can write new stories for components and run tests autonomously, with built-in feedback loops for self-correction.
- **Seamless Integration**: Install via the `@storybook/addon-mcp` package; the MCP server runs alongside your Storybook dev server (typically at `/mcp` endpoint).
- **Standalone Library**: Use `@storybook/mcp` independently for custom setups.
- **React Support (v10.3+)**: Currently optimized for React, with additional frameworks planned.

## How It Works

1. Install the addon: `npx storybook add @storybook/addon-mcp`
2. Run your Storybook dev server.
3. Connect any MCP-compatible AI agent (Claude, Cursor, etc.) to the MCP endpoint.
4. Agents now have direct access to your living design system for context-aware code generation.

This creates an iterative workflow where agents generate code, preview via stories, run tests, and fix issues without constant human intervention.

## Benefits for Developers

- **Higher Quality AI Output**: Agents follow your established patterns and component APIs, reducing hallucinations and rework.
- **Token Efficiency**: Smaller, focused context payloads mean better performance and lower costs.
- **Guardrails for Production UI**: Test feedback loops help agents ship code that conforms to your standards.
- **Accelerated Frontend Development**: Ideal for design system teams, large codebases, and agentic workflows.

## Use Cases

- Generating new UI features while reusing your component library.
- Converting Figma designs into production code that matches your existing Storybook components.
- Autonomous story writing and testing for component coverage.
- Enhancing AI coding tools (e.g., Cursor, Windsurf, or custom agents) with frontend-specific intelligence.
- Maintaining consistency across large design systems in team environments.

## Installation & Getting Started

Requires Storybook 10.3+ (React renderer).

```bash
# Upgrade Storybook
npx storybook@latest upgrade

# Add the MCP addon
npx storybook add @storybook/addon-mcp
```

Then run `storybook dev` and connect your agent to `http://localhost:6006/mcp` (port may vary).

For full documentation, visit the [official Storybook AI / MCP docs](https://storybook.js.org/docs/ai/mcp/overview).

## Related Resources

- Official Blog: [Storybook MCP for React](https://storybook.js.org/blog/storybook-mcp-for-react/)
- GitHub: [storybookjs/mcp](https://github.com/storybookjs/mcp)
- npm: [@storybook/addon-mcp](https://www.npmjs.com/package/@storybook/addon-mcp)

## Tags

- storybook
- mcp
- ai-agent
- react
- ui-components
- design-system
- frontend
- typescript

## Sources

- [Project website](https://storybook.js.org/docs/ai/mcp/overview)