generate_component_template
Create HTML component templates with TailwindCSS classes for buttons, cards, forms, and other UI elements. Choose from minimal, modern, or playful styles with optional dark mode and responsive design support.
Instructions
Generate HTML component templates with TailwindCSS classes
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| componentType | Yes | Type of component to generate (e.g., 'button', 'card', 'form', 'navbar', 'modal', 'alert', 'badge', 'breadcrumb') | |
| style | No | Visual style of the component (default: modern) | |
| darkMode | No | Include dark mode support (default: false) | |
| responsive | No | Include responsive design classes (default: true) |
Implementation Reference
- src/services/template-service.ts:28-41 (handler)The primary implementation of the generateComponentTemplate method that orchestrates the generation process.
async generateComponentTemplate(params: GenerateTemplateParams): Promise<ComponentTemplate> { try { const { componentType, style = 'modern', darkMode = false, responsive = true } = params; const generator = this.componentTemplates.get(componentType.toLowerCase()); if (!generator) { throw new ServiceError( `Unsupported component type: ${componentType}`, 'TemplateService', 'generateComponentTemplate' ); } return generator(style, darkMode, responsive); - src/index.ts:504-512 (handler)The handler function in index.ts that receives the tool request and calls the service.
private async handleGenerateComponentTemplate(args: any): Promise<any> { try { const params = this.validateGenerateTemplateParams(args); const template = await this.templateService.generateComponentTemplate(params); return this.createSuccessResponse(template); } catch (error) { this.handleServiceError(error, "Failed to generate component template"); } } - src/index.ts:241-265 (registration)Registration of the generate_component_template tool within the MCP tool list.
name: "generate_component_template", description: "Generate HTML component templates with TailwindCSS classes", inputSchema: { type: "object", properties: { componentType: { type: "string", description: "Type of component to generate (e.g., 'button', 'card', 'form', 'navbar', 'modal', 'alert', 'badge', 'breadcrumb')", }, style: { type: "string", enum: ["minimal", "modern", "playful"], description: "Visual style of the component (default: modern)", }, darkMode: { type: "boolean", description: "Include dark mode support (default: false)", }, responsive: { type: "boolean", description: "Include responsive design classes (default: true)", }, }, required: ["componentType"], },