find-components-by-name
Search and retrieve UI components by name or keyword from Storybook files to streamline development and enhance component discovery.
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
- The core handler function that executes the tool logic: retrieves components from Storybook, filters by name keyword, and returns JSON string.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'); } };
- Zod input schema used for typing the handler arguments (name only).const FindComponentByNameParamsSchema = z.object({ name: z.string().describe('Component name or keyword to search for'), });
- src/index.ts:58-62 (registration)Tool registration in the ListTools response, defining name, description, and input schema.{ 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 the tool input used in registration, including optional path.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)'), });
- src/index.ts:84-85 (registration)Dispatch to the tool handler in the CallToolRequest switch statement.case 'find-components-by-name': return findComponentsByName({ name: args.name || '', storybookStaticDir });