get_component_html
Extract HTML from a Storybook component using a story ID. Optionally include CSS styles to analyze component structure and styling for design system adoption or refactoring.
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
| Name | Required | Description | Default |
|---|---|---|---|
| componentId | Yes | 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. | |
| includeStyles | No | Whether 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"
}
Implementation Reference
- src/tools/get-component-html.ts:31-74 (handler)The main handler function that validates input, fetches component HTML from Storybook using a timeout wrapper, extracts relevant data including optional styles, and returns a formatted success response or handles errors.export async function handleGetComponentHTML(input: any) { let validatedInput: any; try { validatedInput = validateGetComponentHTMLInput(input); const client = new StorybookClient(); const timeout = getEnvironmentTimeout(OPERATION_TIMEOUTS.fetchComponentHTML); // Add timeout wrapper const timeoutPromise = new Promise((_, reject) => { setTimeout(() => { const timeoutError = createTimeoutError( 'get component HTML', timeout, undefined, `component ${validatedInput.componentId}` ); reject(new Error(timeoutError.message)); }, timeout); }); const componentHTML = (await Promise.race([ client.fetchComponentHTML(validatedInput.componentId), timeoutPromise, ])) as ComponentHTML; const response = { storyId: componentHTML.storyId, html: componentHTML.html, classes: componentHTML.classes, ...(validatedInput.includeStyles && { styles: componentHTML.styles }), }; return formatSuccessResponse( response, `Extracted HTML for component: ${validatedInput.componentId}` ); } catch (error) { return handleErrorWithContext(error, 'get component HTML', { storyId: validatedInput?.componentId || 'unknown', resource: 'component HTML', }); } }
- src/tools/get-component-html.ts:9-29 (schema)Tool definition object with name 'get_component_html', description, and inputSchema defining parameters: componentId (required string) and optional includeStyles boolean.export const getComponentHTMLTool: Tool = { name: 'get_component_html', description: '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.', inputSchema: { type: 'object', properties: { componentId: { type: 'string', 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.', }, includeStyles: { type: 'boolean', description: 'Whether to include extracted CSS styles in the response (useful for understanding component styling)', }, }, required: ['componentId'], }, };
- src/index.ts:15-24 (registration)Registration of the handleGetComponentHTML function in the toolHandlers Map, mapped by tool name 'get_component_html', used by the MCP server for handling CallToolRequests.const toolHandlers = new Map<string, (input: any) => Promise<any>>([ ['list_components', tools.handleListComponents], ['get_component_html', tools.handleGetComponentHTML], ['get_component_variants', tools.handleGetComponentVariants], ['search_components', tools.handleSearchComponents], ['get_component_dependencies', tools.handleGetComponentDependencies], ['get_theme_info', tools.handleGetThemeInfo], ['get_component_by_purpose', tools.handleGetComponentByPurpose], ['get_external_css', tools.handleGetExternalCSS], ]);
- src/index.ts:26-35 (registration)Inclusion of getComponentHTMLTool in the allTools array, returned by ListToolsRequest handler for tool discovery.const allTools = [ tools.listComponentsTool, tools.getComponentHTMLTool, tools.getComponentVariantsTool, tools.searchComponentsTool, tools.getComponentDependenciesTool, tools.getThemeInfoTool, tools.getComponentByPurposeTool, tools.getExternalCSSTool, ];
- src/utils/validators.ts:79-87 (schema)Zod-based validation function for GetComponentHTMLInput, parsing input against schema and constructing typed result object.export function validateGetComponentHTMLInput(input: any): GetComponentHTMLInput { const parsed = GetComponentHTMLInputSchema.parse(input); const result: GetComponentHTMLInput = { componentId: parsed.componentId, }; if (parsed.includeStyles !== undefined) { result.includeStyles = parsed.includeStyles; } return result;