Storybook MCP Integration

What it does

When your agent uses it

• Setting up the server
• Calling these tools directly against components that already exist

Example prompts

• “/storybook-mcp-integration”

Requirements

• Python 3
• Node.js
• Compatibility (from SKILL.md): Claude Code 2.1.277+. Optional: @storybook/addon-mcp (Storybook 10.3+, Vite-based only).
• Pre-approved tools (allowed-tools): Read, Glob, Grep, WebFetch, WebSearch, ToolSearch, mcp__storybook-mcp__get-storybook-story-instructions, mcp__storybook-mcp__preview-stories, mcp__storybook-mcp__list-all-documentation, mcp__storybook-mcp__get-documentation, mcp__storybook-mcp__get-documentation-for-story, mcp__storybook-mcp__run-story-tests

What it can do on your machine

Read from SKILL.md and the folder at commit e4ff8d9. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves these tools, so the agent can use them without asking each time:

  • Read
  • Glob
  • Grep
  • WebFetch
  • WebSearch
  • ToolSearch
  • mcp__storybook-mcp__get-storybook-story-instructions
  • mcp__storybook-mcp__preview-stories
  • mcp__storybook-mcp__list-all-documentation
  • mcp__storybook-mcp__get-documentation

  …and 2 more on the same allowed-tools line.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Shell commands in SKILL.md call:

  • npx

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Hosts in commands or code, which the agent is likely to contact:

  • chromatic.storybook.cloud

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

• Compatibility

  Claude Code 2.1.277+. Optional: @storybook/addon-mcp (Storybook 10.3+, Vite-based only).

  From compatibility in the SKILL.md frontmatter.

Context cost

Storybook MCP Integration loads about 1.5k tokens when it runs. Until then it costs about 108 tokens; SKILL.md has 333 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~108

When it runs · the whole SKILL.md, loaded when a task matches

~1.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from yonatangross/orchestkit at commit e4ff8d9, republished under its MIT licence (© yonatangross). 333 words, ~1,457 tokens.

name

storybook-mcp-integration

description

Reference for the Storybook MCP server itself (@storybook/addon-mcp): 6 tools across 3 toolsets (dev, docs, testing), availability detection, and per-agent toolset filtering. Use when setting up the server or calling these tools directly against components that already exist. For the end-to-end pipeline that turns a mockup into a new component and consumes these tools as one stage, use design-to-code.

allowed-tools

Read, Glob, Grep, WebFetch, WebSearch, ToolSearch, mcp__storybook-mcp__get-storybook-story-instructions, mcp__storybook-mcp__preview-stories, mcp__storybook-mcp__list-all-documentation, mcp__storybook-mcp__get-documentation, mcp__storybook-mcp__get-documentation-for-story, mcp__storybook-mcp__run-story-tests

compatibility

Claude Code 2.1.277+. Optional: @storybook/addon-mcp (Storybook 10.3+, Vite-based only).

license

MIT

user-invocable

false

disable-model-invocation

false

metadata.category

document-asset-creation

metadata.mcp-server

storybook-mcp

metadata.version

1.0.0

metadata.author

OrchestKit

metadata.complexity

medium

metadata.tags

storybook, mcp, component-discovery, story-preview, component-testing, a11y, design-system, react

paths

.storybook/**, src/**/*.stories.{ts,tsx}

# Storybook 10.3+ with Vite builder (no webpack)
npx storybook@latest upgrade

# Install the addon (current: @storybook/addon-mcp@0.6.0, Apr 2026)
npx storybook add @storybook/addon-mcp

# Enable docs toolset (required for component discovery)
# In .storybook/main.ts:
#   componentsManifest: true
# NOTE: the old `experimentalComponentsManifest` flag was renamed in
# Storybook 10.3; it is now `componentsManifest` and default-on. Any
# code still passing the `experimental` prefix will warn-then-ignore.

# For Chromatic remote setups, use the standalone package instead of
# the addon (same tool surface, no local Storybook required):
#   npm i -D @storybook/mcp
#   npx storybook-mcp --registry https://chromatic.storybook.cloud

# Enable testing toolset (requires addon-vitest)
# npx storybook add @storybook/addon-vitest

# Register with Claude Code
npx mcp-add --type http --url "http://localhost:6006/mcp" --scope project

# Probe for storybook-mcp tools
ToolSearch(query="+storybook list-all-documentation")

# If tools found → Storybook MCP is available
# If not found → fallback to filesystem-based component discovery

© yonatangross, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files in src/skills/storybook-mcp-integration of yonatangross/orchestkit.

• SKILL.md
• rules/_sections.md
• rules/component-discovery.md
• rules/mcp-test-runner.md
• rules/story-preview-verification.md
• test-cases.json

Open the folder on GitHubat commit e4ff8d9