get_component_dependencies
Analyze rendered HTML to identify internal dependencies of a component, detecting React components, web components, and CSS class patterns for design system analysis.
Instructions
Analyze rendered HTML to find which other components a given component internally uses by detecting React components, web components, and CSS class patterns
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| componentId | Yes | The story ID of the component (e.g., "example-button--primary") |
Implementation Reference
- 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); } }
- 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, ];
- 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()); }