getComponentList

Retrieve all components from Storybook to view available UI elements and their documentation.

Instructions

Get a list of all components from the configured Storybook

Input Schema

TableJSON Schema

Name	Required	Description	Default
No arguments

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

storybook-mcp