create_component
Generate a modern UI component adhering to best practices and accessibility standards. Specify component type, framework (React, Vue, Angular), variant, responsiveness, and props for tailored development.
Instructions
Create a new UI component with modern best practices
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| componentType | Yes | Type of component | |
| framework | Yes | Frontend framework | |
| props | No | Component props | |
| responsive | No | Make responsive | |
| variant | No | Component variant |
Implementation Reference
- src/index.ts:464-489 (handler)Core handler function that implements the create_component tool logic, dispatching to framework-specific generators (React/Vue) or providing a general guide.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 input schema for validating parameters to 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)Registration of the create_component tool in the ListTools response, defining its metadata 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 CallTool dispatch case that handles create_component requests by parsing args and invoking the tool handler.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-specific component code, used by createComponent for React framework.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}>`; }