Skip to main content
Glama

storybook-mcp

by mcpland
npmGitHub
TypeScript
MIT License
186
17
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Storybook MCP Server

Node CI npm license

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:

{ "mcpServers": { "storybook": { "command": "npx", "args": ["-y", "storybook-mcp"], "env": { "STORYBOOK_URL": "<your_storybook_url>/index.json" } } } }

Environment Variables

  • STORYBOOK_URL (required): The URL to your Storybook's index.json file

  • CUSTOM_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:

Available components: Accordion Avatar Badge Button ...

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:

Tool: getComponentsProps Parameters: { "componentNames": ["Button", "Input", "Avatar"] }

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:

interface CustomTool { name: string; // Unique tool name description: string; // Tool description for the AI parameters: object; // Input parameters schema (optional) page: string; // URL to navigate to handler: string; // JavaScript code to execute on the page }

Example Custom Tools:

[ { "name": "getIconList", "description": "Get All Icons from the Icon page", "parameters": {}, "page": "https://your-storybook.com/?path=/docs/icon--docs", "handler": "Array.from(document.querySelectorAll('.icon-name')).map(i => i.textContent)" }, { "name": "getColorPalette", "description": "Extract color palette from design tokens", "parameters": {}, "page": "https://your-storybook.com/?path=/docs/design-tokens--colors", "handler": "Array.from(document.querySelectorAll('.color-swatch')).map(el => ({ name: el.getAttribute('data-color-name'), value: el.style.backgroundColor }))" } ]

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.

{ "mcpServers": { "storybook-mcp": { "command": "npx", "args": ["-y", "storybook-mcp@latest"], "env": { "STORYBOOK_URL": "https://opensource.adobe.com/spectrum-web-components/storybook/index.json", "CUSTOM_TOOLS": "[{\"name\":\"getIconList\",\"description\":\"Get All Icons from the Icon page\",\"parameters\":{},\"page\":\"https://opensource.adobe.com/spectrum-web-components/storybook/iframe.html?viewMode=docs&id=icons--docs&globals=\",\"handler\":\"Array.from(document.querySelector('icons-demo').shadowRoot.querySelectorAll('.icon')).map(i => i.textContent)\"}]" } } } }

How it works

  1. Component List: The server fetches the Storybook's index.json file(v3 is stories.json) and extracts all components marked as "docs" type

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

  1. Clone the repository

  2. Install dependencies: yarn install

  3. Install Playwright browsers: npx playwright install chromium

  4. Set the environment variable: export STORYBOOK_URL="your-storybook-url"

  5. Run in development mode: yarn dev

Note: You can also use npx @modelcontextprotocol/inspector tsx src/index.ts instead of yarn dev if you prefer.

Building

yarn build

Testing

yarn test

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.

Deploy Server
-
security - not tested
A
license - permissive license
-
quality - not tested

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

A Model Context Protocol (MCP) server for Storybook.

  1. Features
    1. Installation and Configuration
      1. MCP Settings
      2. Environment Variables
    2. Usage
      1. Built-in Tools
      2. Custom Tools
    3. Example
      1. How it works
        1. Supported Storybook URLs
          1. Development
            1. Local Development
            2. Building
            3. Testing
          2. Requirements
            1. Error Handling
              1. License

                Related MCP Servers

                • MCP-Guide

                  qpd-v
                  A
                  security
                  A
                  license
                  A
                  quality
                  A 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 -
                  3
                  16
                  63
                  Apache 2.0

                • MCP Server

                  la-rebelion
                  -
                  security
                  A
                  license
                  -
                  quality
                  MCP 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 -
                  3
                  4
                  MIT License

                • Storybook MCP Server

                  m-yoshiro
                  A
                  security
                  A
                  license
                  A
                  quality
                  A 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 -
                  2
                  186
                  21
                  MIT License

                • MCP Server

                  stelang
                  -
                  security
                  A
                  license
                  -
                  quality
                  An 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

                View all related MCP servers

                New MCP Servers

                MCP directory API

                We provide all the information about MCP servers via our MCP API.

                curl -X GET 'https://glama.ai/api/mcp/v1/servers/mcpland/storybook-mcp'

                If you have feedback or need assistance with the MCP directory API, please join our Discord server