UI/UX MCP Server

Instructions

Implementation Reference

• src/tools/storybook.ts:92-177 (handler)

  The `testComponent` method in StorybookTools class implements the core logic for the `storybook_test_component` tool, performing simulated visual, accessibility, and interaction tests on Storybook components.

  async testComponent(args: any) {
    const params = StorybookTestSchema.parse(args);
    const testTypes = params.testTypes || ['visual', 'accessibility'];
    
    const results: any = {
      component: params.componentName,
      story: params.storyName || 'default',
      tests: {}
    };
  
    try {
      // Visual regression test simulation
      if (testTypes.includes('visual')) {
        results.tests.visual = {
          passed: true,
          message: 'Visual regression test passed',
          details: {
            pixelDifference: 0,
            percentageDifference: 0,
            threshold: 0.1
          }
        };
      }
  
      // Accessibility test simulation
      if (testTypes.includes('accessibility')) {
        results.tests.accessibility = {
          passed: true,
          violations: [],
          warnings: [
            {
              id: 'color-contrast',
              impact: 'minor',
              description: 'Ensure sufficient color contrast',
              nodes: 2
            }
          ],
          passes: [
            'aria-roles',
            'button-name',
            'document-title',
            'html-has-lang',
            'image-alt',
            'label',
            'link-name',
            'list',
            'listitem',
            'meta-viewport',
            'region'
          ]
        };
      }
  
      // Interaction test simulation
      if (testTypes.includes('interaction')) {
        results.tests.interaction = {
          passed: true,
          testsRun: [
            { name: 'renders correctly', passed: true },
            { name: 'handles click events', passed: true },
            { name: 'updates state on input', passed: true }
          ],
          duration: '1.2s'
        };
      }
  
      return {
        content: [
          {
            type: 'text',
            text: JSON.stringify(results, null, 2)
          }
        ]
      };
    } catch (error: any) {
      return {
        content: [
          {
            type: 'text',
            text: `Error testing component: ${error.message}`
          }
        ],
        isError: true
      };
    }
  }

• src/tools/storybook.ts:9-13 (schema)

  Zod schema defining the input validation for the `storybook_test_component` tool parameters.

  const StorybookTestSchema = z.object({
    componentName: z.string(),
    storyName: z.string().optional(),
    testTypes: z.array(z.enum(['visual', 'accessibility', 'interaction'])).optional()
  });

• src/index.ts:75-92 (registration)

  Tool registration in the `listTools` response, defining the tool's name, description, and input schema.

    name: 'storybook_test_component',
    description: 'Run visual and accessibility tests on a component',
    inputSchema: {
      type: 'object',
      properties: {
        componentName: { type: 'string' },
        storyName: { type: 'string' },
        testTypes: {
          type: 'array',
          items: { 
            type: 'string',
            enum: ['visual', 'accessibility', 'interaction']
          }
        }
      },
      required: ['componentName']
    }
  },

• src/index.ts:304-305 (registration)

  Dispatch logic in the `callTool` request handler switch statement, routing calls to the `storybookTools.testComponent` method.

  case 'storybook_test_component':
    return await this.storybookTools.testComponent(args);