Skip to main content

​
Overview

The AI Chat SDK (@sleek/ai-chat-sdk) enables web applications to integrate intelligent, context-aware AI chat capabilities. The SDK provides a beautiful chat interface featuring AI-powered recommendations and merchant offers, helping users discover products while providing monetization opportunities through offer redirect URLs and cashback integrations.

​
Key capabilities

  • Chat interface: Full-featured 400px sidebar with AI conversation interface
  • Event system: Comprehensive events for all user interactions
  • Data integration: Display offer redirect URLs and cashback offers in conversations
  • Full customization: Brand colors, logos, and UI styling
  • Multiple integration methods: NPM package or IIFE script injection
  • Shadow DOM isolation: Prevents styling conflicts with your application

​
Prerequisites

Before integrating the SDK, ensure your project meets these requirements:
  • Modern browser with ES6+ support (Chrome 100+, Firefox 100+)
  • Node.js 18+ and package manager (pnpm, npm, or yarn) for NPM installation

​
Installation

  • NPM / PNPM
  • IIFE (Script Injection)
1

Configure npm registry

Add the registry to your .npmrc file:
.npmrc
@sleek:registry=https://npm.cloudsmith.io/sleek/sleek/
//npm.cloudsmith.io/sleek/sleek/:_authToken={YOUR_TOKEN_HERE}
Contact [email protected] to receive your authentication token.
2

Install the package

# Using pnpm
pnpm add @sleek/ai-chat-sdk

# Using npm
npm install @sleek/ai-chat-sdk

​
Quick start

Here’s a minimal example to get the SDK running in your application: 
import {
  initializeAiChatSdk,
  getAiChatSdk,
  AiChatSdkEventType,
} from '@sleek/ai-chat-sdk';

// Initialize the SDK
const sdk = initializeAiChatSdk('your-zero-click-api-key', {
  enableDebug: true,
  chatConfig: {
    showLogo: true,
    logoUrl: 'https://your-app.com/logo.png',
    colorsPrimary: ['#059669', '#10b981'],
    colorsSecondary: ['#d1fae5', '#a7f3d0'],
  },
  dataProviders: {
    offerRedirectUrlProvider: async (url) => {
      return `https://offer.example.com?url=${encodeURIComponent(url)}`;
    },
    merchantCashbackProvider: async (urls) => {
      const result = {};
      for (const url of urls) {
        result[url] = { text: '5% cash back' };
      }
      return result;
    },
  },
}, [
  (event) => {
    console.log('SDK Event:', event.type, event.payload);
  }
]);

// Open the chat panel with an optional initial message
sdk.initializeChat('What products are available?');

​
SDK methods

​
initializeAiChatSdk

Initializes the SDK with your API key and configuration options. 
function initializeAiChatSdk(
  apiKey: string,
  options?: Partial<AiChatSdkOptions>,
  listeners?: AiChatSdkEventListener[]
): AiChatSdk
Parameters:
  • apiKey: Your Zero Click AI API key
  • options: Configuration options (optional)
  • listeners: Array of event listener functions (optional)
Returns: SDK instance

​
getAiChatSdk

Retrieves the initialized SDK instance. 
function getAiChatSdk(): AiChatSdk
Returns: SDK instance (throws error if not initialized)

​
initializeChat

Opens the chat panel with an optional initial message. 
sdk.initializeChat(initialMessage?: string): void
Parameters:
  • initialMessage: Optional message to send when opening the chat

​
Build formats

The SDK is distributed in multiple formats for maximum compatibility:
FormatFileUse Case
IIFEai-chat-sdk.iife.jsScript tag or runtime script injection
ESMai-chat-sdk.jsModern bundlers (Vite, Webpack, etc.)
CJSai-chat-sdk.cjsNode or CommonJS environments
All formats include TypeScript definitions (.d.ts) for full IDE support.

​
Next steps

Configuration

Learn about all available configuration options

Events

Understand the event system and available events

Data providers

Integrate offer redirect URLs and cashback data

Customization

Customize branding, colors, and UI styles

​
Getting help

​
API reference

For detailed type definitions and API documentation, refer to the TypeScript definitions included with the SDK package.