getComponentsProps

Instructions

Implementation Reference

• src/server.ts:265-373 (handler)

  The primary handler function that implements the 'getComponentsProps' tool logic. It fetches Storybook data, uses Playwright to navigate to each component's props documentation page, extracts the props table HTML, and formats the results.

  private async getComponentsProps(componentNames: string[]) {
    try {
      // 1. get Storybook data to find component IDs
      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 results: { [componentName: string]: string } = {};
      const errors: { [componentName: string]: string } = {};
  
      // use Playwright to get page content
      const browser = await chromium.launch({ headless: true });
  
      try {
        for (const componentName of componentNames) {
          try {
            const componentUrl =
              data.v === 3
                ? getComponentPropsDocUrlV3(
                    data,
                    componentName,
                    this.storybookUrl
                  )
                : getComponentPropsDocUrlV5(
                    data,
                    componentName,
                    this.storybookUrl
                  );
  
            if (!componentUrl) {
              errors[
                componentName
              ] = `Component "${componentName}" not found in Storybook`;
              continue;
            }
  
            const page = await browser.newPage();
  
            try {
              await page.goto(componentUrl, { waitUntil: "networkidle" });
  
              // wait for table to load
              await page.waitForSelector("table.docblock-argstable", {
                timeout: 10000,
              });
  
              // get props table HTML
              const propsTableHTML = await page.$eval(
                "table.docblock-argstable",
                (element: HTMLElement) => element.outerHTML
              );
  
              results[componentName] = propsTableHTML;
            } catch (pageError) {
              errors[
                componentName
              ] = `Failed to load component page or find props table: ${
                pageError instanceof Error
                  ? pageError.message
                  : String(pageError)
              }`;
            } finally {
              await page.close();
            }
          } catch (componentError) {
            errors[componentName] = `Failed to get component URL: ${
              componentError instanceof Error
                ? componentError.message
                : String(componentError)
            }`;
          }
        }
      } finally {
        await browser.close();
      }
  
      // format results
      let resultText = "Props information for components:\n\n";
  
      for (const componentName of componentNames) {
        resultText += `### ${componentName}\n`;
        if (results[componentName]) {
          resultText += `${results[componentName]}\n\n`;
        } else if (errors[componentName]) {
          resultText += `Error: ${errors[componentName]}\n\n`;
        }
      }
  
      return {
        content: [
          {
            type: "text",
            text: resultText,
          },
        ],
      };
    } catch (error) {
      throw new Error(
        `Failed to get components props: ${
          error instanceof Error ? error.message : String(error)
        }`
      );
    }
  }

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

  Zod schema for validating the input parameters of the 'getComponentsProps' tool, requiring an array of component names.

  const GetComponentsPropsSchema = z.object({
    componentNames: z
      .array(z.string())
      .describe("Array of component names to get props information for"),
  });

• src/server.ts:161-177 (registration)

  Tool registration in the listTools handler, defining the name, description, and input schema for 'getComponentsProps'.

    name: "getComponentsProps",
    description: "Get props information for multiple components",
    inputSchema: {
      type: "object",
      properties: {
        componentNames: {
          type: "array",
          items: {
            type: "string",
          },
          description:
            "Array of component names to get props information for",
        },
      },
      required: ["componentNames"],
    },
  },