generate_component
Create UI components following components.build specifications. Select from templates like button, card, or input, then customize with variants, sizes, and HTML elements.
Instructions
Generate a new component that follows all rules. Choose a template type or customize.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Component name (e.g., "Button", "Card", "Dialog") | |
| template | Yes | Template type to use | |
| element | No | HTML element to wrap (for basic template) | |
| hasVariants | No | Include CVA variants (for basic template) | |
| variants | No | Variant names (e.g., ["default", "secondary", "destructive"]) | |
| sizes | No | Size names (e.g., ["sm", "md", "lg"]) |
Implementation Reference
- src/tools/index.ts:397-451 (handler)The handleGenerateComponent function that executes the tool's logic: parses args, generates component code using template-specific functions, grades for compliance, and returns formatted result.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:108-144 (schema)The input schema defining parameters for the generate_component tool, including required name and template, and optional properties.{ 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)Registration in the executeTool function's switch statement, which dispatches calls to the generate_component handler.case 'generate_component': return handleGenerateComponent(args);