Provides a Model Context Protocol interface to access and query Storybook UI components, enabling AI-driven component suggestions, detailed component information, usage examples, and natural language–based UI code generation from design inputs.
Unlock the full potential of Storybook MCP Server through LangDB's AI Gateway. Get enterprise-grade security, analytics, and seamless integration with zero configuration.
Free tier available • No credit card required
⚠️ This tool was created for testing purposes and is not recommended for use in production environments.
Before you begin, you need to prepare your Storybook static files. https://storybook.js.org/docs/sharing/publish-storybook
git clone https://github.com/m-yoshiro/storybook-mcp.git cd storybook-mcp
We recommend using Bun
bun install # or npm install
bun run build # or npm run build
{ "mcpServers": { "storybook-mcp": { "command": "node", "args": [ "//index.js", // Optional: path to your Storybook static json file "//index.json" ] } } }
The server will load your Storybook data and expose MCP tools to external agents.
Tool Name | Description | Parameters |
---|---|---|
list-components | Lists all available components from Storybook | path (optional): Path to the index.json or stories.json file (optional if default path is provided) |
find-components-by-name | Finds components based on a keyword (partial match supported) | name : Component name or keyword to search forpath (optional): Path to the index.json or stories.json file (optional if default path is provided) |
"What Storybook component matches this 'CTA Button' in my Figma design?"
➡️ MCP server runs:
find-component-by-name("cta button")
get-component-details("PrimaryButton")
get-component-usage-examples("PrimaryButton")
Ask the AI:
"Generate a contact form using our design system"
➡️ MCP server:
TextField
, Textarea
, PrimaryButton
MCP (Model Context Protocol) provides a standard interface for large language models to safely and efficiently access contextual information like UI components, documentation, and code.
By integrating your Storybook via MCP:
storybook-mcp/
├── tools/
│ ├── list-components.ts
│ ├── get-component-details.ts
│ ├── get-component-usage-examples.ts
│ └── ...
├── config.ts
├── index.ts
└── README.md
If you have ideas to improve or want to contribute new tools, feel free to open a PR or issue!
MIT -->
Discover shared experiences
Shared threads will appear here, showcasing real-world applications and insights from the community. Check back soon for updates!