find-components-by-name
Search UI components by name or keyword in Storybook to locate specific elements and retrieve usage examples for development.
Instructions
Search components by name/keyword
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Component name or keyword to search for | |
| path | No | Path to the index.json or stories.json file (optional if default path is provided) |
Implementation Reference
- Main handler function that fetches components from Storybook static dir, filters by name keyword (case-insensitive), and returns JSON stringified matching components as text content.
export const findComponentsByName = async ( args: z.infer<typeof FindComponentByNameParamsSchema> & { storybookStaticDir: string } ) => { try { const components = await getComponents(args.storybookStaticDir); const searchTerm = args.name.toLowerCase(); const matchingComponents = components.filter((component: Component) => component.name.toLowerCase().includes(searchTerm) ); return { content: [ { type: 'text', text: JSON.stringify(matchingComponents, null, 2), }, ], }; } catch (error) { console.error('Error finding component by name:', error); throw new McpError(ErrorCode.InternalError, 'Failed to find component by name'); } }; - src/index.ts:84-85 (registration)Switch case in CallToolRequestHandler that invokes the findComponentsByName handler with arguments.
case 'find-components-by-name': return findComponentsByName({ name: args.name || '', storybookStaticDir }); - src/index.ts:58-62 (registration)Tool registration in ListToolsResponse, defining name, description, and inputSchema.
{ name: 'find-components-by-name', description: 'Search components by name/keyword', inputSchema: zodToJsonSchema(findComponentsByNameParamsSchema.describe('Parameters for finding component by name')) as ToolInput, }, - src/index.ts:41-44 (schema)Zod schema for input parameters used in tool registration (name required, path optional).
const findComponentsByNameParamsSchema = z.object({ name: z.string().describe('Component name or keyword to search for'), path: z.string().optional().describe('Path to the index.json or stories.json file (optional if default path is provided)'), }); - Local Zod schema for typing handler arguments (name only).
const FindComponentByNameParamsSchema = z.object({ name: z.string().describe('Component name or keyword to search for'), });