mcpField
S
Storybook MCP Addon

Storybook MCP Addon

Local
storybook.js.orgDeveloper Tools271Updated 7w ago
RepositoryVisit website

About Storybook MCP Addon

Storybook MCP Addon is a Storybook addon for MCP-powered UI development workflows. It is aimed at developers who use Storybook and want AI agents to take part in component work. The README is brief, and installation and usage details are referred to the official documentation.

Key features

  1. 01Exposes an MCP server inside Storybook
  2. 02Supports a configurable endpoint path
  3. 03Configured through the addon options in main.ts

Use cases

  1. 01Letting agents access Storybook component information over MCP
  2. 02Setting distinct MCP endpoint paths for different projects

MCP support

The addon provides an MCP server within Storybook at /mcp by default, and the endpoint path can be changed in configuration for MCP clients to connect.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "storybookjs-addon": {
      "command": "npx",
      "args": [
        "-y",
        "@storybook/addon-mcp"
      ]
    }
  }
}
Run commandnpx -y @storybook/addon-mcp

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@storybook/addon-mcp0.6.0

Tools

No tool list yet

Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.

Details

From the project README

Storybook MCP Addon

Storybook addon for MCP-powered UI development workflows.

Storybook MCP Addon Demo

See documentation for installation instructions, usage examples, APIs, and more.

Configuration

By default, the addon exposes its MCP server at /mcp. You can configure a different literal endpoint path in .storybook/main.ts:

export default {
	addons: [
		{
			name: '@storybook/addon-mcp',
			options: {
				endpoint: '/custom-mcp',
			},
		},
	],
};

The endpoint must be a URL pathname such as /custom-mcp or /tools/mcp.

Learn more about Storybook at storybook.js.org.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.