Provides specific integration with Adobe's Spectrum Web Components, allowing access to component documentation and icon lists through the MCP server.
Provides tools for extracting component lists, props information, and custom data from Storybook documentation, enabling AI to understand and reference UI component libraries.
Storybook MCP Server
A Model Context Protocol (MCP) server that provides tools to interact with Storybook documentation and component information.
Features
getComponentList: Get a list of all components from a configured Storybook
getComponentsProps: Get detailed props information for multiple components using headless browser automation
Custom Tools: Create custom tools that can extract any information from your Storybook pages using JavaScript
Installation and Configuration
MCP Settings
Add the following configuration to MCP settings:
Environment Variables
STORYBOOK_URL
(required): The URL to your Storybook's index.json fileCUSTOM_TOOLS
(optional): JSON array of custom tool definitions for extracting specific information from your Storybook
Usage
The server provides built-in tools and supports custom tools:
Built-in Tools
1. getComponentList
Retrieves a list of all available components from the configured Storybook.
Example:
2. getComponentsProps
Gets detailed props information for multiple components, including:
Property names
Types
Default values
Descriptions
Required/optional status
Parameters:
componentNames
(array of strings): Array of component names to get props information for
Example usage:
Custom Tools
You can define custom tools to extract specific information from your Storybook pages. Each custom tool can:
Navigate to any page in your Storybook
Execute custom JavaScript to extract data
Return structured data to the AI assistant
Custom Tool Structure:
Example Custom Tools:
For more examples and detailed documentation, see examples/custom-tools-example.md.
Example
Set Spectrum
storybook-mcp config with STORYBOOK_URL
and CUSTOM_TOOLS
environment variables.
How it works
Component List: The server fetches the Storybook's
index.json
file(v3 isstories.json
) and extracts all components marked as "docs" typeProps Information: For component props, the server:
Finds the component's documentation ID from the index.json
Constructs the iframe URL for the component's docs page
Uses Playwright to load the page in a headless browser
Extracts the props table HTML from the documentation
Supported Storybook URLs
The server works with any Storybook that exposes an index.json
file(v3 is stories.json
). Common patterns:
https://your-storybook-domain.com/index.json
https://your-storybook-domain.com/storybook/index.json
Development
Local Development
Clone the repository
Install dependencies:
yarn install
Install Playwright browsers:
npx playwright install chromium
Set the environment variable:
export STORYBOOK_URL="your-storybook-url"
Run in development mode:
yarn dev
Note: You can also use
npx @modelcontextprotocol/inspector tsx src/index.ts
instead ofyarn dev
if you prefer.
Building
Testing
Requirements
Node.js 18.0.0 or higher
Chromium browser (automatically installed with Playwright)
Error Handling
The server includes comprehensive error handling for:
Missing or invalid Storybook URLs
Network connectivity issues
Component not found scenarios
Playwright browser automation failures
License
Storybook MCP is MIT licensed.
hybrid server
The server is able to function both locally and remotely, depending on the configuration or use case.
A Model Context Protocol (MCP) server for Storybook.
Related MCP Servers
- AsecurityAlicenseAqualityA beginner-friendly Model Context Protocol (MCP) server that helps users understand MCP concepts, provides interactive examples, and lists available MCP servers. This server is designed to be a helpful companion for developers working with MCP. Also comes with a huge list of servers you can install.Last updated -3863Apache 2.0
- -securityAlicense-qualityMCP Server simplifies the implementation of the Model Context Protocol by providing a user-friendly API to create custom tools and manage server workflows efficiently.Last updated -04MIT License
- AsecurityAlicenseAqualityA Model Context Protocol server that integrates with Storybook to help AI tools query UI components and retrieve usage examples from static Storybook files.Last updated -211821MIT License
- -securityAlicense-qualityAn implementation of the Model Context Protocol (MCP) server that enables multiple clients to connect simultaneously and handles basic context management and messaging with an extendable architecture.Last updated -MIT License