| name | storybook |
| description | Use when: starting, checking, or using the Storybook dev server; looking up Primer React component stories, props, or documentation; previewing component variants; writing or verifying Storybook stories; using the primer-storybook MCP to explore components. Covers starting Storybook, checking if it is running, and using MCP tools (list-all-documentation, get-documentation, get-storybook-story-instructions, preview-stories) to look up components. |
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
| Tool | When to Use |
|---|
mcp_primer-storyb_list-all-documentation | Discover all available component and documentation IDs — call once per task |
mcp_primer-storyb_get-documentation | Retrieve full docs, props, and examples for a component by id |
mcp_primer-storyb_get-documentation-for-story | Get docs for a specific story variant not covered by get-documentation |
mcp_primer-storyb_get-storybook-story-instructions | Get framework-specific imports and story patterns — always call before writing/editing stories |
mcp_primer-storyb_preview-stories | Get live preview URLs for stories — always include returned URLs in your response |
Workflow
- 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").
- 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).
- Get by ID: Call
get-documentation with the exact id from the list (use storybookId to scope to one source when multiple are configured).
- Verify props: Never invent props or variants not present in the documentation.
- Before writing stories: Always call
get-storybook-story-instructions first — treat its output as the source of truth.
- 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.
