Components Build MCP

Instructions

Implementation Reference

• src/tools/index.ts:397-451 (handler)

  The handler function that implements the generate_component tool. It extracts parameters, selects and calls the appropriate generator function based on the template, grades the generated code for compliance, and formats the output with the code and report.

  function handleGenerateComponent(args: Record<string, unknown>): ToolResult {
    const name = args.name as string;
    const template = args.template as string;
    const element = (args.element as string) || 'div';
    const hasVariants = args.hasVariants as boolean;
    const variants = args.variants as string[] | undefined;
    const sizes = args.sizes as string[] | undefined;
  
    let code: string;
  
    switch (template) {
      case 'button':
        code = generateButtonComponent();
        break;
      case 'card':
        code = generateCardComponent();
        break;
      case 'input':
        code = generateInputComponent();
        break;
      case 'composable':
        code = generateComposableComponent({ name });
        break;
      case 'basic':
      default:
        code = generateBasicComponent({
          name,
          element,
          hasVariants,
          variants,
          sizes,
        });
        break;
    }
  
    // Grade the generated component to prove it's compliant
    const grade = gradeComponent(code);
  
    const text = `# Generated Component: ${name}
  
  **Template:** ${template}
  **Compliance Score:** ${grade.score}/100 (${grade.grade})
  
  \`\`\`tsx
  ${code}
  \`\`\`
  
  ## Compliance Report
  ${grade.passes.map((p) => `✅ ${p}`).join('\n')}
  `;
  
    return {
      content: [{ type: 'text', text }],
    };
  }

• src/tools/index.ts:111-143 (schema)

  The input schema defining the parameters for the generate_component tool, including required name and template, and optional properties.

  inputSchema: {
    type: 'object',
    properties: {
      name: {
        type: 'string',
        description: 'Component name (e.g., "Button", "Card", "Dialog")',
      },
      template: {
        type: 'string',
        description: 'Template type to use',
        enum: ['basic', 'composable', 'button', 'card', 'input'],
      },
      element: {
        type: 'string',
        description: 'HTML element to wrap (for basic template)',
      },
      hasVariants: {
        type: 'boolean',
        description: 'Include CVA variants (for basic template)',
      },
      variants: {
        type: 'array',
        items: { type: 'string' },
        description: 'Variant names (e.g., ["default", "secondary", "destructive"])',
      },
      sizes: {
        type: 'array',
        items: { type: 'string' },
        description: 'Size names (e.g., ["sm", "md", "lg"])',
      },
    },
    required: ['name', 'template'],
  },

• src/tools/index.ts:108-144 (registration)

  The tool registration entry in getToolDefinitions(), including name, description, and input schema for generate_component.

  {
    name: 'generate_component',
    description: 'Generate a new component that follows all rules. Choose a template type or customize.',
    inputSchema: {
      type: 'object',
      properties: {
        name: {
          type: 'string',
          description: 'Component name (e.g., "Button", "Card", "Dialog")',
        },
        template: {
          type: 'string',
          description: 'Template type to use',
          enum: ['basic', 'composable', 'button', 'card', 'input'],
        },
        element: {
          type: 'string',
          description: 'HTML element to wrap (for basic template)',
        },
        hasVariants: {
          type: 'boolean',
          description: 'Include CVA variants (for basic template)',
        },
        variants: {
          type: 'array',
          items: { type: 'string' },
          description: 'Variant names (e.g., ["default", "secondary", "destructive"])',
        },
        sizes: {
          type: 'array',
          items: { type: 'string' },
          description: 'Size names (e.g., ["sm", "md", "lg"])',
        },
      },
      required: ['name', 'template'],
    },
  },

• src/tools/index.ts:243-244 (registration)

  The dispatch case in executeTool() that routes calls to the generate_component handler.

  case 'generate_component':
    return handleGenerateComponent(args);