get_component_html
Extract HTML from Storybook component stories to analyze structure and styling for design system adoption and 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
TableJSON 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) |
Implementation Reference
- src/tools/get-component-html.ts:31-74 (handler)The async handler function that executes the tool: validates input, fetches HTML from Storybook component using StorybookClient with timeout protection, formats response including optional styles, and 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)The tool specification including name, description, and input schema defining parameters: componentId (required string), includeStyles (optional boolean). Used for tool listing and validation in MCP.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)Registers the 'get_component_html' tool name to its handler function in the Map used to dispatch 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)Adds getComponentHTMLTool to the array of all tools returned in ListTools response.const allTools = [ tools.listComponentsTool, tools.getComponentHTMLTool, tools.getComponentVariantsTool, tools.searchComponentsTool, tools.getComponentDependenciesTool, tools.getThemeInfoTool, tools.getComponentByPurposeTool, tools.getExternalCSSTool, ];
- src/utils/validators.ts:79-87 (helper)Zod-based input validator for get_component_html tool, parsing and typing the input 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;