storybook-mcp

Instructions

Implementation Reference

• src/server.ts:233-262 (handler)

  Primary handler for the getComponentList MCP tool. Fetches Storybook JSON data and uses version-specific helpers to extract and return the list of available components.
  private async getComponentList() { try { const response = await fetch(this.storybookUrl); if (!response.ok) { throw new Error( `Failed to fetch Storybook data: ${response.statusText}` ); } const data = (await response.json()) as StorybookDataV3 | StorybookDataV5; const components = data.v === 3 ? getComponentListV3(data) : getComponentListV5(data); return { content: [ { type: "text", text: `Available components:\n${components.join("\n")}`, }, ], }; } catch (error) { throw new Error( `Failed to get component list: ${ error instanceof Error ? error.message : String(error) }` ); } }
• src/server.ts:151-159 (registration)

  Registration of the getComponentList tool in the ListTools handler, including name, description, and empty input schema.
  { name: "getComponentList", description: "Get a list of all components from the configured Storybook", inputSchema: { type: "object", properties: {}, }, },
• src/server.ts:30-30 (schema)

  Zod schema definition for getComponentList input (empty object). Note: not used in handler.
  const GetComponentListSchema = z.object({});
• src/storybookv3.ts:20-44 (helper)

  Helper function that extracts unique component names from Storybook V3 data by parsing story 'kind' fields.
  export const getComponentList = (storybookData: StorybookData) => { if (!storybookData || storybookData.v !== 3 || !storybookData.stories) { return []; } const componentSet = new Set<string>(); const stories = storybookData.stories; for (const key in stories) { if (Object.prototype.hasOwnProperty.call(stories, key)) { const story = stories[key]; // filter out docs pages if (story.parameters && !story.parameters.docsOnly) { // get component path or name from 'kind' property const componentPath = story.kind.split("/"); // usually the last part is the component name const componentName = componentPath[componentPath.length - 1]; componentSet.add(componentName.trim()); } } } // align with v5 return Array.from(componentSet).sort(); };
• src/storybookv5.ts:15-32 (helper)

  Helper function that extracts component names from Storybook V5 data by filtering 'docs' type entries and using their 'title'.
  export const getComponentList = (data: StorybookData) => { if (!data || data.v !== 5 || !data.entries) { return []; } const entries = data.entries; // extract component names, filter only docs type entries const components = Object.values(entries) .filter((entry) => entry.type === "docs") .map((entry) => entry.title) .filter((title: string) => title) .sort(); // remove duplicates const uniqueComponents = [...new Set(components)]; return uniqueComponents; };