Atlas / MCP servers / storybookjs / Storybook

StorybookBLOCK

Name: Storybook
Author: storybookjs

mcp/storybookjs/storybook-4

MCP server by storybookjs · Audited 2026-10-07

⚑ Report / re-scan Source ↗

🤖

Verdict

BLOCK

Grade

Trust score

66 /100

Exposed tools

28 22r · 5w · 1d

Transport

streamable-http

License

MIT

Stars

270

Overview

From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.

[!TIP] This repository has moved to storybookjs/storybook as of Storybook v10.6.0. Please check there for updated documentation.

Welcome to the Storybook MCP Addon monorepo! This project enables AI agents to work more efficiently with Storybook by providing an MCP (Model Context Protocol) server that exposes UI component information and development workflows.

📦 Packages

This monorepo contains four main packages:

@storybook/mcp - Standalone MCP library for serving Storybook component knowledge (can be used independently)
@storybook/addon-mcp - Storybook addon that runs an MCP server within your Storybook dev server, and includes the functionality of @storybook/mcp from your local Storybook
@storybook/claude-code-plugin - Claude Code plugin with Storybook setup skills and MCP configuration
@storybook/codex-plugin - Codex plugin with Storybook setup skills and MCP configuration

Each package has its own README with user-facing documentation. This document is for contributors looking to develop, test, or contribute to these packages.

🚀 Quick Start

Testing the Claude and Codex plugins from GitHub

External testers can install the plugin marketplace directly from this repository's main branch. No local clone is required.

Codex (more details)

codex plugin marketplace add storybookjs/mcp --ref main
codex plugin add storybook@storybook

Verify the marketplace and plugin:

codex plugin marketplace list
codex plugin list --marketplace storybook

Claude Code (more details)

claude plugin marketplace add storybookjs/mcp@main --scope user
claude plugin install storybook@storybook --scope user

Verify the plugin and MCP server:

claude plugi

Read from source at commit a9988223307eOBSERVED · 2026-10-07

Connect

Built from this server's own package name, version and transport as found in its source — not copied from anyone's documentation, so it cannot drift against a page we do not control.

claude-code (npm)

claude mcp add addon-mcp -- npx -y @storybook/[email protected]

Exposed tools (28)

22 read · 5 write · 1 destructive. Blast radius: 1 tool can delete or overwrite — an agent that can be talked into calling a tool can be talked into calling this one.

Tool	Risk	Description
`Button`	read	A button
`Primary`	read	The primary button variant.
`WithIcon`	read	Button with an icon
`children`	read
`component-concise-reshaped-internal`	read	Internal matrix for reshaped component tasks (901-907) using concise prompt variants.
`disabled`	write	Disable the button
`js`	write	Run JavaScript in a persistent Node-backed kernel with top-level await. This is the JavaScript execution tool for the
`js_add_node_module_dir`	write	Add an absolute
`js_reset`	destructive	Reset the persistent JavaScript kernel and clear all bindings created by prior
`label`	read	From react-docgen-typescript
`onClick`	read	Click handler
`preview-by-id-internal`	read	Internal matrix for preview-by-id eval tasks (914-915) with prompt-variant combinations.
`preview_click`	read	Click an element by CSS selector (e.g.,
`preview_console_logs`	read	Get browser console output (log, info, warn, error, debug). Use to check runtime behavior, debug values, or client-side errors. Use
`preview_fill`	read	Fill an input, textarea, or select element with a value. For select elements, matches by value or text.
`preview_inspect`	read	Inspect a DOM element by CSS selector. Returns text content, className, tagName, id, computed styles, and bounding box. BEST tool for verifying visual properties like colors, fonts, spacing, and dimensions — more accurate than screenshots.
`preview_list`	read	List servers started with preview_start. Returns serverIds for use with other preview_* tools.
`preview_logs`	read	Get server stdout/stderr output. Use to check for build errors, verify server behavior, or read debug output. Use
`preview_network`	read	List network requests or inspect a specific response body. Without requestId, lists all requests with URL, method, status, and requestId. With requestId, returns the full response body for that request (useful for inspecting API payloads).
`preview_resize`	read	Resize the preview viewport to test responsive layouts. Presets: mobile (375x812), tablet (768x1024), desktop (1280x800). Also supports custom dimensions and color scheme emulation for dark mode testing.
`preview_screenshot`	read	Take a screenshot of the page. Good for checking layout and general appearance, but DO NOT rely on it for verifying colors, font sizes, or precise styles — use preview_inspect with specific CSS properties instead. Returns a compressed JPEG image.
`preview_snapshot`	read	Get an accessibility tree snapshot of the page. Returns exact text content, roles, and element UIDs for use with click/fill/hover. PREFERRED over screenshot for verifying text, element presence, and page structure.
`preview_start`	write	Start a dev server by name from .claude/launch.json. If .claude/launch.json doesn
`preview_stop`	write	Stop a server started with preview_start.
`storybook-mcp-comparison`	read	Compare eval performance with and without the Storybook Docs MCP Server enabled.
`testing-toolset-internal`	read	Internal matrix for testing-toolset eval tasks (908-913) with prompt-variant combinations.
`textValue`	read	Required when children are not plain text.
`variant`	read	Button style variant

Trust audit

BLOCKgrade D · trust 66/100 Do not install this without reading the findings. The audit found something that could harm you or your machine.

Layer	What it checks	Result
L0	Provenance & inventory	PASS
L1	Static analysis of the code	FAIL
L2	Instruction surface (what it tells the agent)	PASS
L3	Class-specific surface	WARN
L4	Behavioural (sandbox)	SKIPPED

What the source does

Filesystem: declared (6 observation(s))
Network: declared (6 observation(s))
Shell: declared (2 observation(s))
Dependencies: not all pinned
Secrets in source: none-found

Findings (25)

HIGHCode injection · code.eval_exec · CWE-78, CWE-94, CWE-95

eval/tasks/903-create-component-async-fetch-reshaped/hooks.ts:29

exec(`npx msw init public`, {

Why it matters. evaluates text as code

Fix. remove; use a parser or a dispatch table

MEDIUMNetwork egress · net.raw_ip · CWE-200, CWE-319

agent-eval/lib/mcp/start-storybook-mcp.mjs:7

const mcpUrl = 'http://127.0.0.1:' + port + '/mcp';

MEDIUMNetwork egress · net.raw_ip · CWE-200, CWE-319

agent-eval/lib/templates.ts:107

const STORYBOOK_MCP_URL = 'http://127.0.0.1:6006/mcp';

MEDIUMObfuscation / stealth · obf.zero_width · CWE-506, CWE-94

eval/lib/run-task.ts:323

p.log.message(`🧑⚖️ Judge: i️ ${pct}% (${judge.agent}, ${judge.model})`);

MEDIUMFilesystem / path · mcp.destructive_tools · CWE-22, CWE-59

js_reset

Why it matters. 1 tool(s) can delete or overwrite

Fix. prefer a read-only mode or scoped tokens; the page states the blast radius

MEDIUMAuth / authz · mcp.remote_no_auth · CWE-287, CWE-862

streamable-http

Why it matters. a network transport with no auth environment variable found

Fix. require a token

LOWInventory / provenance · inv.hidden_file · CWE-1104

.mcp.inspect.json

.mcp.inspect.json

Why it matters. hidden member outside the usual dotfiles

Fix. review its purpose

LOWInventory / provenance · inv.hidden_file · CWE-1104

.oxfmtrc.json

.oxfmtrc.json

Why it matters. hidden member outside the usual dotfiles

Fix. review its purpose

LOWInventory / provenance · inv.hidden_file · CWE-1104

.oxlintrc.json

.oxlintrc.json

Why it matters. hidden member outside the usual dotfiles

Fix. review its purpose

LOWFilesystem / path · fs.traversal · CWE-22, CWE-59

apps/self-host-mcp/netlify/functions/mcp.ts:1

import { createMcpHandler } from '../../server.ts';

LOWFilesystem / path · fs.traversal · CWE-22, CWE-59

eval/lib/agents/claude-code-cli.ts:4

import type { Agent, ClaudeModel } from '../../types.ts';

LOWFilesystem / path · fs.traversal · CWE-22, CWE-59

eval/lib/agents/claude-code-cli.ts:5

import { CLAUDE_MODELS, CLAUDE_MODEL_MAP } from '../../types.ts';

LOWFilesystem / path · fs.traversal · CWE-22, CWE-59

eval/lib/agents/claude-code-cli.ts:12

} from '../../templates/result-docs/transcript.types.ts';

LOWFilesystem / path · fs.traversal · CWE-22, CWE-59

eval/lib/agents/codex-cli.ts:5

import type { Agent, McpServerConfig, CodexModel } from '../../types.ts';

LOWNetwork egress · net.raw_ip · CWE-200, CWE-319

agent-eval/lib/mcp/codex-browser-mock.test.ts:124

fixtureUrl = `http://127.0.0.1:${address.port}/`;

LOWNetwork egress · net.raw_ip · CWE-200, CWE-319

agent-eval/lib/test-utils.test.ts:102

'curl http://127.0.0.1:6006/mcp/preview-stories --data \'{"params":{"arguments":{"stories":[{"storyId":"example-button--secondary"}]}}}\'',

LOWNetwork egress · net.raw_ip · CWE-200, CWE-319

agent-eval/lib/test-utils.test.ts:351

expect(isLocalDevServerUrl('http://127.0.0.1:4123/iframe.html?id=button--primary')).toBe(true);

LOWSupply chain · supply.unpinned · CWE-829, CWE-1357

agent-eval/package.json

vercel, @tailwindcss/postcss, @types/react, @types/react-dom, postcss, tailwindcss

Why it matters. 6 dependency range(s) float