MCP
storybookjs/addon-mcp
Added 1 June 2026
Overview
A Storybook addon that exposes component stories as resources via the Model Context Protocol (MCP). It allows MCP-compatible AI assistants to browse, query, and interact with a Storybook component library programmatically.
Best for
Best for
Teams using Storybook who want to integrate AI assistants for component discovery, testing, or automated workflows.
Use cases
- Enable AI coding assistants to discover and inspect available UI components
- Automate component testing or story generation through MCP-compatible tools
- Integrate Storybook with AI-powered design-to-code workflows
How to use
Install
npm install -g pnpm@10.19.0Tools exposed
pnpmnvmgitcodexclaudecurltscvitestprettieroxlintpublintchangesets
Clients listed in this record (not verified here)
Claude Code, VS Code
Notes
246 stars on GitHub. Last updated 2026-06-01. Licensed MIT.
Pros
- Bridges Storybook with the growing MCP ecosystem for AI tooling
- Works with existing Storybook stories without additional configuration
- Open source with an active community (246 stars)
Cons
- Requires an MCP-compatible client or agent to be useful
- Limited to Storybook environments and does not extend to other UI frameworks
- Early stage project with potentially sparse documentation and support
Open-source & AI alternatives
Swap-in tools that solve the same job. Weigh the trade-offs before you commit.
Pairs with
Other entries in the index that connect to this one. Click through to see the chain.
Get the free Developer’s Field Guide
A 27-page field guide to the AI coding workflow with Claude. Claude Code, MCP servers, the prompt patterns that work, and what to delegate. Free.
Enter your work email. We send it straight over, plus a few short notes worth knowing. Unsubscribe any time.