storybookjs/addon-mcp

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.0

Tools exposed

• pnpm
• nvm
• git
• codex
• claude
• curl
• tsc
• vitest
• prettier
• oxlint
• publint
• changesets

Tested with

Claude Code, VS Code, MCP Inspector, MCPJam Inspector

Notes

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.

246 stars on GitHub. Last updated 2026-06-01. Licensed MIT.

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

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

Indexed from awesome-mcp-servers-punkpeye and enriched against its public facts.