flowbite-mcp

Instructions

Input Schema

Input Schema (JSON Schema)

Implementation Reference

• src/index.ts:721 (registration)

  Tool registration with name, description, and parameter schema using Zod validation
  server.tool( 'generate-theme', 'Generates a custom Flowbite theme CSS file based on a brand color (hex format) and user instructions. The AI will intelligently analyze the instructions and customize ALL theme variables (border radius, spacing, colors, typography, etc.) to match the desired aesthetic. This tool creates color shades and variations, adapting the entire theme system to match your brand identity.', { brandColor: z.string().describe('The primary brand color in hex format (e.g., #3B82F6, #FF5733). This will be used as the base for generating all brand color variations.'), instructions: z.string().describe('Natural language instructions describing the desired theme aesthetic and customizations. The AI will interpret these instructions to modify all relevant theme variables. Examples: "Make it modern and minimalist with soft rounded corners", "Create a luxury feel with gold accents and elegant spacing", "Design for a playful children\'s app with bright colors", "Professional corporate style with subtle borders", etc.'), fileName: z.string().optional().describe('Optional filename for the generated theme (e.g., "my-brand-theme.css"). Defaults to "custom-theme.css"'), },
• src/index.ts:729 (handler)

  Main handler function that processes the theme generation request with color conversion utilities
  async ({ brandColor, instructions, fileName }): Promise<CallToolResult> => { try { // Helper function to convert hex to RGB const hexToRgb = (hex: string): { r: number; g: number; b: number } => { const cleanHex = hex.replace('#', ''); const r = parseInt(cleanHex.substring(0, 2), 16); const g = parseInt(cleanHex.substring(2, 4), 16); const b = parseInt(cleanHex.substring(4, 6), 16); return { r, g, b }; };
• src/index.ts:808 (handler)

  Core color generation logic that creates a complete color palette from the base brand color using HSL color space manipulation
  // Generate color shades from base color (50, 100, 200, ..., 900, 950) const generateColorShades = (baseHex: string): Record<number, string> => { const rgb = hexToRgb(baseHex); const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b); const shades: Record<number, string> = {}; // Lightness values for each shade based on Tailwind's color system const lightnessMap: Record<number, number> = { 50: 97, 100: 93, 200: 86, 300: 77, 400: 66, 500: 55, // Base color around here 600: 45, 700: 37, 800: 28, 900: 20, 950: 13 };
• src/index.ts:865 (handler)

  CSS variable replacement logic that substitutes blue color references with generated brand color shades
  // Replace all blue color references with the new brand color shades const blueReplacements: Record<string, string> = { '--color-blue-50': brandShades[50], '--color-blue-100': brandShades[100], '--color-blue-200': brandShades[200], '--color-blue-300': brandShades[300], '--color-blue-400': brandShades[400], '--color-blue-500': brandShades[500], '--color-blue-600': brandShades[600], '--color-blue-700': brandShades[700], '--color-blue-800': brandShades[800], '--color-blue-900': brandShades[900], '--color-blue-950': brandShades[950], }; // Apply brand color replacements Object.entries(blueReplacements).forEach(([cssVar, hexValue]) => { const regex = new RegExp(`var\\(${cssVar}\\)`, 'g'); customTheme = customTheme.replace(regex, hexValue); });
• src/index.ts:889 (handler)

  Comprehensive documentation generation that explains the theme customization process and provides guidance for further modifications
  // Create a detailed explanation with all customizable variables const explanation = ` # Theme Generator - Base Theme with Brand Colors Applied ## Configuration - **File Name**: \`${themeFileName}\` - **Brand Color**: ${brandColor} - **User Instructions**: "${instructions}" ## Generated Brand Color Palette Your brand color has been expanded into a complete color system: - **50** (Lightest): ${brandShades[50]} - **100**: ${brandShades[100]} - **200**: ${brandShades[200]} - **300**: ${brandShades[300]} - **400**: ${brandShades[400]} - **500** (Base): ${brandShades[500]} - **600**: ${brandShades[600]} - **700**: ${brandShades[700]} - **800**: ${brandShades[800]} - **900**: ${brandShades[900]} - **950** (Darkest): ${brandShades[950]}