storybook-mcp

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"], }, },