MCP Design System Extractor

Instructions

Implementation Reference

• src/tools/get-component-dependencies.ts:23-99 (handler)

  The main handler function for the 'get_component_dependencies' tool. It validates the input, fetches the component's HTML from Storybook, analyzes it using regex patterns to detect nested components and CSS classes, categorizes dependencies as internal or external using heuristics, and returns a structured ComponentDependencies object.

  export async function handleGetComponentDependencies(input: any) {
    try {
      const validatedInput = validateGetComponentDependenciesInput(input);
      const client = new StorybookClient();
  
      // Fetch the component HTML
      const componentHTML = await client.fetchComponentHTML(validatedInput.componentId);
  
      // Analyze the HTML to find other components
      const dependencies = new Set<string>();
      const internalComponents = new Set<string>();
      const externalComponents = new Set<string>();
  
      // Common patterns for component detection
      const componentPatterns = [
        // React-style components: <Button>, <MuiButton>
        /<([A-Z][a-zA-Z0-9]*)\s*[^>]*>/g,
        // Web components: <my-button>, <app-header>
        /<([a-z]+-[a-z-]+)\s*[^>]*>/g,
        // Angular/Vue style: <app-button>, <v-btn>
        /<(app-[a-z-]+|v-[a-z-]+)\s*[^>]*>/g,
      ];
  
      // Extract component names from HTML
      for (const pattern of componentPatterns) {
        let match;
        while ((match = pattern.exec(componentHTML.html)) !== null) {
          const componentName = match[1];
          if (componentName && !isHTMLElement(componentName)) {
            dependencies.add(componentName);
          }
        }
      }
  
      // Also check for CSS classes that might indicate component usage
      const classPatterns = [
        /\b([A-Z][a-zA-Z0-9]+)-root\b/g,
        /\bMui([A-Z][a-zA-Z0-9]+)\b/g,
        /\bcomponent-([a-z-]+)\b/g,
      ];
  
      for (const pattern of classPatterns) {
        let match;
        while ((match = pattern.exec(componentHTML.html)) !== null) {
          const componentName = match[1];
          if (componentName) {
            dependencies.add(componentName);
          }
        }
      }
  
      // Try to categorize dependencies
      const allDependencies = Array.from(dependencies);
      for (const dep of allDependencies) {
        // Heuristic: if it starts with Mui, Material, Ant, etc., it's external
        if (/^(Mui|Material|Ant|Bootstrap|Semantic)/i.test(dep)) {
          externalComponents.add(dep);
        } else {
          internalComponents.add(dep);
        }
      }
  
      const componentDependencies: ComponentDependencies = {
        storyId: validatedInput.componentId,
        dependencies: allDependencies.sort(),
        internalComponents: Array.from(internalComponents).sort(),
        externalComponents: Array.from(externalComponents).sort(),
      };
  
      return formatSuccessResponse(
        componentDependencies,
        `Retrieved dependencies for component: ${validatedInput.componentId}`
      );
    } catch (error) {
      return handleError(error);
    }
  }

• src/tools/get-component-dependencies.ts:7-21 (schema)

  The Tool object definition including the name, description, and inputSchema for validation in MCP.

  export const getComponentDependenciesTool: Tool = {
    name: 'get_component_dependencies',
    description:
      'Analyze rendered HTML to find which other components a given component internally uses by detecting React components, web components, and CSS class patterns',
    inputSchema: {
      type: 'object',
      properties: {
        componentId: {
          type: 'string',
          description: 'The story ID of the component (e.g., "example-button--primary")',
        },
      },
      required: ['componentId'],
    },
  };

• src/index.ts:15-24 (registration)

  Registration of the tool handler in the MCP server's toolHandlers Map, mapping 'get_component_dependencies' to its handleGetComponentDependencies function.

  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)

  Registration of the tool object in the allTools array, used for ListTools response.

  const allTools = [
    tools.listComponentsTool,
    tools.getComponentHTMLTool,
    tools.getComponentVariantsTool,
    tools.searchComponentsTool,
    tools.getComponentDependenciesTool,
    tools.getThemeInfoTool,
    tools.getComponentByPurposeTool,
    tools.getExternalCSSTool,
  ];

• src/tools/get-component-dependencies.ts:101-149 (helper)

  Helper function to filter out standard HTML elements from detected component tags.

  function isHTMLElement(tagName: string): boolean {
    const htmlElements = [
      'div',
      'span',
      'p',
      'a',
      'button',
      'input',
      'form',
      'label',
      'h1',
      'h2',
      'h3',
      'h4',
      'h5',
      'h6',
      'ul',
      'ol',
      'li',
      'table',
      'tr',
      'td',
      'th',
      'thead',
      'tbody',
      'tfoot',
      'img',
      'video',
      'audio',
      'canvas',
      'svg',
      'path',
      'g',
      'header',
      'footer',
      'nav',
      'main',
      'section',
      'article',
      'aside',
      'details',
      'summary',
      'figure',
      'figcaption',
    ];
  
    return htmlElements.includes(tagName.toLowerCase());
  }