Storybook

Storybook

A TypeScript MCP server enabling AI to interact with Storybook components, stories, and visual testing.

4
Stars
0
Forks
4
Releases

Overview

A TypeScript MCP (Model Context Protocol) server that provides comprehensive access to Storybook instances. This server enables AI assistants to interact with Storybook components, stories, and to capture screenshots. It can connect to any running Storybook instance—local development servers, deployed production Storybooks, or public component libraries. Key capabilities include component discovery to browse and list components; story management to access all stories with optional component filtering; detailed inspection to retrieve complete story information such as parameters, args, and prop definitions; visual testing to capture and analyze screenshots of individual stories or the entire set; responsive testing to render components across multiple viewport sizes; and smart detection to automatically identify the Storybook version and API endpoints for compatibility across setups. It is built with TypeScript, MCP SDK, Puppeteer, Axios, and Winston for stable typing, HTTP communication, screenshot capture, and logging. The MCP tools support commands like storybook_list_components, storybook_list_stories, storybook_get_story_details, storybook_get_component_props, storybook_capture_screenshot, and storybook_capture_all_screenshots. Typical usage includes connecting to a running Storybook, starting Storybook if needed, and performing discovery, inspection, and testing tasks.

Details

Owner
stefanoamorelli
Language
TypeScript
License
GNU Affero General Public License v3.0
Updated
2025-12-07

Features

Component Discovery

Browse and list all components in your Storybook instance.

Story Management

Access all stories with filtering by component.

Detailed Inspection

Get complete story information including parameters, args, and prop definitions.

Visual Testing

Capture screenshots of individual or all stories.

Responsive Testing

Test components across multiple viewport sizes.

Smart Detection

Automatically detects Storybook version and API endpoints for compatibility across different Storybook setups.

Audience

AI assistantsInteract with Storybook components and stories through natural language commands.
Design teamsAutomate component discovery, story inspection, and visual testing across Storybook libraries.
QA engineersPerform automated visual regression tests and verify component props across stories.

Tags

StorybookMCPTypeScriptPuppeteerScreenshotsVisual TestingComponent DiscoveryStory ManagementProp InspectionResponsive Testing