FastMCP FastMCP
Sign In
S

Storybook

Integrates with Storybook documentation to extract component information, props data, and custom des...

62 views
0 installs
Updated Sep 17, 2025
Not audited
Browser Automation Developer Tools
Integrates with Storybook documentation to extract component information, props data, and custom design system elements like icons and color palettes using browser automation and JavaScript execution.

  1. Obtain the Storybook URL

    • Make sure your Storybook is deployed and publicly accessible.
    • The required URL should point to your Storybook’s index.json (for version 6 and later) or stories.json (for version 5).
    • Typical formats:
      • https://your-storybook-domain.com/index.json
      • https://your-storybook-domain.com/storybook/index.json
    • Open your browser and navigate to one of the above URLs for your deployment. If you see a list of story objects, this is the correct URL.

  2. (Optional) Prepare Custom Tools Configuration

    • If you want to add custom extraction tools, create a JSON array following this structure: 
      [
  {
    "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)"
  }
]
    • Replace "page" and "handler" with values that match your Storybook’s structure and what you want to extract.
    • You can skip this step if you do not need custom tools.

  3. Add Environment Variable(s) in the FastMCP Connection Interface

    • Go to the “Install Now” button for Storybook MCP.
    • In the FastMCP connection interface:
      • Fill in the environment variable STORYBOOK_URL with the URL you identified in Step 1.
      • If using custom tools, add the CUSTOM_TOOLS variable and paste the JSON array you prepared in Step 2.

  4. Save and Finish

    • Click to save or finish the integration.
    • The MCP server will now use your Storybook URL (and custom tools, if provided) for all relevant operations.

Quick Start

View on GitHub

More for Browser Automation

View All →

More for Developer Tools

View All →

Report Issue

Thank you! Your issue report has been submitted successfully.