Storybook MCP Server

@storybookjs

Repository

Basic information

About Storybook MCP Server

Help agents automatically write and test stories for your UI components.

#storybook#ui-components #automation

Storybook MCP Server config

No standard config provided

This server doesn't expose a parseable MCP config block in its README. See the repository for install instructions.

Repository

Storybook MCP Server tools

Tool list not available yet

This listing does not currently have a tool list to display. This does not mean the server has no tools; check its documentation for supported capabilities.

We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.

Overview

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

Frequently asked questions

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.

Comments

More Other MCP servers

Screenpipe

screenpipe

YC (S26) | Open Computer History | Continuously record your company computer work, map your workflows, help you find work worth automating, and power your agents' context

22.0K

Volley.sh

Volley

A good sequence diagram can solve almost any communication problem in engineering. Volley lets your agent write them as plain text, with the real request and response payloads on every arrow. It checks its own syntax wi