Storybook MCP Addon

by @storybookjs · io.github.storybookjs/addon-mcp

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

Runs on your machineLocal
WebsiteSource code
Category
Developer tools
Connection
Local (npm)
Tools
Shown after install
Status
Runs on your computer

Connect it to your AI

Claude Code (npm)

claude mcp add addon-mcp -- npx -y @storybook/addon-mcp@0.6.0

Cursor, VS Code and other apps (mcp.json)

{
  "mcpServers": {
    "addon-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@storybook/addon-mcp@0.6.0"
      ]
    }
  }
}

Questions

What is the Storybook MCP Addon MCP server?

Help agents automatically write and test stories for your UI components. It is made by @storybookjs and listed in the official MCP Registry as io.github.storybookjs/addon-mcp. MCP (Model Context Protocol) is the open standard that lets AI apps like Claude, ChatGPT and Cursor use outside tools.

How do I add Storybook MCP Addon to Claude?

In Claude Code, run: claude mcp add addon-mcp -- npx -y @storybook/addon-mcp@0.6.0

How do I add Storybook MCP Addon to ChatGPT?

ChatGPT only connects to remote MCP servers, and Storybook MCP Addon runs on your own computer. Use it from Claude, Cursor or another app that runs local servers.

How do I add Storybook MCP Addon to Cursor?

Open Cursor settings, go to MCP, choose "Add new MCP server" (or edit ~/.cursor/mcp.json) and add: { "mcpServers": { "addon-mcp": { "command": "npx", "args": [ "-y", "@storybook/addon-mcp@0.6.0" ] } } }

Does Storybook MCP Addon work right now?

It runs on your own computer, so it works once you install it. There is no remote server for us to check.

Is this your server? Get the badge for your README
chen.media/mcp badge

Markdown (GitHub README)

[![Listed on chen.media/mcp](https://chen.media/mcp/badge/github-storybookjs-addon-mcp.svg)](https://chen.media/mcp/github-storybookjs-addon-mcp)

HTML (switches to dark mode on its own)

<a href="https://chen.media/mcp/github-storybookjs-addon-mcp"><picture><source media="(prefers-color-scheme: dark)" srcset="https://chen.media/mcp/badge/github-storybookjs-addon-mcp.svg?theme=dark"><img src="https://chen.media/mcp/badge/github-storybookjs-addon-mcp.svg" alt="Listed on chen.media/mcp" height="40"></picture></a>

More in Developer tools

See all

Algolia ProductivityVerified maker

@algolia

Connect LLM tools to your Algolia account with user-scoped access for internal workflows.

VerifiedTrendingDeveloper toolsRemote

GitHubVerified maker

@github

Connect AI assistants to GitHub - manage repos, issues, PRs, and workflows through natural language.

VerifiedDeveloper toolsRemote + local

MCP devkit serverVerified maker

@mapbox

Provides AI assistants with direct access to Mapbox developer APIs and documentation.

VerifiedDeveloper toolsRemote + local

GitLabVerified maker

gitlab.com

Official GitLab MCP Server

VerifiedDeveloper toolsRemote

Perplexity API PlatformVerified maker

perplexity.ai

Real-time web search, reasoning, and research through Perplexity's API

VerifiedDeveloper toolsLocal

Valuein — SEC EDGAR Fundamentals & Smart-Money Data

@valuein

Point-in-time, survivorship-free SEC EDGAR fundamentals + smart-money signals for AI agents.

Developer toolsRemote