Storybook MCP

What is Storybook MCP?

Storybook MCP is a Model Context Protocol server that exposes UI component information and development workflows from Storybook, enabling AI agents to work more efficiently with component libraries. It is available as a standalone library (@storybook/mcp) or as a Storybook addon (@storybook/addon-mcp) that runs the MCP server within your existing Storybook dev server.

How to use Storybook MCP?

Install @storybook/mcp as a standalone server, or add @storybook/addon-mcp to your Storybook setup. When using the addon, the MCP server is automatically available at http://localhost:6006/mcp while Storybook is running. Connect your AI agent (e.g., a coding assistant) to that endpoint. For the standalone server, the default address is http://localhost:13316/mcp. Use the MCP Inspector (pnpm inspect) or curl to test the server.

Key features of Storybook MCP

• Exposes UI component metadata via MCP protocol
• Provides tools for exploring component stories and properties
• Integrates directly into a running Storybook dev server
• Can be run as a standalone server independent of Storybook
• Supports debugging with MCP Inspector and curl

Use cases of Storybook MCP

• AI coding assistants retrieving component documentation while building UIs
• Automated agents exploring available UI components and their variants
• AI-powered testing or visual regression workflows using Storybook data
• Integrating an AI chat interface with a design system’s component library

FAQ from Storybook MCP

What is the difference between @storybook/mcp and @storybook/addon-mcp?

@storybook/mcp is a standalone library that can be used independently of Storybook. @storybook/addon-mcp is a Storybook addon that runs the MCP server within your Storybook dev server and includes all functionality from the standalone library.

What are the runtime requirements?

The project requires Node.js 24 or higher. For development, pnpm 10.19.0+ is used, but end users only need Node.js and the appropriate package manager.

How do I connect an AI agent to the MCP server?

Start Storybook with the addon installed, then configure your agent to use the MCP server URL (default: http://localhost:6006/mcp). For the standalone server, use http://localhost:13316/mcp. You can verify connectivity with the tools/list MCP method.

Is authentication required?

Authentication is not mentioned in the README. The server is assumed to run locally on localhost during development.