UI/UX MCP Server

Instructions

Implementation Reference

• src/tools/workflows.ts:40-104 (handler)

  The main handler function for the 'workflow_optimize_ux' tool. It validates input using OptimizeUXSchema, orchestrates multiple UX analyses (performance, accessibility, usability, mobile, SEO), calculates an overall score, generates recommendations, and returns structured results.

  async optimizeUX(args: any) {
    const params = OptimizeUXSchema.parse(args);
    const analyses = params.analyses || ['performance', 'accessibility', 'usability'];
    
    try {
      const results: any = {
        url: params.url,
        timestamp: new Date().toISOString(),
        analyses: {},
        recommendations: [],
        overallScore: 0
      };
  
      // Performance Analysis
      if (analyses.includes('performance')) {
        results.analyses.performance = await this.analyzePerformance(params.url);
      }
  
      // Accessibility Analysis
      if (analyses.includes('accessibility')) {
        results.analyses.accessibility = await this.analyzeAccessibility(params.url);
      }
  
      // Usability Analysis
      if (analyses.includes('usability')) {
        results.analyses.usability = await this.analyzeUsability(params.url);
      }
  
      // Mobile Analysis
      if (analyses.includes('mobile')) {
        results.analyses.mobile = await this.analyzeMobile(params.url);
      }
  
      // SEO Analysis
      if (analyses.includes('seo')) {
        results.analyses.seo = await this.analyzeSEO(params.url);
      }
  
      // Calculate overall score
      const scores = Object.values(results.analyses).map((a: any) => a.score || 0);
      results.overallScore = scores.reduce((a, b) => a + b, 0) / scores.length;
  
      // Generate recommendations
      results.recommendations = this.generateUXRecommendations(results.analyses);
  
      return {
        content: [
          {
            type: 'text',
            text: JSON.stringify(results, null, 2)
          }
        ]
      };
    } catch (error: any) {
      return {
        content: [
          {
            type: 'text',
            text: `Error optimizing UX: ${error.message}`
          }
        ],
        isError: true
      };
    }
  }

• src/tools/workflows.ts:10-13 (schema)

  Zod schema used for input validation in the optimizeUX handler.

  const OptimizeUXSchema = z.object({
    url: z.string().url(),
    analyses: z.array(z.enum(['performance', 'accessibility', 'usability', 'mobile', 'seo'])).optional()
  });

• src/index.ts:257-273 (registration)

  Tool registration entry in the ListTools response, defining name, description, and input schema for discovery.

    name: 'workflow_optimize_ux',
    description: 'Run comprehensive UX optimization analysis',
    inputSchema: {
      type: 'object',
      properties: {
        url: { type: 'string' },
        analyses: {
          type: 'array',
          items: {
            type: 'string',
            enum: ['performance', 'accessibility', 'usability', 'mobile', 'seo']
          }
        }
      },
      required: ['url']
    }
  },

• src/index.ts:332-333 (registration)

  Dispatch case in the CallToolRequestHandler switch statement that routes execution to the workflowTools.optimizeUX method.

  case 'workflow_optimize_ux':
    return await this.workflowTools.optimizeUX(args);

• src/tools/workflows.ts:260-277 (helper)

  Helper method that simulates performance analysis, returning metrics, score, and optimization opportunities. Called by the main handler.

  private async analyzePerformance(url: string): Promise<any> {
    // Simulate performance analysis
    return {
      score: 85,
      metrics: {
        firstContentfulPaint: '1.2s',
        largestContentfulPaint: '2.4s',
        totalBlockingTime: '150ms',
        cumulativeLayoutShift: 0.05,
        speedIndex: '3.2s'
      },
      opportunities: [
        'Reduce JavaScript bundle size',
        'Optimize images',
        'Enable text compression'
      ]
    };
  }