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

src/tools/find-components-by-name.ts:12-34 (handler)

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)'),
});

src/tools/find-components-by-name.ts:8-10 (schema)

Local Zod schema for typing handler arguments (name only).

const FindComponentByNameParamsSchema = z.object({
  name: z.string().describe('Component name or keyword to search for'),
});

Storybook MCP Server