MCP

This MCP server bridges Storybook projects with Claude Code by exposing an API that can parse, convert, and generate Storybook stories and React components. It can read and parse Storybook story files, convert stories to standalone components, generate new stories from components, manage addons, and auto-sync props between stories and components. Tools exposed by the MCP server include: list_stories to locate all Storybook story files, parse_story and parse_with_ast to extract metadata, extract_story_props to read story args and controls, convert_story_to_component to produce reusable React components, and generate_story_from_component to create stories from components. There are also capabilities for addon management, test generation, interactive editing, and a caching system to speed up parsing on large projects. To use it with Claude Code, configure Claude Code to point at the built MCP server and then issue natural language commands to perform these tasks, such as listing all stories, converting a specific story to a component, or generating a story for a given component.

Prerequisites:

• Node.js 18+ installed on your machine
• npm or yarn as a package manager
• A Storybook project you want to connect to Claude Code

Step-by-step:

1. Clone the MCP server repository (storybook-mcp-server) to your development environment.
2. Install dependencies:
   • npm install
   • or yarn install
3. Build the server:
   • npm run build
4. Start the server or configure Claude Code to connect to the built entry point:
   • The recommended runtime is Node.js using the built dist/index.js file, e.g. node dist/index.js
5. Configure Claude Code:
   • In your Storybook project, create or edit .claude/mcp.json to reference the MCP server: { "mcpServers": { "storybook": { "command": "node", "args": ["/absolute/path/to/this/repo/storybook-mcp-server/dist/index.js"] } } }
6. Run Claude Code and start issuing natural language commands to generate, parse, and synchronize Storybook content.

Notes and tips:

• The MCP server caches AST parsing results for faster repeated analyses; you can adjust TTL and cache size in configuration if exposed by your setup.
• Ensure your Storybook project path is correctly referenced in the Claude Code configuration (absolute paths recommended).
• If you run into environment issues, verify Node.js version compatibility (18+ as required) and that Claude Code CLI is installed and accessible.
• The server can manage Storybook addons, generate tests, and perform interactive edits, so you can streamline workflows like bulk story generation or syncing props between stories and components.
• For large projects, take advantage of the multi-level caching (memory + disk) to reduce parse times on subsequent runs.