MCP Tailwind Gemini Server

Instructions

Implementation Reference

• src/utils/tool-functions.ts:40-49 (handler)

  Placeholder handler function that executes the logic for the 'create_theme' MCP tool, returning a mock theme creation response.
  export async function createTheme(args: ThemeCreationOptions) { return { content: [ { type: 'text', text: `Created theme: ${args.name}\nStyle: ${args.style}\nPrimary Color: ${args.primaryColor || 'auto'}` } ] }; }
• src/index.ts:189-230 (registration)

  Registration of the 'create_theme' tool in the TOOLS array, including name, description, and detailed input schema for MCP tool listing.
  { name: 'create_theme', description: 'Generate custom Tailwind theme with AI assistance', inputSchema: { type: 'object', properties: { brandColor: { type: 'string', description: 'Primary brand color (hex, rgb, or color name)' }, style: { type: 'string', enum: ['minimal', 'modern', 'classic', 'bold', 'elegant'], default: 'modern', description: 'Design style' }, colorCount: { type: 'number', default: 9, minimum: 5, maximum: 11, description: 'Number of color shades to generate' }, includeConfig: { type: 'boolean', default: true, description: 'Generate tailwind.config.js' }, typography: { type: 'boolean', default: true, description: 'Include typography scale' }, spacing: { type: 'boolean', default: true, description: 'Include custom spacing scale' } }, required: ['brandColor'] } },
• src/types.ts:27-41 (schema)

  TypeScript interface defining the input parameters for the createTheme handler function.
  export interface ThemeCreationOptions { name: string; style: 'modern' | 'classic' | 'minimal' | 'vibrant' | 'dark' | 'corporate' | 'creative' | 'custom'; primaryColor?: string; accentColor?: string; baseColors?: 'neutral' | 'warm' | 'cool' | 'custom'; typography?: 'sans' | 'serif' | 'mono' | 'custom'; borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'; shadows?: 'none' | 'sm' | 'md' | 'lg' | 'xl'; spacing?: 'tight' | 'normal' | 'relaxed' | 'loose'; generateVariants?: boolean; includeDarkMode?: boolean; accessibility?: boolean; framework?: 'tailwind' | 'css-variables' | 'scss' | 'both'; }
• src/index.ts:439-440 (handler)

  Dispatch handler in the main CallToolRequestSchema switch statement that invokes the createTheme function for the 'create_theme' tool.
  case 'create_theme': return await createTheme(args as unknown as ThemeCreationOptions);
• src/tools/theme-creator.ts:32-164 (helper)

  Detailed helper implementation of createTheme using Gemini AI for actual theme generation, not currently used by the main MCP server but matches the tool schema closely.
  export async function createTheme(args: ThemeRequest) { try { const { brandColor, style = 'modern', colorCount = 9, includeConfig = true, typography = true, spacing = true } = args; let themeConfig: ThemeConfig; let designSystemNotes = ''; if (isGeminiAvailable()) { // Use AI to generate sophisticated theme const prompt = `Create a comprehensive Tailwind CSS theme based on the following specifications: Brand Color: ${brandColor} Design Style: ${style} Color Shades: ${colorCount} (50, 100, 200, ..., 900) Include Typography: ${typography} Include Spacing: ${spacing} Requirements: 1. Generate a complete color palette with ${colorCount} shades of the brand color 2. Create complementary secondary and accent colors that work well with the brand color 3. Include neutral colors (grays) that complement the theme 4. ${typography ? 'Design a typography scale with font families, sizes, and line heights' : ''} 5. ${spacing ? 'Create a custom spacing scale that fits the design style' : ''} 6. Include border radius, shadows, and other design tokens for the ${style} style 7. Ensure accessibility with proper contrast ratios 8. Provide design system notes and usage guidelines Return a JSON response with: { "themeConfig": { "colors": { "primary": { "50": "#...", "100": "#...", ... }, "secondary": { "50": "#...", "100": "#...", ... }, "accent": { "50": "#...", "100": "#...", ... }, "neutral": { "50": "#...", "100": "#...", ... } }, ${typography ? '"typography": { "fontFamily": {...}, "fontSize": {...} },' : ''} ${spacing ? '"spacing": {...},' : ''} "borderRadius": {...}, "boxShadow": {...} }, "designSystemNotes": "Comprehensive usage guidelines and design principles" }`; const aiResponse = await callGemini(prompt); try { const jsonMatch = aiResponse.match(/\{[\s\S]*\}/); if (jsonMatch) { const parsedResponse = JSON.parse(jsonMatch[0]); themeConfig = parsedResponse.themeConfig; designSystemNotes = parsedResponse.designSystemNotes || ''; } else { throw new Error('No valid JSON found in AI response'); } } catch (parseError) { // Fallback to manual generation themeConfig = generateManualTheme(brandColor, style, colorCount, typography, spacing); designSystemNotes = `Generated ${style} theme based on ${brandColor}`; } } else { // Manual theme generation themeConfig = generateManualTheme(brandColor, style, colorCount, typography, spacing); designSystemNotes = `Generated ${style} theme based on ${brandColor}`; } // Generate Tailwind config if requested const tailwindConfig = includeConfig ? generateTailwindConfig(themeConfig) : ''; return { content: [ { type: 'text', text: `# Custom Tailwind Theme - ${style.charAt(0).toUpperCase() + style.slice(1)} Style ## Design System Overview ${designSystemNotes} ## Color Palette ### Primary Colors ${formatColorPalette(themeConfig.colors.primary)} ${themeConfig.colors.secondary ? `### Secondary Colors\n${formatColorPalette(themeConfig.colors.secondary)}` : ''} ${themeConfig.colors.accent ? `### Accent Colors\n${formatColorPalette(themeConfig.colors.accent)}` : ''} ${themeConfig.colors.neutral ? `### Neutral Colors\n${formatColorPalette(themeConfig.colors.neutral)}` : ''} ${themeConfig.typography ? `## Typography Scale\n${formatTypography(themeConfig.typography)}` : ''} ${themeConfig.spacing ? `## Spacing Scale\n${formatSpacing(themeConfig.spacing)}` : ''} ${includeConfig ? `## Tailwind Configuration\n\`\`\`javascript\n${tailwindConfig}\n\`\`\`` : ''} ## Usage Examples ### Primary Button \`\`\`html <button class="bg-primary-600 hover:bg-primary-700 text-white px-6 py-3 rounded-md transition-colors"> Primary Action </button> \`\`\` ### Card Component \`\`\`html <div class="bg-white border border-neutral-200 rounded-lg shadow-sm p-6"> <h3 class="text-xl font-semibold text-neutral-900 mb-2">Card Title</h3> <p class="text-neutral-600">Card content goes here...</p> </div> \`\`\` ### Accent Elements \`\`\`html <div class="bg-accent-50 border-l-4 border-accent-400 p-4"> <p class="text-accent-700">Highlighted information</p> </div> \`\`\`` } ] }; } catch (error) { console.error('Theme creation error:', error); throw new Error(`Failed to create theme: ${error instanceof Error ? error.message : 'Unknown error'}`); } }