generate_component

Instructions

Implementation Reference

• src/index.ts:40-98 (registration)

  Registers the generate_component tool in the TOOLS array, including name, description, and detailed input schema for MCP protocol.

  const TOOLS = [
    {
      name: 'generate_component',
      description: 'Generate Tailwind CSS components with AI assistance using Gemini',
      inputSchema: {
        type: 'object',
        properties: {
          description: {
            type: 'string',
            description: 'Description of the component to generate'
          },
          type: {
            type: 'string',
            enum: ['button', 'card', 'form', 'navigation', 'modal', 'table', 'custom'],
            description: 'Type of component'
          },
          framework: {
            type: 'string',
            enum: ['html', 'react', 'vue', 'svelte', 'angular'],
            default: 'react',
            description: 'Target framework'
          },
          variant: {
            type: 'string',
            enum: ['primary', 'secondary', 'outline', 'ghost', 'link'],
            default: 'primary',
            description: 'Component variant'
          },
          size: {
            type: 'string',
            enum: ['xs', 'sm', 'md', 'lg', 'xl'],
            default: 'md',
            description: 'Component size'
          },
          theme: {
            type: 'string',
            enum: ['light', 'dark', 'auto'],
            default: 'light',
            description: 'Theme preference'
          },
          useShadcn: {
            type: 'boolean',
            default: true,
            description: 'Use shadcn/ui components as base'
          },
          responsive: {
            type: 'boolean',
            default: true,
            description: 'Make component responsive'
          },
          accessibility: {
            type: 'boolean',
            default: true,
            description: 'Include accessibility features'
          }
        },
        required: ['description', 'type']
      }
    },

• src/tools/component-generator.ts:44-106 (handler)

  Core handler function that implements the generate_component tool logic, generating Tailwind CSS components using AI (Gemini) or fallback templates based on provided options.

  export async function generateComponent(args: ComponentGenerationOptions) {
    try {
      const {
        description,
        type,
        framework = 'html',
        variant = 'primary',
        size = 'md',
        theme = 'light',
        responsive = true,
        accessibility = true
      } = args;
  
      let componentCode = '';
  
      if (isGeminiAvailable()) {
        // Use AI to generate more sophisticated components
        const prompt = `Generate a ${type} component using Tailwind CSS with the following specifications:
  
  Description: ${description}
  Framework: ${framework}
  Variant: ${variant}
  Size: ${size}
  Theme: ${theme}
  Responsive: ${responsive}
  Accessibility: ${accessibility}
  
  Requirements:
  1. Use only Tailwind CSS classes
  2. Make it modern and visually appealing
  3. Include proper semantic HTML
  4. ${accessibility ? 'Include ARIA attributes and accessibility features' : ''}
  5. ${responsive ? 'Make it responsive with proper breakpoints' : ''}
  6. ${theme === 'dark' ? 'Include dark mode classes' : theme === 'auto' ? 'Include both light and dark mode support' : ''}
  7. Return only the ${framework} code without explanations
  
  ${framework === 'react' ? 'Return as a React functional component with TypeScript.' : ''}
  ${framework === 'vue' ? 'Return as a Vue 3 single file component.' : ''}
  ${framework === 'svelte' ? 'Return as a Svelte component.' : ''}
  ${framework === 'angular' ? 'Return as an Angular component template.' : ''}`;
  
        componentCode = await callGemini(prompt);
      } else {
        // Fallback to template-based generation
        componentCode = generateFromTemplate(type, variant, size, framework, responsive, accessibility);
      }
  
      // Clean up the generated code
      componentCode = componentCode.replace(/```[\w]*\n?/g, '').trim();
  
      return {
        content: [
          {
            type: 'text',
            text: `# Generated ${type} Component\n\n**Framework:** ${framework}\n**Variant:** ${variant}\n**Size:** ${size}\n\n\`\`\`${framework === 'html' ? 'html' : framework}\n${componentCode}\n\`\`\``
          }
        ]
      };
    } catch (error) {
      console.error('Component generation error:', error);
      throw new Error(`Failed to generate component: ${error instanceof Error ? error.message : 'Unknown error'}`);
    }
  }

• src/types.ts:4-13 (schema)

  TypeScript interface defining the input options for the generate_component tool.

  export interface ComponentGenerationOptions {
    description: string;
    type: 'button' | 'card' | 'form' | 'navigation' | 'modal' | 'table' | 'custom';
    framework?: 'html' | 'react' | 'vue' | 'svelte' | 'angular';
    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link';
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    theme?: 'light' | 'dark' | 'auto';
    responsive?: boolean;
    accessibility?: boolean;
  }

• src/utils/tool-functions.ts:16-25 (handler)

  Placeholder/stub implementation of generateComponent imported and called by src/index.ts.

  export async function generateComponent(args: ComponentGenerationOptions) {
    return {
      content: [
        {
          type: 'text',
          text: `Generated ${args.type} component: ${args.description}\nFramework: ${args.framework || 'react'}\nVariant: ${args.variant || 'primary'}`
        }
      ]
    };
  }

• src/index.ts:431-432 (registration)

  Dispatch handler in switch statement that routes tool calls to the generateComponent function.

  case 'generate_component':
    return await generateComponent(args as unknown as ComponentGenerationOptions);