storybook_get_stories
Retrieve all Storybook stories from a specified URL to streamline UI/UX component development and testing workflows within the UI/UX MCP Server environment.
Instructions
Get list of all Storybook stories
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | No | Storybook URL |
Implementation Reference
- src/tools/storybook.ts:22-90 (handler)The primary handler function `getStories` in the `StorybookTools` class. It validates input with Zod schema, fetches Storybook data via axios from iframe.html or stories.json, parses stories using cheerio or JSON, and returns formatted results or error.async getStories(args: any) { const params = StorybookStoriesSchema.parse(args); const url = params.url || this.storybookUrl; try { // Fetch the Storybook iframe.html to get stories data const response = await axios.get(`${url}/iframe.html`); const $ = cheerio.load(response.data); // Extract story data from the Storybook preview const stories: any[] = []; // Look for the stories configuration in the HTML $('script').each((_, element) => { const scriptContent = $(element).html(); if (scriptContent && scriptContent.includes('__STORYBOOK_STORY_STORE__')) { // Parse the story store data const storyData = this.parseStoryData(scriptContent); stories.push(...storyData); } }); // If no stories found in the HTML, try the stories.json endpoint if (stories.length === 0) { try { const storiesResponse = await axios.get(`${url}/stories.json`); const storiesData = storiesResponse.data; Object.entries(storiesData.stories || {}).forEach(([id, story]: [string, any]) => { stories.push({ id, title: story.title, name: story.name, kind: story.kind, parameters: story.parameters }); }); } catch { // stories.json might not be available } } return { content: [ { type: 'text', text: JSON.stringify({ url, storiesCount: stories.length, stories: stories.slice(0, 20), // Return first 20 stories message: stories.length > 0 ? `Found ${stories.length} stories in Storybook` : 'No stories found. Make sure Storybook is running and accessible.' }, null, 2) } ] }; } catch (error: any) { return { content: [ { type: 'text', text: `Error fetching Storybook stories: ${error.message}\nMake sure Storybook is running at ${url}` } ], isError: true }; } }
- src/tools/storybook.ts:5-7 (schema)Zod input validation schema for the storybook_get_stories tool, defining optional URL parameter with URL validation.const StorybookStoriesSchema = z.object({ url: z.string().url().optional() });
- src/index.ts:64-73 (registration)Tool registration in the ListTools response, including name, description, and input schema definition.{ name: 'storybook_get_stories', description: 'Get list of all Storybook stories', inputSchema: { type: 'object', properties: { url: { type: 'string', description: 'Storybook URL' } } } },
- src/index.ts:302-303 (registration)Dispatch case in the CallToolRequest handler switch statement that routes execution to the storybookTools.getStories method.case 'storybook_get_stories': return await this.storybookTools.getStories(args);