UI Expert MCP Server

Instructions

Implementation Reference

• src/index.ts:418-462 (handler)

  The core handler function for the 'improve_component' tool. It takes parsed input parameters including component code, framework, optional improvements, and accessibility focus, then returns a markdown-formatted string with detailed improvement suggestions across performance, accessibility, code quality, styling, and best practices.

  function improveComponent(params: z.infer<typeof ImproveComponentSchema>): string {
    const { componentCode, framework, improvements = [], accessibility } = params;
    
    // This is a simplified example - in a real implementation, 
    // you'd parse and analyze the component code
    return `# Component Improvement Suggestions
  
  ## Original Component:
  \`\`\`${framework}
  ${componentCode}
  \`\`\`
  
  ## Improvements:
  
  ### 1. Performance Optimizations
  - Add React.memo() wrapper to prevent unnecessary re-renders
  - Use useCallback for event handlers
  - Implement lazy loading for heavy dependencies
  
  ### 2. Accessibility Enhancements
  ${accessibility ? `- Add proper ARIA labels and roles
  - Ensure keyboard navigation support
  - Implement focus management
  - Add screen reader announcements` : '- Consider adding ARIA labels for better accessibility'}
  
  ### 3. Code Quality
  - Extract magic numbers into constants
  - Add proper TypeScript types
  - Implement error boundaries
  - Add loading and error states
  
  ### 4. Styling Improvements
  - Use CSS modules or styled-components for scoped styles
  - Implement responsive design with mobile-first approach
  - Add hover and focus states
  - Use CSS custom properties for theming
  
  ### 5. Best Practices
  - Add prop validation
  - Implement proper component composition
  - Use semantic HTML elements
  - Add unit tests
  
  ${improvements.length > 0 ? `\n### Requested Improvements:\n${improvements.map(imp => `- ${imp}`).join('\n')}` : ''}`;
  }

• src/index.ts:26-31 (schema)

  Zod schema defining the input parameters for the 'improve_component' tool: required componentCode and framework, optional improvements array and accessibility boolean.

  const ImproveComponentSchema = z.object({
    componentCode: z.string().describe("Current component code"),
    framework: z.string().describe("Frontend framework being used"),
    improvements: z.array(z.string()).optional().describe("Specific improvements requested"),
    accessibility: z.boolean().optional().describe("Focus on accessibility improvements"),
  });

• src/index.ts:93-110 (registration)

  Tool registration in the ListTools response, defining name, description, and inputSchema matching the Zod schema.

  {
    name: "improve_component",
    description: "Improve existing UI component with best practices",
    inputSchema: {
      type: "object",
      properties: {
        componentCode: { type: "string", description: "Current component code" },
        framework: { type: "string", description: "Frontend framework" },
        improvements: { 
          type: "array", 
          items: { type: "string" },
          description: "Specific improvements requested" 
        },
        accessibility: { type: "boolean", description: "Focus on accessibility" },
      },
      required: ["componentCode", "framework"],
    },
  },

• src/index.ts:159-169 (registration)

  Handler case in the CallToolRequest switch statement that parses input with ImproveComponentSchema and calls the improveComponent function.

  case "improve_component": {
    const parsed = ImproveComponentSchema.parse(args);
    return {
      content: [
        {
          type: "text",
          text: improveComponent(parsed),
        },
      ],
    };
  }