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" type - Props 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.
This server cannot be installed
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 -342261JavaScriptApache 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 -14TypeScriptMIT 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 -237114JavaScriptMIT License
- -securityFlicense-qualityA server implementation of the Model Context Protocol (MCP) that provides REST API endpoints for managing and interacting with MCP resources.Last updated -Python