storybook-mcp

Instructions

Implementation Reference

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

  Zod schema defining the input parameters for the getComponentsProps tool (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:160-177 (registration)

  Tool definition registered in the listTools handler, including name, description, and input schema.
  { 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"], }, },
• src/server.ts:204-206 (handler)

  Dispatch case in the callTool handler that parses input using the schema and delegates to the main getComponentsProps method.
  case "getComponentsProps": const parsed = GetComponentsPropsSchema.parse(args); return await this.getComponentsProps(parsed.componentNames);
• src/server.ts:265-373 (handler)

  Core handler implementation: Fetches Storybook data, launches Playwright browser, navigates to each component's props doc page, extracts the props table HTML using selectors, and formats results with errors.
  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) }` ); } }