Related MCP Server Resources

Explore more AI models, providers, and integration options:

  • Explore AI Models
  • Explore AI Providers
  • Explore MCP Servers
  • LangDB Pricing
  • Documentation
  • AI Industry Blog
  • TMDB MCP Server
  • Gemini MCP Image Generation Server
  • GitHub MCP Server
  • Surf MCP Server
  • MCP SSH Server
Back to MCP Servers
Storybook MCP Server

Storybook MCP Server

Public
m-yoshiro/storybook-mcp

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.

javascript
0 tools
May 30, 2025
Updated Jun 4, 2025

Supercharge Your AI with Storybook MCP Server

MCP Server

Unlock the full potential of Storybook MCP Server through LangDB's AI Gateway. Get enterprise-grade security, analytics, and seamless integration with zero configuration.

Unified API Access
Complete Tracing
Instant Setup
Get Started Now

Free tier available • No credit card required

Instant Setup
99.9% Uptime
10,000+Monthly Requests

Storybook MCP Server

⚠️ This tool was created for testing purposes and is not recommended for use in production environments.


Getting Started

Before you begin, you need to prepare your Storybook static files. https://storybook.js.org/docs/sharing/publish-storybook

1. Clone the repository

git clone https://github.com/m-yoshiro/storybook-mcp.git cd storybook-mcp

2. Install dependencies

We recommend using Bun

bun install # or npm install

3. Build

bun run build # or npm run build

4. Set up

{ "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.


🔧 Available Tools

Tool NameDescriptionParameters
list-componentsLists all available components from Storybookpath (optional): Path to the index.json or stories.json file (optional if default path is provided)
find-components-by-nameFinds 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")

✨ Auto-generate UI code from a Figma section

Ask the AI:

"Generate a contact form using our design system"

➡️ MCP server:

  • Suggests TextField, Textarea, PrimaryButton
  • Provides JSX using those components

🧠 Why MCP?

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:

  • AI agents can suggest components intelligently
  • Designers and developers get a shared source of truth
  • Natural language is enough to drive UI generation

📁 Project Structure

storybook-mcp/
├── tools/
│   ├── list-components.ts
│   ├── get-component-details.ts
│   ├── get-component-usage-examples.ts
│   └── ...
├── config.ts
├── index.ts
└── README.md

🤝 Contributing

If you have ideas to improve or want to contribute new tools, feel free to open a PR or issue!


📜 License

MIT -->

Publicly Shared Threads0

Discover shared experiences

Shared threads will appear here, showcasing real-world applications and insights from the community. Check back soon for updates!

Share your threads to help others
Related MCPs5
  • TMDB MCP Server
    TMDB MCP Server

    Provides AI assistants with seamless access to The Movie Database API via Model Context Protocol, en...

    Added May 30, 2025
  • Gemini MCP Image Generation Server
    Gemini MCP Image Generation Server

    Provides image generation capabilities via Google's Gemini 2 API using the Model Context Protocol, e...

    1 tools
    Added May 30, 2025
  • GitHub MCP Server
    GitHub MCP Server

    Enhance Claude Desktop with seamless GitHub integration via Model Context Protocol, enabling natural...

    Added May 30, 2025
  • Surf MCP Server
    Surf MCP Server

    Provides tide information by location and date using latitude, longitude, and time zone data via Mod...

    1 tools
    Added May 30, 2025
  • MCP SSH Server
    MCP SSH Server

    Secure Model Context Protocol (MCP) SSH server enabling remote command execution, file and directory...

    Added May 30, 2025