UI/UX MCP Server

Instructions

Implementation Reference

• src/tools/components.ts:92-151 (handler)

  Core execution logic for the 'component_analyze' tool. Parses input arguments using Zod schema, runs specified checks (performance, accessibility, best-practices, SEO), computes overall score, and returns structured results.

  async analyze(args: any) {
    const params = ComponentAnalyzeSchema.parse(args);
    const checks = params.checks || ['performance', 'accessibility', 'best-practices'];
    
    try {
      const results: any = {
        summary: {
          score: 0,
          issues: [],
          suggestions: []
        },
        checks: {}
      };
  
      if (checks.includes('performance')) {
        results.checks.performance = this.analyzePerformance(params.code);
      }
  
      if (checks.includes('accessibility')) {
        results.checks.accessibility = this.analyzeAccessibility(params.code);
      }
  
      if (checks.includes('best-practices')) {
        results.checks.bestPractices = this.analyzeBestPractices(params.code);
      }
  
      if (checks.includes('seo')) {
        results.checks.seo = this.analyzeSEO(params.code);
      }
  
      // Calculate overall score
      const scores = Object.values(results.checks).map((check: any) => check.score);
      results.summary.score = scores.reduce((a, b) => a + b, 0) / scores.length;
      
      // Collect all issues and suggestions
      Object.values(results.checks).forEach((check: any) => {
        results.summary.issues.push(...(check.issues || []));
        results.summary.suggestions.push(...(check.suggestions || []));
      });
  
      return {
        content: [
          {
            type: 'text',
            text: JSON.stringify(results, null, 2)
          }
        ]
      };
    } catch (error: any) {
      return {
        content: [
          {
            type: 'text',
            text: `Error analyzing component: ${error.message}`
          }
        ],
        isError: true
      };
    }
  }

• src/tools/components.ts:21-24 (schema)

  Zod schema defining the input structure for the component_analyze tool: required 'code' string and optional array of checks.

  const ComponentAnalyzeSchema = z.object({
    code: z.string(),
    checks: z.array(z.enum(['performance', 'accessibility', 'best-practices', 'seo'])).optional()
  });

• src/index.ts:237-254 (registration)

  Tool registration in the listTools handler, defining name, description, and inputSchema matching the Zod schema.

  {
    name: 'component_analyze',
    description: 'Analyze component for performance and accessibility',
    inputSchema: {
      type: 'object',
      properties: {
        code: { type: 'string' },
        checks: {
          type: 'array',
          items: {
            type: 'string',
            enum: ['performance', 'accessibility', 'best-practices', 'seo']
          }
        }
      },
      required: ['code']
    }
  },

• src/index.ts:328-329 (registration)

  Dispatch case in the callToolRequest handler that routes execution to ComponentTools.analyze method.

  case 'component_analyze':
    return await this.componentTools.analyze(args);

• src/tools/components.ts:347-374 (helper)

  Helper method for performance analysis used by the handler, detecting common issues like missing optimizations and event listener leaks.

  private analyzePerformance(code: string): any {
    const issues = [];
    const suggestions = [];
    
    // Check for common performance issues
    if (code.includes('componentDidUpdate') && !code.includes('shouldComponentUpdate')) {
      issues.push('Missing shouldComponentUpdate optimization');
    }
    
    if (code.match(/useState.*map/)) {
      suggestions.push('Consider using useMemo for expensive computations');
    }
    
    if (code.includes('addEventListener') && !code.includes('removeEventListener')) {
      issues.push('Event listener not cleaned up');
    }
  
    return {
      score: Math.max(100 - issues.length * 20, 0),
      issues,
      suggestions,
      metrics: {
        renderComplexity: 'Low',
        reRenderRisk: issues.length > 0 ? 'High' : 'Low',
        memoryLeakRisk: code.includes('addEventListener') ? 'Medium' : 'Low'
      }
    };
  }