Configuration

Overview

The AI Chat SDK provides extensive configuration options to control features, customize appearance, and integrate with your data sources. All configuration is passed during SDK initialization.

Initialization signature

function initializeAiChatSdk(
  apiKey: string,
  options?: Partial<AiChatSdkOptions>,
  listeners?: AiChatSdkEventListener[]
): AiChatSdk

Required parameters

apiKey

Type: string Your Zero Click AI API key for authentication with the chat backend.

import { initializeAiChatSdk } from '@sleek/ai-chat-sdk';

initializeAiChatSdk('your-zero-click-api-key', {
  // ... options
});

Contact [email protected] to receive your API key.

Configuration options

enableDebug

Enable detailed console logging for debugging.

enableDebug?: boolean;  // Default: false

Example:

enableDebug: true,  // Enable console.log statements from SDK

Debug mode should be disabled in production builds to reduce console noise and improve performance.

chatConfig

Configure the chat panel behavior, styling, and AI backend.

chatConfig?: {
  showLogo?: boolean;                // Default: true
  logoUrl?: string;                  // Custom logo URL
  colorsPrimary?: string[];          // Primary color palette
  colorsSecondary?: string[];        // Secondary color palette
  messageLimitPerThread?: number;    // Max messages per conversation
  disclaimerText?: string;           // Custom disclaimer text
  layout?: LayoutConfig;             // Panel position and size
}

Example:

chatConfig: {
  showLogo: true,
  logoUrl: 'https://your-app.com/logo.png',
  colorsPrimary: ['#059669', '#10b981'],      // Green shades
  colorsSecondary: ['#d1fae5', '#a7f3d0'],    // Light green shades
  disclaimerText: 'AI responses may not always be accurate',
  messageLimitPerThread: 50,
  layout: {
    position: {
      right: '0px',
      bottom: '0px',
    },
    size: {
      width: '400px',
      height: '100vh',
    },
  },
}

Layout configuration

Control the chat panel’s position and size on the page.

layout?: {
  position?: {
    top?: string;
    right?: string;
    bottom?: string;
    left?: string;
  };
  size?: {
    width?: string;     // Default: '400px'
    height?: string;    // Default: '100vh'
  };
  borderRadius?: string;
  border?: string;
  backgroundColor?: string;
  boxShadow?: string;
  overflow?: string;
  pointerEvents?: string;
  transform?: string;
}

Example:

layout: {
  position: {
    right: '20px',
    bottom: '20px',
  },
  size: {
    width: '450px',
    height: '80vh',
  },
  borderRadius: '12px',
  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
}

Content customization

Customize text content throughout the chat interface.

content?: {
  prompt?: PromptContent;
  input?: InputContent;
  error?: ErrorContent;
  topMerchants?: TopMerchantsContent;
  closeButton?: {
    iconUrl?: string;
  };
}

Prompt content:

content: {
  prompt: {
    badgeIcon?: string;
    badgeText?: string;
  },
}

Input content:

content: {
  input: {
    placeholder?: string;  // Default: "Type a message..."
  },
}

Error content:

content: {
  error: {
    title?: string;
    message?: string;
    retryButtonText?: string;
  },
}

Styling customization

Customize the appearance of all UI components.

styling?: {
  prompt?: PromptStyling;
  input?: InputStyling;
  userMessage?: MessageBubbleStyling;
  assistantMessage?: MessageBubbleStyling;
  error?: ErrorStyling;
  topMerchants?: TopMerchantsStyling;
  panelContainer?: CSSProperties;
  chatContentCard?: CSSProperties;
  closeButton?: CSSProperties;
}

Example:

styling: {
  panelContainer: {
    backgroundColor: 'rgba(255, 255, 255, 0.98)',
    borderLeft: '3px solid #6366f1',
    padding: '16px',
  },
  chatContentCard: {
    backgroundColor: '#f9fafb',
    borderRadius: '12px',
    padding: '12px',
  },
  input: {
    backgroundColor: '#ffffff',
    borderColor: '#e5e7eb',
    textColor: '#1f2937',
    placeholderColor: '#9ca3af',
  },
  userMessage: {
    backgroundColor: '#3b82f6',
    textColor: '#ffffff',
    borderRadius: '12px',
  },
  assistantMessage: {
    backgroundColor: '#f3f4f6',
    textColor: '#1f2937',
    borderRadius: '12px',
  },
}

See the Customization guide for detailed styling options.

Data providers

Integrate your offer redirect URLs and cashback data into chat conversations. Required for full functionality.

dataProviders?: {
  offerRedirectUrlProvider?: OfferRedirectUrlProvider;
  merchantCashbackProvider?: MerchantCashbackProvider;
}

Type definitions:

type OfferRedirectUrlProvider = (
  url: string
) => Promise<string | null | undefined> | string | null | undefined;

type MerchantCashbackProvider = (
  merchantUrls: string[]
) => Promise<Record<string, MerchantCashback>> | Record<string, MerchantCashback>;

interface MerchantCashback {
  text: string;  // e.g., "5% cash back", "Up to $10 back"
}

Example:

dataProviders: {
  offerRedirectUrlProvider: async (url) => {
    try {
      const response = await fetch(`https://api.example.com/offer?url=${encodeURIComponent(url)}`);
      const data = await response.json();
      return data.offerUrl || null;
    } catch (error) {
      console.error('Failed to fetch offer URL:', error);
      return null;  // Always return null on error
    }
  },
  merchantCashbackProvider: async (urls) => {
    try {
      const response = await fetch('https://api.example.com/cashback', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ urls }),
      });
      const data = await response.json();
      return data.cashback || {};
    } catch (error) {
      console.error('Failed to fetch cashback:', error);
      return {};  // Always return {} on error
    }
  },
}

Data providers must handle errors gracefully and return null (for offer redirect URLs) or {} (for cashback) on failure. Never throw exceptions.

See the Data Providers guide for detailed implementation examples.

Complete configuration example

Here’s a complete example with all commonly used options:

import {
  initializeAiChatSdk,
  type OfferRedirectUrlProvider,
  type MerchantCashbackProvider,
} from '@sleek/ai-chat-sdk';

// Define data providers
const offerRedirectUrlProvider: OfferRedirectUrlProvider = async (url) => {
  try {
    const response = await fetch(`https://api.example.com/offer?url=${encodeURIComponent(url)}`);
    const data = await response.json();
    return data.offerUrl || null;
  } catch (error) {
    return null;
  }
};

const merchantCashbackProvider: MerchantCashbackProvider = async (urls) => {
  try {
    const response = await fetch('https://api.example.com/cashback', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ urls }),
    });
    const data = await response.json();
    return data.cashback || {};
  } catch (error) {
    return {};
  }
};

// Initialize SDK
const sdk = initializeAiChatSdk('your-zero-click-api-key', {
  // Debugging
  enableDebug: process.env.NODE_ENV === 'development',

  // Chat configuration
  chatConfig: {
    showLogo: true,
    logoUrl: 'https://your-app.com/logo.png',
    colorsPrimary: ['#059669', '#10b981'],
    colorsSecondary: ['#d1fae5', '#a7f3d0'],
    disclaimerText: 'AI responses may contain errors',
    messageLimitPerThread: 50,

    // Layout
    layout: {
      position: {
        right: '0px',
        bottom: '0px',
      },
      size: {
        width: '400px',
        height: '100vh',
      },
      borderRadius: '0px',
      boxShadow: '0 0 20px rgba(0, 0, 0, 0.1)',
    },
  },

  // Content customization
  content: {
    input: {
      placeholder: 'Ask about products...',
    },
  },

  // Styling customization
  styling: {
    panelContainer: {
      backgroundColor: 'rgba(255, 255, 255, 0.98)',
      borderLeft: '3px solid #6366f1',
      padding: '16px',
    },
    chatContentCard: {
      backgroundColor: '#f9fafb',
      borderRadius: '12px',
      padding: '12px',
    },
    input: {
      backgroundColor: '#ffffff',
      borderColor: '#e5e7eb',
    },
  },

  // Data providers
  dataProviders: {
    offerRedirectUrlProvider,
    merchantCashbackProvider,
  },
}, [
  // Event listeners
  (event) => {
    console.log('SDK Event:', event.type, event.payload);
  }
]);

Environment-specific configuration

For different environments (development, staging, production), use environment variables:

const config = {
  enableDebug: process.env.NODE_ENV === 'development',
  chatConfig: {
    messageLimitPerThread: process.env.NODE_ENV === 'production' ? 50 : 100,
  },
  // ... rest of config
};

initializeAiChatSdk(process.env.ZERO_CLICK_API_KEY!, config);

Next steps

Events

Learn about SDK events and how to listen to them

Data providers

Detailed guide on implementing data providers

Customization

Customize branding, colors, and UI styles

AI Chat JS SDK Reference

​Overview

​Initialization signature

​Required parameters

​apiKey

​Configuration options

​enableDebug

​chatConfig

​Layout configuration

​Content customization

​Styling customization

​Data providers

​Complete configuration example

​Environment-specific configuration

​Next steps

Events

Data providers

Customization

Overview

Initialization signature

Required parameters

apiKey

Configuration options

enableDebug

chatConfig

Layout configuration

Content customization

Styling customization

Data providers

Complete configuration example

Environment-specific configuration

Next steps