Skip to main content

​
Overview

The AI Chat Extension 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 initializeAiChatExtensionSdk(
  sleekApiKey: string,
  options?: Partial<AiChatExtensionSdkOptions>,
  listeners?: AiChatExtensionSdkEventListener[]
): Promise<AiChatExtensionSdk>

​
Required parameters

​
sleekApiKey

Type: string Your Sleek API key for authentication with the query classification service. 
await initializeAiChatExtensionSdk('your-sleek-api-key', {
  // ... options
});
Contact [email protected] to receive your API key.

​
Configuration options

​
featureControls

Control which SDK features are enabled. 
featureControls?: {
  enableChatBadge?: boolean;   // Default: false
  enableChatPanel?: boolean;   // Default: false
}
Example: 
featureControls: {
  enableChatBadge: true,  // Show floating badge with suggested prompts
  enableChatPanel: true,  // Allow users to open full chat panel
}
  • Query classification only: Set both to false to only classify queries and emit events
  • Badge only: Enable badge to show prompts without full chat capability
  • Full experience: Enable both for complete AI chat functionality

​
platformControls

Control which platforms the SDK is enabled on. URL match patterns are handled internally based on these settings. 
platformControls?: {
  enableGoogle?: boolean;   // Default: true
  enableChatGPT?: boolean;  // Default: false
}
Example: 
platformControls: {
  enableGoogle: true,   // Enable on Google Search
  enableChatGPT: false, // Disable on ChatGPT
}
Supported platforms:
  • Google Search: google.com, google.ca, google.mx.
  • ChatGPT: chatgpt.com, chat.openai.com
  • When enableGoogle is true, the SDK will run on Google Search pages
  • When enableChatGPT is true, the SDK will run on ChatGPT conversation pages
  • You can enable both platforms simultaneously
  • By default, only Google Search is enabled
Platform controls work independently from feature controls. You can enable platforms without enabling UI features to use query classification only.

​
chatConfig

Configure the chat panel behavior and AI backend. 
chatConfig?: {
  apiKey: string;                    // REQUIRED if chat features are enabled
  colorsPrimary?: string[];          // Primary color palette
  colorsSecondary?: string[];        // Secondary color palette
  disclaimerText?: string;           // Custom disclaimer text
  messageLimitPerThread?: number;    // Max messages per conversation
}
Example: 
chatConfig: {
  apiKey: 'your-zero-click-api-key',
  colorsPrimary: ['#059669', '#10b981'],      // Green shades
  colorsSecondary: ['#d1fae5', '#a7f3d0'],    // Light green shades
  disclaimerText: 'AI responses may not always be accurate',
  messageLimitPerThread: 50,
}
The apiKey is required when enableChatPanel is true. This is your Zero Click AI API key, which is different from your Sleek API key.

​
branding

Customize the visual appearance of the chat badge and panel. 
branding?: {
  chatBadge?: {
    logoUrl: string;  // REQUIRED if enableChatBadge is true
  };
  chatPanel?: {
    logoUrl?: string;           // Panel header logo
    showLogo?: boolean;         // Default: true
    customStyles?: {
      panelContainer?: {
        backgroundColor?: string;
        border?: string;
        borderTop?: string;
        borderRight?: string;
        borderBottom?: string;
        borderLeft?: string;
        padding?: string;
      };
      chatContentCard?: {
        backgroundColor?: string;
        border?: string;
        borderTop?: string;
        borderRight?: string;
        borderBottom?: string;
        borderLeft?: string;
        borderRadius?: string;
        padding?: string;
      };
      closeButton?: {
        backgroundColor?: string;
        border?: string;
        iconColor?: string;
        hoverBackgroundColor?: string;
        hoverIconColor?: string;
        borderRadius?: string;
        padding?: string;
        iconUrl?: string;
      };
    };
  };
}
Example: 
branding: {
  chatBadge: {
    logoUrl: 'https://your-extension.com/badge-logo.png',
  },
  chatPanel: {
    logoUrl: 'https://your-extension.com/panel-logo.png',
    showLogo: true,
    customStyles: {
      panelContainer: {
        backgroundColor: 'rgba(255, 255, 255, 0.98)',
        borderLeft: '3px solid #6366f1',
        padding: '16px',
      },
      chatContentCard: {
        backgroundColor: '#f9fafb',
        borderRadius: '12px',
        padding: '12px',
      },
      closeButton: {
        backgroundColor: '#ef4444',
        iconColor: 'white',
        hoverBackgroundColor: '#dc2626',
        borderRadius: '8px',
        padding: '8px',
      },
    },
  },
}
Logo images should be square (1:1 aspect ratio) and at least 200x200 pixels for best quality.

​
dataProviders

Integrate your offer redirect urls and cashback data into chat conversations. Required when UI controls are enabled. 
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-redirect?url=${encodeURIComponent(url)}`);
      const data = await response.json();
      return data.offerRedirectUrl || null;
    } catch (error) {
      console.error('Failed to fetch offer redirect 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.

​
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.

​
skipManifestValidation

Skip automatic validation of manifest.json configuration. 
skipManifestValidation?: boolean;  // Default: false
Example: 
skipManifestValidation: true,  // Skip validation (not recommended)
Only use this option during development. The SDK validates that your manifest includes required permissions and web-accessible resources to prevent runtime errors.

​
Complete configuration example

Here’s a complete example with all commonly used options: 
import {
  initializeAiChatExtensionSdk,
  type OfferRedirectUrlProvider,
  type MerchantCashbackProvider,
} from '@sleek/ai-chat-extension-sdk';

const offerRedirectUrlProvider: OfferRedirectUrlProvider = async (url) => {
  const response = await fetch(`https://api.example.com/offer-redirect?url=${encodeURIComponent(url)}`);
  const data = await response.json();
  return data.offerRedirectUrl || null;
};

const merchantCashbackProvider: MerchantCashbackProvider = async (urls) => {
  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 || {};
};

await initializeAiChatExtensionSdk('your-sleek-api-key', {
  // Feature controls
  featureControls: {
    enableChatBadge: true,
    enableChatPanel: true,
  },

  // Platform controls
  platformControls: {
    enableGoogle: true,
    enableChatGPT: false,
  },

  // Debugging
  enableDebug: process.env.NODE_ENV === 'development',

  // URL filtering
  denylistMatches: [
    "*://*.internal-site.com/*",
  ],

  // Chat configuration
  chatConfig: {
    apiKey: 'your-zero-click-api-key',
    colorsPrimary: ['#059669', '#10b981'],
    colorsSecondary: ['#d1fae5', '#a7f3d0'],
    disclaimerText: 'AI responses may contain errors',
    messageLimitPerThread: 50,
  },

  // Branding
  branding: {
    chatBadge: {
      logoUrl: 'https://your-extension.com/logo.png',
    },
    chatPanel: {
      logoUrl: 'https://your-extension.com/logo.png',
      showLogo: true,
      customStyles: {
        panelContainer: {
          backgroundColor: 'rgba(255, 255, 255, 0.98)',
          borderLeft: '3px solid #6366f1',
          padding: '16px',
        },
        chatContentCard: {
          backgroundColor: '#f9fafb',
          borderRadius: '12px',
          padding: '12px',
        },
        closeButton: {
          backgroundColor: '#ef4444',
          iconColor: 'white',
          hoverBackgroundColor: '#dc2626',
          borderRadius: '8px',
          padding: '8px',
        },
      },
    },
  },

  // Data providers
  dataProviders: {
    offerRedirectUrlProvider,
    merchantCashbackProvider,
  },
});

​
Environment-specific configuration

For different environments (development, staging, production), use environment variables: 
const config = {
  featureControls: {
    enableChatBadge: true,
    enableChatPanel: true,
  },
  enableDebug: process.env.NODE_ENV === 'development',
  chatConfig: {
    apiKey: process.env.ZERO_CLICK_API_KEY!,
  },
  // ... rest of config
};

await initializeAiChatExtensionSdk(process.env.SLEEK_API_KEY!, config);

​
Next steps

Events

Learn about SDK events and how to listen to them

Data providers

Detailed guide on implementing data providers