MCP Design System Extractor

MCPOpen SourceMIT44.2

by freema • Frontend & UI

Extracts components, rendered HTML, styles, props, dependencies, and design tokens from Storybook design systems using headless Chrome.

Example Use Cases

1
List and discover all components and story variants from a Storybook instance for automated documentation or UI analysis.
2
Extract rendered HTML and CSS (including dynamic JS-rendered content) of component variants to reproduce or test UI output.
3
Pull design tokens, theme info, and external CSS analysis to generate style guides or feed design systems into downstream tooling.

Description

A Model Context Protocol (MCP) server that connects to Storybook instances and extracts component data including rendered HTML (with dynamic JS support), styles, argTypes/props, composition examples, and design tokens. It uses Puppeteer and headless Chrome for accurate rendering and can analyze external CSS files while offering token-optimized extraction to avoid large responses. Useful for documenting, searching, and analyzing component libraries and layout patterns; Docker-friendly and built to work with Storybook distributions. Provides tools for listing components, searching by purpose, extracting theme information, and discovering component dependencies.

Capabilities(9 total)

Tools (9)

list_components

List all UI components available in your design system/Storybook. Returns components like modals, dialogs, buttons, forms, cards, etc. with their names, categories, and variant count. Use this to explore what components are available for building UI features. Use category="all" or omit category parameter to list all components. Supports pagination to handle large component libraries.

category:stringcompact:booleanpage:numberpageSize:number

get_component_html

Extract HTML from a component. Default is async (returns job_id, poll with job_status). Set async=false for sync mode. Use variantsOnly=true to get variant list.

componentId:string*includeStyles:booleanvariantsOnly:booleanasync:booleantimeout:number

search_components

Search design system components by name, title, category, or purpose. Find UI components like modals, dialogs, buttons, forms, cards, etc. Supports text search (query) and semantic search by purpose. Available purposes: "form inputs", "navigation", "feedback", "data display", "layout", "buttons", "progress", "media". Supports pagination for large result sets.

query:stringpurpose:stringsearchIn:stringpage:numberpageSize:number

get_component_dependencies

Analyze rendered HTML to find which other components a given component internally uses by detecting React components, web components, and CSS class patterns

componentId:string*

get_theme_info

Get design system theme information (colors, spacing, typography, breakpoints)

includeAll:boolean

Quick Actions

View on GitHub

Security

Scanned 2 month(s) ago

Risk Level

MINIMAL

Read-only data retrieval, no side effects

Trust Score

C57/100

6/17 checks passed

Scores are informational only and provided “as is” without warranty. AgentHotspot assumes no liability for actions taken based on these ratings.

Quick Stats

Service TypeMCP

Pricing ModelFree

Capabilities9 Tools / 0 Prompts / 0 Resources

Ownerfreema

CategoryFrontend & UI

DependenciesStandalone

Set Your Username