Get the Agent Brief

Storybook MCP

MCP server by Storybook

OfficialLocalPreview/Beta
Official pageGitHub repo
By the Klyvoo teamChecked October 3, 2026Checked on official sources

Storybook MCP at a glance

Storybook MCP is an official MCP server from Storybook. It lets coding agents discover your UI components, write stories and run component tests.

Connects to
Design and creative
Hosting
Local · Streamable HTTP
Sign-in
None
Price
Free
Works with
Claude Code, Codex, Cursor, Gemini CLI, VS Code
Best for
Frontend teams using Storybook design systems
Checked
October 3, 2026 on official sources

How to install Storybook MCP

Add the command below as a new MCP server in your AI app’s settings or MCP config file. Sign-in: None.

Install or connect
npx storybook add @storybook/addon-mcp

What Storybook MCP can do

A Storybook addon runs an MCP server inside the Storybook dev server. Agents use it to find components and their docs, write and preview stories and run tests.

Tools it exposes include
Component discovery and docsStory authoringStory previewsRun component tests

Best for: frontend teams using Storybook design systems

Pros

  • Official from the Storybook team
  • Runs inside your existing dev server
  • Open source under MIT

Cons

  • API may change while in preview
  • Docs tools need React, Angular Vite or Vue 3 Vite

Storybook MCP FAQ

Is Storybook MCP free?

Yes. It is a free open source Storybook addon.

How do I connect Storybook MCP?

Run npx storybook add @storybook/addon-mcp, start Storybook and point your agent at http://localhost:6006/mcp.

What can Storybook MCP do?

It helps agents find components and docs, write and preview stories and run tests in your Storybook.