storybook-mcp-server

What it does

This MCP server connects Claude to Storybook instances—both local development servers and deployed production libraries. It enables component discovery, story inspection, property extraction, and visual capture via Puppeteer screenshots. Claude can browse your component library, retrieve full prop definitions with types and defaults, and render visual previews at multiple viewport sizes for testing and documentation.

Who it's for

Frontend developers and design system maintainers who want Claude to analyze, document, or visually inspect component libraries without manual browsing. Useful for teams generating living documentation or automating visual regression checks.

Common use cases

• Discover all available components and stories in a Storybook instance
• Extract component prop types, descriptions, and defaults for auto-generated documentation
• Capture component screenshots at multiple viewport sizes for responsive testing
• Audit design system completeness or identify undocumented component states
• Generate visual comparisons of component variants for change review

Setup pitfalls

• Requires STORYBOOK_URL environment variable pointing to a running Storybook instance; the URL must be reachable from the MCP server process
• Puppeteer requires Chrome or Chromium; it auto-downloads a compatible version on first screenshot use, requiring ~200 MB disk space and network access
• Screenshots are saved to ./screenshots/ directory—ensure the working directory has write permissions, even though other filesystem writes are not exposed