getComponentList

Instructions

Implementation Reference

• src/server.ts:235-259 (handler)

  Private method on StorybookMCPServer that orchestrates getComponentList: fetches Storybook data from configured URL, then delegates to version-specific implementations (V3 or V5). Returns formatted list of component names.

  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-32 (handler)

  V3-specific implementation: extracts component names from storybook data using the 'kind' property, filters out docs-only pages, deduplicates, and returns sorted list.

  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) {

• src/storybookv5.ts:15-32 (handler)

  V5-specific implementation: extracts component titles from storybook entries filtered by 'docs' type, deduplicates, and returns sorted list.

  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:145-151 (registration)

  Tool registration within ListToolsRequestSchema handler - defines name 'getComponentList', description, and input schema (empty object, no parameters).

    name: 'getComponentList',
    description: 'Get a list of all components from the configured Storybook',
    inputSchema: {
      type: 'object',
      properties: {},
    },
  },

• src/server.ts:32-32 (schema)

  Zod schema definition for getComponentList input validation - an empty object schema since no parameters are required.

  const GetComponentListSchema = z.object({});