Which coding agents can use storybook-mcp?

storybook-mcp works in any agent that reads an MCP config file: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf. Each agent reads it from its own file; this page names the file for each one.

How do I add storybook-mcp to Claude Code?

Run these in order, one at a time. 1. In Claude Code: /plugin marketplace add storybookjs/storybook 2. In Claude Code: /plugin install storybook@storybook

Frontend

MCP

storybook-mcp

Develops and visually tests UI components in isolation outside of the full application.

BOOST

Guide

storybookjs@storybookjs

GitHub

From plugin

storybook

91k8 skills1 MCP

Claude Code

> /plugin marketplace add storybookjs/storybook
> /plugin install storybook@storybook

Codex

$ codex mcp add storybook-mcp --url http://localhost:6006/mcp

More MCP servers for Codex

Cursor

{
  "mcpServers": {
    "storybook-mcp": {
      "url": "http://localhost:6006/mcp"
    }
  }
}

Add it to mcp.json.

More MCP servers for Cursor

Gemini CLI

$ gemini mcp add --transport http storybook-mcp http://localhost:6006/mcp

More MCP servers for Gemini CLI

GitHub Copilot

$ copilot mcp add --transport http storybook-mcp http://localhost:6006/mcp

More MCP servers for GitHub Copilot

OpenCode

{
  "mcp": {
    "storybook-mcp": {
      "type": "remote",
      "url": "http://localhost:6006/mcp"
    }
  }
}

Add it to opencode.json.

More MCP servers for OpenCode

Windsurf

{
  "mcpServers": {
    "storybook-mcp": {
      "serverUrl": "http://localhost:6006/mcp"
    }
  }
}

Add it to mcp_config.json.

More MCP servers for Windsurf

Security report

Not enough data

Known flaws
Not published
Signed build
Not published
Maintained
Oct 30, 2026
Last push
Licence
MIT
Runs as
Remote
localhost
Deprecated
Not published

Signals from public registries, not an audit. Checked Nov 11, 2026.

storybook README

ExcerptRead the full README on GitHub

Storybook

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. Find out more at storybook.js.org!

View README for:

🚀 Getting Started
📒 Projects
- 🛠 Supported Frameworks & Examples
- 🔗Addons
🏅 Badges & Presentation materials
👥 Community
👏 Contributing
- 👨‍💻 Development scripts
- 💸 Sponsors
- 💵 Backers
:memo: License

Getting Started

Visit Storybook's website to learn more about Storybook and to get started.

Documentation

Documentation can be found on Storybook's docs site.

Examples

View Component Encyclopedia to see how leading teams use Storybook.

Use storybook.new to quickly create an example project in Stackblitz.

Storybook comes with a lot of addons for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.

Community

For additional help, share your issue in the repo's GitHub Discussions.

Projects

Supported Frameworks

Renderer	Demo
React
Angular
Vue 3
Web components
React Native
HTML
Ember
Svelte
Preact
Qwik
SolidJS
Android, iOS, Flutter

Addons

Addons
a11y	Test components for user accessibility in Storybook
actions	Log actions as users interact with components in the Storybook UI
backgrounds	Let users choose backgrounds in the Storybook UI
cssresources	Dynamically add/remove CSS resources to the component iframe
design assets	View images, videos, and weblinks alongside your story
docs	Add high quality documentation to your components
events	Interactively fire events to components that respond to EventEmitter
google-analytics	Reports google analytics on stories
graphql	Query a GraphQL server within Storybook stories
jest	View the results of components' unit tests in Storybook

Stats

JavaScript React React Native Vue Svelte Angular HTML CSS GraphQL GitHub Jest iOS

91,518

Stars

10,510

Forks

Active

Maintenance

TypeScript

Language

MIT

License

10h ago

Last commit

10y ago

Created

Repo: storybookjs/storybook

In this plugin

8 skills 1 MCP

skills

See everything inside

Ships withstorybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation

91k8 skills1 MCP

Get the whole plugin

Stars on GitHub

Momentum

stars in total: 91.4k

Star history of storybookjs/storybook on GitHub, a chart by star-history.com

See what's trending this week

More MCP servers from other plugins.

data-table-drizzle

MCP

Ships with data-table-filters: React data tables for shadcn/ui: faceted filters, sorting, infinite scroll. Filtering, faceted…

data-table-filters5w2.3k

@openstatushq

cesium

MCP

Renders interactive 3D globes and streams geospatial terrain, imagery and vector data in a mapping engine.

cesium-mcp8d149

@gaopengbin

next-devtools

MCP

Inspects routing, rendering and build diagnostics for apps built with the Next.js framework.

microfrontends3w45

@vercel

Auto-invoked

chrome-devtools

MCP

Connects to Chrome over the DevTools Protocol to inspect the DOM, network requests and console output.

ecc11d293k

@affaan-m

Questions about storybook-mcp.

Which coding agents can use storybook-mcp?: storybook-mcp works in any agent that reads an MCP config file: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf. Each agent reads it from its own file; this page names the file for each one.
How do I add storybook-mcp to Claude Code?: Run these in order, one at a time. 1. In Claude Code: /plugin marketplace add storybookjs/storybook 2. In Claude Code: /plugin install storybook@storybook