Skip to main content
Glama

MCP Design System Extractor

get_component_html

Extract HTML and optional CSS styles for a specific component story from Storybook using a valid story ID. Obtain story IDs via list_components or get_component_variants for accurate extraction.

Instructions

Extract HTML from a specific component story in Storybook. Requires a story ID (format: "component-name--story-name", e.g., "button--primary", "forms-input--default"). Use list_components or get_component_variants first to find valid story IDs.

Input Schema

NameRequiredDescriptionDefault
componentIdYesThe story ID in format "component-name--story-name" (e.g., "button--primary", "forms-input--default"). Get this from list_components or get_component_variants.
includeStylesNoWhether to include extracted CSS styles in the response (useful for understanding component styling)

Input Schema (JSON Schema)

{ "properties": { "componentId": { "description": "The story ID in format \"component-name--story-name\" (e.g., \"button--primary\", \"forms-input--default\"). Get this from list_components or get_component_variants.", "type": "string" }, "includeStyles": { "description": "Whether to include extracted CSS styles in the response (useful for understanding component styling)", "type": "boolean" } }, "required": [ "componentId" ], "type": "object" }
Install Server

Other Tools from MCP Design System Extractor

Related Tools

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/freema/mcp-design-system-extractor'

If you have feedback or need assistance with the MCP directory API, please join our Discord server