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
`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"],
},

TailwindCSS MCP Server