Storybook Mcp Server

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

{
    "storybookUrl": "https://your-storybook.com",
    "operation": "list_stories",
    "componentId": "components-button"
}

Get Story Details

{
    "storybookUrl": "https://your-storybook.com",
    "operation": "get_story_details",
    "storyId": "components-button--primary"
}

Capture Screenshot

{
    "storybookUrl": "https://your-storybook.com",
    "operation": "capture_screenshot",
    "storyId": "components-button--primary",
    "viewportWidth": 1280,
    "viewportHeight": 720
}

Capture All Screenshots

{
    "storybookUrl": "https://your-storybook.com",
    "operation": "capture_all_screenshots",
    "maxScreenshots": 50,
    "viewportWidth": 1280,
    "viewportHeight": 720
}

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)

{
    "operation": "capture_screenshot",
    "storyId": "components-button--primary",
    "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:

{
    "storybookUrl": "https://your-storybook.com",
    "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.