MCP Color Server

Instructions

Implementation Reference

• src/tools/export-tailwind.ts:65-186 (handler)

  Core handler function that executes the tool logic: validates input parameters, processes color inputs, generates Tailwind CSS configurations, plugins, and utility classes in various formats.
  async function exportTailwind( params: ExportTailwindParams ): Promise<ToolResponse | ErrorResponse> { const startTime = Date.now(); try { // Validate parameters const { error, value: validatedParams } = exportTailwindSchema.validate(params); if (error) { return createErrorResponse( 'export_tailwind', 'INVALID_PARAMETERS', `Invalid parameters: ${error.details.map(d => d.message).join(', ')}`, Date.now() - startTime ); } // Parse colors const colors: UnifiedColor[] = []; for (const colorStr of validatedParams.colors) { try { const color = new UnifiedColor(colorStr); colors.push(color); } catch { return createErrorResponse( 'export_tailwind', 'INVALID_COLOR', `Invalid color format: ${colorStr}`, Date.now() - startTime, { details: { provided: colorStr }, suggestions: [ 'Use hex format like #FF0000', 'Use RGB format like rgb(255, 0, 0)', 'Use HSL format like hsl(0, 100%, 50%)', ], } ); } } // Generate Tailwind configuration const tailwindConfig = generateTailwindConfig(colors, validatedParams); const tailwindPlugin = generateTailwindPlugin(colors, validatedParams); const tailwindCSS = generateTailwindCSS(colors, validatedParams); // Determine output based on format let output = ''; switch (validatedParams.format) { case 'config': output = tailwindConfig; break; case 'plugin': output = tailwindPlugin; break; case 'css': output = tailwindCSS; break; case 'all': output = `// Tailwind Config\n${tailwindConfig}\n\n// Tailwind Plugin\n${tailwindPlugin}\n\n// Generated CSS\n${tailwindCSS}`; break; } // Generate additional export formats const exportFormats = { tailwind: output, config: tailwindConfig, plugin: tailwindPlugin, css: tailwindCSS, json: { colors: colors.map((color, index) => ({ index: index + 1, hex: color.hex, rgb: color.rgb, hsl: color.hsl, semantic_name: validatedParams.semantic_names?.[index], tailwind_name: getTailwindColorName(index, validatedParams), })), format: validatedParams.format, prefix: validatedParams.prefix, metadata: { total_colors: colors.length, includes_shades: validatedParams.include_shades, extends_default: validatedParams.extend_default, utilities: validatedParams.generate_utilities, }, }, }; const executionTime = Date.now() - startTime; return createSuccessResponse( 'export_tailwind', { tailwind_output: output, format: validatedParams.format, color_count: colors.length, prefix: validatedParams.prefix, includes_shades: validatedParams.include_shades, extends_default: validatedParams.extend_default, utilities: validatedParams.generate_utilities, }, executionTime, { recommendations: [ 'Use semantic color names for better maintainability', 'Consider including shade variations for more design flexibility', 'Test the configuration in your Tailwind CSS setup', ], exportFormats, } ); } catch (error) { return createErrorResponse( 'export_tailwind', 'PROCESSING_ERROR', error instanceof Error ? error.message : 'Unknown error occurred', Date.now() - startTime ); } }
• src/tools/export-tailwind.ts:10-53 (schema)

  Joi schema defining the input parameters for the export_tailwind tool, including colors array, format, prefix, shades, etc.
  const exportTailwindSchema = Joi.object({ colors: Joi.array() .items(Joi.string()) .min(1) .max(100) .required() .description('Array of colors to export'), format: Joi.string() .valid('config', 'plugin', 'css', 'all') .default('config') .description('Tailwind export format'), prefix: Joi.string() .pattern(/^[a-zA-Z][a-zA-Z0-9-]*$/) .default('custom') .description('Prefix for color names'), include_shades: Joi.boolean() .default(true) .description('Include shade variations (50, 100, 200, etc.)'), semantic_names: Joi.array() .items(Joi.string()) .description('Optional semantic names for colors'), extend_default: Joi.boolean() .default(true) .description('Extend default Tailwind colors instead of replacing'), generate_utilities: Joi.array() .items( Joi.string().valid( 'background', 'text', 'border', 'ring', 'shadow', 'all' ) ) .default(['all']) .description('Which utility classes to generate'), });
• src/tools/export-tailwind.ts:401-408 (registration)

  ToolHandler object definition and export, which wraps the handler function and schema for registration.
  export const exportTailwindTool: ToolHandler = { name: 'export_tailwind', description: 'Generate Tailwind CSS configuration, plugins, and utility classes for color palettes', parameters: exportTailwindSchema.describe(), handler: async (params: unknown) => exportTailwind(params as ExportTailwindParams), };
• src/tools/index.ts:142-142 (registration)

  Global registration of the exportTailwindTool in the central ToolRegistry singleton.
  toolRegistry.registerTool(exportTailwindTool);
• src/tools/export-tailwind.ts:191-229 (helper)

  Helper function to generate the Tailwind CSS configuration file content.
  function generateTailwindConfig( colors: UnifiedColor[], params: ExportTailwindParams ): string { const { prefix, include_shades, semantic_names, extend_default } = params; let config = `/** @type {import('tailwindcss').Config} */\n`; config += `module.exports = {\n`; config += ` theme: {\n`; config += ` ${extend_default ? 'extend: {' : ''}\n`; config += ` colors: {\n`; colors.forEach((color, index) => { const name = semantic_names?.[index] || `${prefix}-${index + 1}`; const safeName = name.toLowerCase().replace(/[^a-z0-9-]/g, '-'); if (include_shades) { config += ` '${safeName}': {\n`; // Generate shade variations const shades = generateColorShades(color); Object.entries(shades).forEach(([shade, shadeColor]) => { config += ` '${shade}': '${shadeColor}',\n`; }); config += ` },\n`; } else { config += ` '${safeName}': '${color.hex}',\n`; } }); config += ` },\n`; config += ` ${extend_default ? '},' : ''}\n`; config += ` },\n`; config += ` plugins: [],\n`; config += `}`; return config; }