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;
  };