MCP Design System Extractor

Instructions

Implementation Reference

• src/tools/get-component-variants.ts:29-72 (handler)

  Core handler function that validates the input, fetches the Storybook stories index, filters stories to find variants matching the component name (case-insensitive), extracts id, name, args, parameters, and returns a formatted success response with the list of variants or an error if none found.

  export async function handleGetComponentVariants(input: any) {
    let validatedInput: any;
    try {
      validatedInput = validateGetComponentVariantsInput(input);
      const client = new StorybookClient();
  
      const storiesIndex = await client.fetchStoriesIndex();
      const variants: ComponentVariant[] = [];
  
      const stories = storiesIndex.stories || storiesIndex.entries || {};
      Object.values(stories).forEach(story => {
        const componentName = story.title.split('/').pop() || story.title;
  
        if (componentName.toLowerCase() === validatedInput.componentName.toLowerCase()) {
          variants.push({
            id: story.id,
            name: story.name,
            ...(story.args && { args: story.args }),
            ...(story.parameters && { parameters: story.parameters }),
          });
        }
      });
  
      if (variants.length === 0) {
        const notFoundError = createNotFoundError(
          'get component variants',
          'component',
          'Use list_components tool to see all available components, or search_components to find similar component names',
          undefined,
          validatedInput.componentName
        );
        return handleError(notFoundError.message);
      }
  
      return formatSuccessResponse(
        variants,
        `Found ${variants.length} variants for component: ${validatedInput.componentName}`
      );
    } catch (error) {
      return handleErrorWithContext(error, 'get component variants', {
        componentName: validatedInput?.componentName || 'unknown',
      });
    }
  }

• src/tools/get-component-variants.ts:12-27 (registration)

  Tool registration object defining the name, description, and input schema for the 'get_component_variants' tool.

  export const getComponentVariantsTool: Tool = {
    name: 'get_component_variants',
    description:
      'Get all story variants/states for a specific component. Returns all stories (variants) for a component with their IDs, names, and parameters. Component name should match exactly as shown in list_components (case-sensitive).',
    inputSchema: {
      type: 'object',
      properties: {
        componentName: {
          type: 'string',
          description:
            'Exact name of the component as returned by list_components (e.g., "Button", "Input", "Card"). Case-sensitive matching.',
        },
      },
      required: ['componentName'],
    },
  };

• src/utils/validators.ts:26-28 (schema)

  Zod schema for validating the input to get_component_variants, requiring a componentName string.

  const GetComponentVariantsInputSchema = z.object({
    componentName: z.string(),
  });

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

  Server registration mapping the tool name 'get_component_variants' to its handler 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/utils/validators.ts:90-92 (schema)

  Validation function using the Zod schema to parse and validate input for get_component_variants.

  export function validateGetComponentVariantsInput(input: any): GetComponentVariantsInput {
    return GetComponentVariantsInputSchema.parse(input);
  }