UI Expert MCP Server

Instructions

Implementation Reference

• src/index.ts:464-489 (handler)

  Core handler function that dispatches to framework-specific component generators based on input parameters.

  function createComponent(params: z.infer<typeof CreateComponentSchema>): string {
    const { componentType, framework, variant = 'primary', responsive = true, props = {} } = params;
    
    // Generate component based on framework
    if (framework.toLowerCase() === 'react') {
      return generateReactComponent(componentType, variant, responsive, props);
    } else if (framework.toLowerCase() === 'vue') {
      return generateVueComponent(componentType, variant, responsive, props);
    } else {
      return `# ${componentType} Component
  
  Framework: ${framework}
  Variant: ${variant}
  Responsive: ${responsive}
  
  ## Implementation Guide:
  
  1. Create component structure
  2. Add styling with design tokens
  3. Implement interactivity
  4. Add accessibility features
  5. Test across devices
  
  Note: Specific implementation depends on ${framework} best practices.`;
    }
  }

• src/index.ts:33-39 (schema)

  Zod schema defining the input parameters for the create_component tool.

  const CreateComponentSchema = z.object({
    componentType: z.string().describe("Type of component (button, card, navbar, etc)"),
    framework: z.string().describe("Frontend framework to use"),
    variant: z.string().optional().describe("Component variant (primary, secondary, etc)"),
    responsive: z.boolean().optional().default(true).describe("Make component responsive"),
    props: z.record(z.any()).optional().describe("Component props/options"),
  });

• src/index.ts:111-125 (registration)

  Tool registration in the ListTools response, specifying name, description, and input schema.

  {
    name: "create_component", 
    description: "Create a new UI component with modern best practices",
    inputSchema: {
      type: "object",
      properties: {
        componentType: { type: "string", description: "Type of component" },
        framework: { type: "string", description: "Frontend framework" },
        variant: { type: "string", description: "Component variant" },
        responsive: { type: "boolean", description: "Make responsive" },
        props: { type: "object", description: "Component props" },
      },
      required: ["componentType", "framework"],
    },
  },

• src/index.ts:171-181 (handler)

  MCP CallToolRequest handler case that parses inputs and calls the createComponent function.

  case "create_component": {
    const parsed = CreateComponentSchema.parse(args);
    return {
      content: [
        {
          type: "text",
          text: createComponent(parsed),
        },
      ],
    };
  }

• src/index.ts:491-551 (helper)

  Helper function that generates React component code, primarily for button-like components.

  function generateReactComponent(type: string, variant: string, responsive: boolean, props: any): string {
    const componentName = type.charAt(0).toUpperCase() + type.slice(1);
    
    return `import React from 'react';
  import { cn } from '@/lib/utils';
  
  interface ${componentName}Props {
    children?: React.ReactNode;
    className?: string;
    variant?: '${variant}' | 'secondary' | 'outline';
    size?: 'sm' | 'md' | 'lg';
    disabled?: boolean;
    onClick?: () => void;
  }
  
  export const ${componentName}: React.FC<${componentName}Props> = ({
    children,
    className,
    variant = '${variant}',
    size = 'md',
    disabled = false,
    onClick,
    ...props
  }) => {
    const baseStyles = 'inline-flex items-center justify-center font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';
    
    const variants = {
      ${variant}: 'bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500',
      secondary: 'bg-neutral-100 text-neutral-900 hover:bg-neutral-200 focus-visible:ring-neutral-500',
      outline: 'border border-neutral-300 bg-transparent hover:bg-neutral-50 focus-visible:ring-neutral-500',
    };
    
    const sizes = {
      sm: 'h-9 px-3 text-sm rounded-md',
      md: 'h-10 px-4 text-base rounded-lg',
      lg: 'h-12 px-6 text-lg rounded-lg',
    };
    
    return (
      <button
        className={cn(
          baseStyles,
          variants[variant],
          sizes[size],
          ${responsive ? "'responsive-padding'" : ''},
          className
        )}
        disabled={disabled}
        onClick={onClick}
        {...props}
      >
        {children}
      </button>
    );
  };
  
  // Usage example:
  // <${componentName} variant="${variant}" size="md" onClick={() => console.log('Clicked!')}>
  //   Click me
  // </${componentName}>`;
  }