Storybook MCP Server

Instructions

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