UI/UX MCP Server

Instructions

Implementation Reference

• src/tools/storybook.ts:22-90 (handler)

  Main handler function that fetches Storybook stories using axios/cheerio or stories.json endpoint, parses them, and returns formatted results.

  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 schema for input validation of the storybook_get_stories tool (optional Storybook URL).

  const StorybookStoriesSchema = z.object({
    url: z.string().url().optional()
  });

• src/index.ts:64-72 (registration)

  Tool registration including name, description, and input schema in the listTools response.

  {
    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)

  Switch case in CallToolRequest handler dispatching execution to the storybookTools.getStories method.

  case 'storybook_get_stories':
    return await this.storybookTools.getStories(args);

• src/tools/storybook.ts:179-194 (helper)

  Helper method to parse story data from script content using regex.

  private parseStoryData(scriptContent: string): any[] {
    const stories: any[] = [];
    
    // Basic pattern matching to extract story information
    const storyRegex = /story\(['"]([^'"]+)['"]/g;
    let match;
    
    while ((match = storyRegex.exec(scriptContent)) !== null) {
      stories.push({
        name: match[1],
        extracted: true
      });
    }
    
    return stories;
  }