storybook-mcp

Instructions

Implementation Reference

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

  Primary handler for the 'getComponentList' MCP tool. Fetches Storybook data from the configured URL and delegates to version-specific helpers (v3 or v5) to extract the component list, then formats and returns the result.
  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/storybookv3.ts:20-44 (helper)

  Helper function that extracts unique, sorted component names from Storybook v3 data by parsing the 'stories' object and filtering non-docs entries.
  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 unique, sorted component names from Storybook v5 data by filtering 'docs' type entries from the 'entries' object.
  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; };
• src/server.ts:152-158 (registration)

  Tool registration in the ListTools handler, defining name, description, and empty input schema (no parameters required).
  name: "getComponentList", description: "Get a list of all components from the configured Storybook", inputSchema: { type: "object", properties: {}, },
• src/server.ts:202-203 (registration)

  Dispatch/registration in the CallTool handler switch statement, routing calls to the getComponentList method.
  case "getComponentList": return await this.getComponentList();