get_component_variants
Retrieve all story variants and states for a specific component from a Storybook design system. Returns variant IDs, names, and parameters to analyze component behavior across different scenarios.
Instructions
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).
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | Yes | Exact name of the component as returned by list_components (e.g., "Button", "Input", "Card"). Case-sensitive matching. |
Implementation Reference
- 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); }