MCP Tailwind Gemini Server

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);