get_component_html

Instructions

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;