Storybook — Start Server & Use MCP

When to Use

• You need to look up a component's stories, props, or usage examples
• You are writing or editing a Storybook story
• You want to preview a component variant at a URL
• Any task that benefits from live Storybook documentation

Step 1 — Ensure Storybook Is Running

Storybook must be running before any MCP tool calls. The MCP server is served by Storybook at http://localhost:6006/mcp.

Check if it is already running

curl -s -o /dev/null -w "%{http_code}" http://localhost:6006

• 200 / 3xx → Storybook is already up. Skip to Step 2.
• 000 / connection refused → Start it now.

Start Storybook

Run from the workspace root (not packages/react):

npm start

This starts the Storybook dev server on http://localhost:6006. It takes ~3–10 seconds. Run as a background process so the agent continues working.

Verify it is ready

Poll until the server responds:

until curl -s -o /dev/null -w "%{http_code}" http://localhost:6006 | grep -q "200\|301\|302"; do sleep 1; done

Step 2 — Use the primer-storybook MCP

The primer-storybook MCP is configured in .vscode/mcp.json as an HTTP server at http://localhost:6006/mcp.

Load deferred tools before calling them:

tool_search_tool_regex pattern: "mcp_primer-storyb"

Available Tools

Workflow

1. Always list first: Call list-all-documentation to get the full list of valid IDs. Never call get-documentation without first obtaining an ID from this list. Do not guess or infer IDs from component names (e.g. "button" is wrong — the correct ID is "components-button").
2. Match the ID: Find the entry in the list that corresponds to the component you need. IDs follow the pattern components-<componentname> (e.g. components-button, components-actionmenu).
3. Get by ID: Call get-documentation with the exact id from the list (use storybookId to scope to one source when multiple are configured).
4. Verify props: Never invent props or variants not present in the documentation.
5. Before writing stories: Always call get-storybook-story-instructions first — treat its output as the source of truth.
6. After changing stories: Call preview-stories and include every returned URL in your response.

Rules

• Do not call MCP tools before Storybook is running — they will fail silently.
• Always call list-all-documentation before get-documentation — never guess or derive an ID from a component name. Only use id values returned by this list.
• Never invent props or variants not present in the documentation. Only use properties explicitly documented or shown in example stories — do not assume properties based on naming conventions or patterns from other libraries. If a property isn't documented, report it as not found and check back with the user.
• Before writing or editing stories, always call get-storybook-story-instructions — treat its output as the source of truth.