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;

MCP Design System Extractor