MCP Tailwind Gemini Server

Instructions

Implementation Reference

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

  Primary handler function that implements the generate_component tool logic, using AI (Gemini) for sophisticated component generation or fallback templates.
  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/index.ts:42-97 (schema)

  Input schema definition for the generate_component tool, used in listTools response.
  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/index.ts:431-432 (registration)

  Tool call dispatch/registration in the switch statement handling CallToolRequest.
  case 'generate_component': return await generateComponent(args as unknown as ComponentGenerationOptions);
• src/utils/tool-functions.ts:16-24 (handler)

  Placeholder stub handler currently 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/tools/component-generator.ts:108-161 (helper)

  Helper function for template-based component generation when AI is unavailable.
  function generateFromTemplate( type: string, variant: string, size: string, framework: string, responsive: boolean, accessibility: boolean ): string { if (type === 'button') { const buttonTemplate = COMPONENT_TEMPLATES.button; const baseClasses = buttonTemplate.base; const variantClasses = buttonTemplate.variants[variant as keyof typeof buttonTemplate.variants] || buttonTemplate.variants.primary; const sizeClasses = buttonTemplate.sizes[size as keyof typeof buttonTemplate.sizes] || buttonTemplate.sizes.md; const classes = `${baseClasses} ${variantClasses} ${sizeClasses}`; if (framework === 'react') { return `interface ButtonProps { children: React.ReactNode; onClick?: () => void; disabled?: boolean; className?: string; } export function Button({ children, onClick, disabled = false, className = '' }: ButtonProps) { return ( <button onClick={onClick} disabled={disabled} className={\`${classes} \${className}\`} ${accessibility ? 'aria-label="Button"' : ''} > {children} </button> ); }`; } else { return `<button class="${classes}" ${accessibility ? 'aria-label="Button"' : ''} > Button Text </button>`; } } // For other component types const template = COMPONENT_TEMPLATES[type as keyof typeof COMPONENT_TEMPLATES]; if (!template) { throw new Error(`Template not found for component type: ${type}`); } return `<div class="${template.base} ${template.variants[variant as keyof typeof template.variants] || ''}">\n <!-- ${type} content -->\n</div>`; }