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
LABSCO SUMMARY
The assistant reads your real components, not a generic guess.
The value is grounding UI work in the actual design system: get_component_html returns the rendered markup a component produces, and get_component_dependencies shows what it composes internally, so generated code reuses your components rather than reinventing buttons and cards. The token-extraction default is a nice touch — get_external_css returns only the tokens and stats unless you ask for the full CSS, which is what keeps a design-system read from flooding the context.
What it is
A server that extracts component information from a Storybook design system: 9 tools that list and search components, pull their rendered HTML, analyze what they depend on, and read theme and CSS design tokens. It renders dynamic components with headless Chrome.
What you get
- list_components enumerates every component in the Storybook with its name, category and variant count, and search_components finds them by name or by purpose — form inputs, navigation, feedback, data display, layout, buttons
- get_component_html extracts a component's rendered HTML, defaulting to async (returns a job_id you poll) with a sync mode available, and variantsOnly=true to get the variant list
- get_component_dependencies reads the rendered HTML to find which other components it uses internally, detecting React components, web components and CSS class patterns
- get_theme_info returns the design system's colors, spacing, typography and breakpoints, and get_external_css extracts design tokens from CSS files — by default just the tokens and file stats to stay small, with includeFullCSS=true when you want the CSS itself
- Async jobs are first-class: job_status polls a running extraction, job_list shows all jobs and their state, and job_cancel stops a queued or running one
Requirements
A running Storybook instance, its base URL in STORYBOOK_URL (default http://localhost:6006). Node, run as npx mcp-design-system-extractor over stdio; it uses Puppeteer's headless Chrome to render dynamic components. Set NODE_TLS_REJECT_UNAUTHORIZED=0 if the Storybook host has a self-signed certificate.
Setup effort
One command — npx -y mcp-design-system-extractor
USE CASES
01
Finding the right component to use
Search the design system by purpose — form inputs, navigation, feedback — or list everything with its variants, to pick the component that fits before writing any markup.
02
Building UI from real markup
Pull a component's rendered HTML and its variants, then check which other components it depends on so the code you generate composes the system correctly.
03
Matching the design tokens
Read the theme's colors, spacing and typography and extract the CSS design tokens, so new UI uses the system's values rather than hard-coded ones.
9 tools
Counted once with only startup setup. Other versions, modes or optional credentials may expose a different list.
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.
get_external_css
Extract design tokens from CSS files. DEFAULT BEHAVIOR: Returns ONLY tokens and file statistics (small response ~1-3K tokens). Does NOT return CSS content by default to avoid token limits. For full CSS content, explicitly set includeFullCSS=true and maxContentSize. Perfect for analyzing design system tokens without hitting response size limits.
get_theme_info
Get design system theme information (colors, spacing, typography, breakpoints)
job_cancel
Cancel a queued or running job. Returns whether the cancellation was successful.
job_list
List all jobs with their status. Shows what each job is processing and whether it is still running.
job_status
Check the status of an async job. Returns status, progress, and result when completed. Poll this endpoint to get results from get_component_html.
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.
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.
BEFORE YOU INSTALL
What to know first
Tools you get
9 tools when we connected.
Requires
- npx on PATH
- Node.js 20+
CONTEXT COST
Light Standing cost
Rated by the size of the 9 tool definitions that ride along on every turn, not by how many there are
INSTALLATION
Connect your client
Add the block to your client, or run the command directly.
Server setup
Configuration file
JSON
{
"mcpServers": {
"mcp-design-system-extractor": {
"command": "npx",
"args": [
"-y",
"mcp-design-system-extractor"
]
}
}
}npx
TERMINAL
npx -y mcp-design-system-extractor
