Storybook MCP Server

Pricing

Pay per event

Try for free

Go to Apify Store

Storybook MCP Server

minute_contest/storybook-mcp-server

Try for free

Ask questions about this Actor

Connect AI assistants to any Storybook via MCP. 6 tools for components, stories, props, and visual testing. Works with Claude, ChatGPT, n8n.

Pricing

Pay per event

Rating

0.0

(0)

Developer

Piotr Kaplon

Maintained by Community

Actor stats

0

Bookmarked

1

Total users

0

Monthly active users

6 days ago

Last modified

Categories

MCP servers

AI

Developer tools

README

Input

Pricing

API

Issues

Changelog

Connect AI assistants to any Storybook instance via MCP (Model Context Protocol). This Actor provides 6 tools for interacting with UI component libraries, design systems, and Storybook documentation.

Features

• Component Discovery: Browse and list all available components
• Story Management: Access stories with filtering capabilities
• Detailed Inspection: Get comprehensive story information including props and args
• Visual Testing: Capture screenshots of individual or multiple stories
• Responsive Testing: Test components across various viewport dimensions
• Universal Compatibility: Works with any publicly accessible Storybook instance

Available Operations

Operation	Description	Required Params
list_components	List all components in the Storybook	-
list_stories	List all stories, optionally filtered by component	componentId (optional)
get_story_details	Get detailed information about a specific story	storyId
get_component_props	Get props/properties definition for a component	componentId
capture_screenshot	Capture a screenshot of a specific story	storyId
capture_all_screenshots	Capture screenshots of all stories	maxScreenshots (optional)

Usage Examples

List All Components

{

    "storybookUrl": "https://your-storybook.com",

    "operation": "list_components"

}

List Stories for a Component

{

    "operation": "list_stories",

    "componentId": "components-button"

}

Get Story Details

{

    "operation": "get_story_details",

    "storyId": "components-button--primary"

}

Capture Screenshot

{

    "operation": "capture_screenshot",

    "storyId": "components-button--primary",

    "viewportWidth": 1280,

    "viewportHeight": 720

}

Capture All Screenshots

{

    "operation": "capture_all_screenshots",

    "maxScreenshots": 50,

}

Input Parameters

Parameter	Type	Required	Default	Description
storybookUrl	string	Yes	-	URL of your Storybook instance
mode	string	No	batch	batch for one-time operations, standby for MCP server
operation	string	No	list_components	Operation to perform
componentId	string	No	-	Component ID for filtering
storyId	string	No	-	Story ID for details/screenshots
viewportWidth	integer	No	1280	Viewport width for screenshots
viewportHeight	integer	No	720	Viewport height for screenshots
waitForSelector	string	No	-	CSS selector to wait for before screenshot
waitTime	integer	No	1000	Wait time in ms after page load
maxScreenshots	integer	No	50	Max screenshots for batch capture

Supported Storybook Versions

• Storybook 6.x (uses /stories.json)
• Storybook 7.x and 8.x (uses /index.json)

Output

Results are saved to the Actor's default dataset. Screenshots are saved to the key-value store with public URLs returned in the results.

Example Output (list_components)

{

    "operation": "list_components",

    "id": "components-button",

    "name": "Button",

    "kind": "Components/Button",

    "title": "Components/Button"

}

Example Output (capture_screenshot)

{

    "filename": "screenshot-components-button--primary.png",

    "url": "https://api.apify.com/v2/key-value-stores/.../records/screenshot-components-button--primary.png",

    "viewport": { "width": 1280, "height": 720 }

}

Integration with AI Assistants

This Actor can be used as an MCP server in standby mode for integration with:

• Claude Desktop: Connect via HTTP transport
• Claude Code: Use as MCP tool
• n8n Workflows: HTTP Request node to the standby server
• Custom AI Agents: JSON-RPC over HTTP

Standby Mode

Run in standby mode for persistent MCP server:

{

    "mode": "standby"

}

The server will be available at the Actor's standby URL.

Public Storybook Examples

You can test with these public Storybooks:

• Storybook Official: https://5ccbc373887ca40020446347-gemkrrfkxg.chromatic.com/
• Carbon Design System: https://react.carbondesignsystem.com/
• Shopify Polaris: https://polaris.shopify.com/

Limitations

• Storybook instance must be publicly accessible (or use a tunnel for local instances)
• Screenshot capture requires components to render within timeout
• Some Storybooks may have CORS restrictions

License

MIT License

Support

For issues or feature requests, please open an issue on the Actor's GitHub repository.

You might also like

Webflow MCP Server

minute_contest/webflow-mcp-server

Connect AI assistants to Webflow via MCP. 22+ tools for sites, CMS collections, pages, and content. Works with Claude, ChatGPT, n8n workflows.

Piotr Kaplon

2

n8n-mcp

nourishing_courier/web-data-for-ai

n8n-mcp

Ani Björkström

4

n8n Documentation MCP Server

agentify/n8n-mcp-server

n8n MCP Server provides AI assistants with structured access to n8n node documentation, properties, and validation tools for building and verifying workflows efficiently.

agentify

39

ClickUp MCP Server

minute_contest/clickup-mcp-server

Connect AI assistants to ClickUp via MCP. 20 tools for tasks, spaces, folders, lists, views, docs. Works with Claude, ChatGPT, n8n workflows

Piotr Kaplon

2

Storybook MCP Server

baldasseva/storybook-mcp

Deploy any publicly available Storybook as MCP server. Get LLM-readable UI component lists, UI documentation and more.

Eva Baldasseroni

6

n8n MCP Template

sameh.jarour/n8n-mcp-template

Sameh George Jarour

12

N8n Mcp Actor

direct_duty/n8n-mcp-actor

Bridge between n8n workflows and Model Context Protocol (MCP) servers.

Sean

1

Linkedin Ads Mcp Server [PPR]

zadexinho/linkedin-ads-mcp-server

MCP server providing LinkedIn Ad Library data to AI agents. Tools: [search_linkedin_ads], [get_ad_details], [get_advertiser_ads]. Connect Claude Desktop, Cursor, n8n, or any MCP-compatible client. Returns ad copy, creatives, and active status.

zadexinho

2

n8n Workflow Automation Templates Scraper

scraped/n8n-workflow-automation-templates-scraper

A tool that automatically scrapes and collects n8n workflow automation templates from the n8n for easy access and use.

scraped

283

n8n-apify-bridge

jungle_thunder/n8n-apify-bridge

Turn your n8n workflows into data powerhouses. This bridge gives n8n users instant access to 2000 battle-tested Apify tools - web scrapers, AI agents, lead generators, price monitors, and more. No coding required.

Ani Björkström

8

Related articles

How to publish your Apify Actor as an n8n node

Read more

Best MCP servers for developers

Read more