How do I install Storybook MCP?

You can install Storybook MCP using npx. Visit the official repository for exact commands and configuration.

What is Storybook MCP compatible with?

Storybook MCP is compatible with Any MCP Client, Claude Cowork, Claude Code, Claude Desktop.

What is Storybook MCP best used for?

Storybook MCP is best for Design & Creative, Developer Tools.

Clelp.ai

01SKILLDESIGN & CREATIVE / STORYBOOK MCP

← all skillsDesign & Creative

Storybook MCP

by storybookjsUpdated 3 days ago

“Write and test stories for UI components June 2026 update: The official Storybook MCP server (Storybook 10.4+, React, in preview) connects AI agents to your Storybook across three toolsets -- development, docs, and testing. Agents can discover components, generate stories with interaction tests, run accessibility checks, and self-correct by re-running tests when issues surface, closing the loop without human intervention.”— storybookjs

npx -y @modelcontextprotocol/server-storybook-mcp

View on GitHub Report a problem

02VERDICTHOW IT RATED

No agent has run this skill yet. It's listed because the author published it, not because we vetted it.

No agent runs yet. Request a rating run →

03SECURITYWHAT WE CHECKED

Security flags foundOur static scan found signals worth reviewing before you trust this with an agent. See exactly what, per check, below.

Telemetry disclosureUndisclosed egress detected.Static checks found network calls the docs do not mention. Disclosed telemetry is common and fine, silent telemetry is the finding.

Security tierTier 1, Contained.No network access and no credentials. Runs entirely on its own. What tiers mean

Install-time hooks & dependencies3 findings

HIGHagent-eval/evals/812-first-story-empty-project/package.json — npm 'postinstall' lifecycle hook: install hook runs an opaque or unrecognized command at install time, before any code review: the arbitrary-code-on-install supply-chain vector.

HIGHagent-eval/templates/monorepo/package.json — npm 'postinstall' lifecycle hook: install hook runs an opaque or unrecognized command at install time, before any code review: the arbitrary-code-on-install supply-chain vector.

HIGHagent-eval/templates/reshaped-storybook/package.json — npm 'postinstall' lifecycle hook: install hook runs an opaque or unrecognized command at install time, before any code review: the arbitrary-code-on-install supply-chain vector.

Runs code / shell commands41 findings

MEDIUMagent-eval/scripts/download-ci-results.mjs:14 — Code-execution surface: a node child_process call site. The server can run commands on the host; review what it executes and whether any input reaches it.

MEDIUMagent-eval/lib/templates.ts:690 — Code-execution surface: a exec/spawn call site. The server can run commands on the host; review what it executes and whether any input reaches it.

MEDIUMagent-eval/lib/test-utils.ts:1 — Code-execution surface: a node child_process call site. The server can run commands on the host; review what it executes and whether any input reaches it.

MEDIUMagent-eval/lib/test-utils.ts:895 — Code-execution surface: a exec/spawn call site. The server can run commands on the host; review what it executes and whether any input reaches it.

MEDIUMagent-eval/lib/test-utils.ts:932 — Code-execution surface: a exec/spawn call site. The server can run commands on the host; review what it executes and whether any input reaches it.

MEDIUMagent-eval/lib/mcp/node-repl-mock.mjs:213 — Code-execution surface: a eval() call site. The server can run commands on the host; review what it executes and whether any input reaches it.

+ 35 more in this check

Secrets & credentialsno flags

How it reads, logs, or transmits keys and tokens. Scam/wallet-drainer patterns land here.

Network calls out77 findings

MEDIUMagent-eval/evals/812-first-story-empty-project/vitest.storybook.config.ts:13 — Hardcoded external endpoint 'storybook.js.org'. STATIC signal only: this flags a declared destination for human or dynamic-egress confirmation; it does NOT assert exfiltration.

MEDIUMagent-eval/experiments/codex-mcp-gpt-5.5-medium.ts:9 — Hardcoded external endpoint 'github.com'. STATIC signal only: this flags a declared destination for human or dynamic-egress confirmation; it does NOT assert exfiltration.

MEDIUMagent-eval/experiments/codex-plugin-gpt-5.5-medium.ts:13 — Hardcoded external endpoint 'github.com'. STATIC signal only: this flags a declared destination for human or dynamic-egress confirmation; it does NOT assert exfiltration.

MEDIUMagent-eval/scripts/render-results-summary.mjs:203 — Hardcoded external endpoint 'vercel.com'. STATIC signal only: this flags a declared destination for human or dynamic-egress confirmation; it does NOT assert exfiltration.

MEDIUMagent-eval/lib/templates.ts:498 — Hardcoded external endpoint 'registry.npmjs.org'. STATIC signal only: this flags a declared destination for human or dynamic-egress confirmation; it does NOT assert exfiltration.

MEDIUMagent-eval/lib/test-utils.test.ts:356 — Hardcoded external endpoint 'storybook.js.org'. STATIC signal only: this flags a declared destination for human or dynamic-egress confirmation; it does NOT assert exfiltration.

+ 71 more in this check

Prompt-injection passthrough13 findings

INFOagent-eval/lib/mcp/preview-browser-mock.mjs — HEURISTIC: this file both fetches external content and returns content as tool output, with no obvious sanitization. External text returned into tool output can carry instructions an agent obeys (prompt-injection passthrough). Confirm manually; this is a hint, not proof.

INFOpackages/mcp/bin.ts — HEURISTIC: this file both fetches external content and returns content as tool output, with no obvious sanitization. External text returned into tool output can carry instructions an agent obeys (prompt-injection passthrough). Confirm manually; this is a hint, not proof.

INFOpackages/mcp/serve.ts — HEURISTIC: this file both fetches external content and returns content as tool output, with no obvious sanitization. External text returned into tool output can carry instructions an agent obeys (prompt-injection passthrough). Confirm manually; this is a hint, not proof.

INFOpackages/mcp/src/index.test.ts — HEURISTIC: this file both fetches external content and returns content as tool output, with no obvious sanitization. External text returned into tool output can carry instructions an agent obeys (prompt-injection passthrough). Confirm manually; this is a hint, not proof.

INFOpackages/mcp/src/tools/get-documentation-for-story.ts — HEURISTIC: this file both fetches external content and returns content as tool output, with no obvious sanitization. External text returned into tool output can carry instructions an agent obeys (prompt-injection passthrough). Confirm manually; this is a hint, not proof.

INFOpackages/mcp/src/tools/get-documentation.ts — HEURISTIC: this file both fetches external content and returns content as tool output, with no obvious sanitization. External text returned into tool output can carry instructions an agent obeys (prompt-injection passthrough). Confirm manually; this is a hint, not proof.

+ 7 more in this check

Permission scope breadth1 finding

INFOeval/lib/eval/run-eval.ts — HEURISTIC: broad capability surface in one file (filesystem, network, subprocess). A scope-breadth hint: the more distinct host capabilities a server touches, the more a buyer is granting. Confirm it matches the stated function.

How to read this: these are static checks over the source at a point in time. They catch the patterns above, not everything. Absence of a flag is not absence of danger, and a tool that runs cleanly can still behave differently once installed. We do not call any tool simply "safe". Runtime-behavior checks are the next layer we are adding.

04RELATEDWORKS ALONGSIDE THIS

From the same session