Color Palette API Integration: Developer Guide 2024

// 🚀 Generate a complete design system in one API call
const response = await fetch('https://api.colorgenius.dev/v1/palettes', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    type: 'complementary',
    count: 5,
    baseColor: '#3B82F6',
    includeEverything: true,
    name: 'My Awesome Project',
    save: true
  })
});

const data = await response.json();

// What you get back:
console.log(data.data.colors);              // Perfect color palette
console.log(data.data.designSystem);        // Complete design system
console.log(data.data.accessibility);       // WCAG compliance report
console.log(data.data.gradients);           // Beautiful gradients
console.log(data.data.themeVariations);     // Light/dark/vibrant themes
console.log(data.data.visualization3D);     // 3D visualizations
console.log(data.data.noCodeIntegrations);  // WordPress/Webflow code
console.log(data.data.aiIntelligence);      // Brand personality analysis

import { useState, useEffect } from 'react';

export function useColorPalette(baseColor, type = 'complementary') {
  const [palette, setPalette] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const generatePalette = async (customBase, customType) => {
    setLoading(true);
    setError(null);
    
    try {
      const response = await fetch('/api/v1/palettes', {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${process.env.NEXT_PUBLIC_COLORGENIUS_API_KEY}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          type: customType || type,
          baseColor: customBase || baseColor,
          includeEverything: true
        })
      });

      const data = await response.json();
      setPalette(data.data);
    } catch (err) {
      setError('Failed to generate palette');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (baseColor) {
      generatePalette();
    }
  }, [baseColor, type]);

  return {
    palette,
    loading,
    error,
    regenerate: generatePalette,
    // Easy access to specific parts
    colors: palette?.colors || [],
    cssVariables: palette?.designSystem?.css || '',
    tailwindConfig: palette?.designSystem?.tailwind || {},
    accessibility: palette?.accessibility || []
  };
}

// Usage in your component:
function MyComponent() {
  const { colors, cssVariables, loading } = useColorPalette('#3B82F6');
  
  if (loading) return <div>Generating perfect colors...</div>;
  
  return (
    <div>
      <style>{cssVariables}</style>
      {colors.map((color, index) => (
        <div key={index} style={{ backgroundColor: color }}>
          {color}
        </div>
      ))}
    </div>
  );
}

import { NextRequest, NextResponse } from 'next/server';
import { Redis } from '@upstash/redis';

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL!,
  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
});

export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const { baseColor, type, brand } = body;
    
    // Create cache key
    const cacheKey = `palette:${baseColor}:${type}:${brand}`;
    
    // Check cache first
    const cached = await redis.get(cacheKey);
    if (cached) {
      return NextResponse.json({
        success: true,
        data: cached,
        cached: true
      });
    }
    
    // Generate new palette
    const response = await fetch('https://api.colorgenius.dev/v1/palettes', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.COLORGENIUS_API_KEY}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        type,
        baseColor,
        includeEverything: true,
        name: `${brand} Brand Palette`
      })
    });
    
    const data = await response.json();
    
    // Cache for 24 hours
    await redis.setex(cacheKey, 86400, data.data);
    
    return NextResponse.json({
      success: true,
      data: data.data,
      cached: false
    });
    
  } catch (error) {
    return NextResponse.json({
      success: false,
      error: 'Failed to generate palette'
    }, { status: 500 });
  }
}