Skip to main content

​
Overview

The AI Chat Extension SDK (@sleek/ai-chat-extension-sdk) enables browser extensions to integrate intelligent, context-aware AI chat capabilities. The SDK automatically detects shopping-related websites and queries (Google, ChatGPT) and provides users with a beautiful chat interface featuring AI-powered recommendations and your offers.

​
Key capabilities

  • Automatic query classification: Detects shopping intent on supported platforms (Google Search, ChatGPT)
  • Platform controls: Choose which platforms to enable (Google or ChatGPT. Google is enabled by default).
  • Chat badge: Displays suggested prompts when shopping queries are detected
  • Chat panel: Full-featured 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

​
Extension Permissions

The correct extension permissions must be requested for the SDK to function. SDK requires the following permissions be requested by your browser extension:
  • tabs
  • scripting
Add the permissions to your manifest file like the below snippet: 
"permissions": [
  ... your other permissions,
  "tabs",
  "scripting",
  "<all_urls>" // In manifest v2, you must add host permissions in the `permissions` array.
]
More information on browser extension permissions can be found here or on your respective browser extension’s developer portal.

​
Host permissions (manifest v3 only)

In addition to permissions for extensions using manifest v3, SDK requires your extension to operate on the correct URLs in the browser. In manifest v2, you specify host permissions along with other API permissions in the permissions array. 
"host_permissions": [
  ... other hosts your extension operates on,
  "<all_urls>"
]

​
Installation

1

Configure npm registry

Add the Sleek 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

pnpm add @sleek/ai-chat-extension-sdk
3

Configure manifest permissions

Update your manifest.json to include required permissions:
{
  "manifest_version": 2,
  "permissions": ["tabs", "scripting", "<all_urls>"]
}
The SDK automatically registers the required content scripts at runtime using the scripting API. You do not need to manually add content scripts or web-accessible resources to your manifest.
4

Copy SDK static files

After building your extension, copy the SDK’s content script to your output directory:
cp node_modules/@sleek/ai-chat-extension-sdk/dist/chat-controller.js dist/
Add this copy step to your build script to ensure the file is always up to date.

​
Quick start

Here’s a minimal example to get the SDK running in your browser extension: 
import {
  initializeAiChatExtensionSdk,
  getAiChatExtensionSdk,
  AiChatExtensionSdkEventType,
} from '@sleek/ai-chat-extension-sdk';

// Initialize the SDK
await initializeAiChatExtensionSdk('your-api-key', {
  featureControls: {
    enableChatBadge: true,
    enableChatPanel: true,
  },
  platformControls: {
    enableGoogle: true,    // Enabled by default
    enableChatGPT: false,  // Disabled by default
  },
  enableDebug: true,
  chatConfig: {
    brand: {
      logoUrl: 'https://your-extension.com/logo.png',
      name: 'Your Brand',
    },
    styling: {
      primaryColor: '#5C59FE',
    },
  },
  badgeConfig: {
    allowExpand: true,
    autoCollapse: true,
    brand: {
      logoUrl: 'https://your-extension.com/badge-logo.png',
    },
  },
  dataProviders: {
    offerRedirectUrlProvider: async (url) => {
      // Return offer redirect url for the given merchant URL
      return `https://offer-redirect.example.com?url=${encodeURIComponent(url)}`;
    },
    merchantCashbackProvider: async (urls) => {
      // Return cashback info for multiple merchants
      const result: Record<string, { text: string }> = {};
      for (const url of urls) {
        result[url] = { text: '5% cash back' };
      }
      return result;
    },
  },
});

// Listen to SDK events
getAiChatExtensionSdk().registerEventListener((event, tabDetails) => {
  console.log('SDK Event:', event.type, event.data);

  switch (event.type) {
    case AiChatExtensionSdkEventType.QUERY_CLASSIFIED:
      console.log(`Query "${event.data.query}" classified as:`, event.data.classification);
      break;
    case AiChatExtensionSdkEventType.CHAT_PANEL_OPENED:
      console.log('User opened chat panel');
      break;
  }
});

​
Advanced usage

​
Manually initializing chat on a tab

You can programmatically initialize the chat on a specific tab using the initializeChatOnTab method: 
import {
  getAiChatExtensionSdk,
  type ChatInitializationContext,
} from '@sleek/ai-chat-extension-sdk';

const context: ChatInitializationContext = {
  query: 'best wireless headphones',
  initialMessage: 'Help me find the best wireless headphones under $200',
};

// Initialize chat on a specific tab
getAiChatExtensionSdk().initializeChatOnTab(tabId, context);
ChatInitializationContext properties:
  • query (required): The search query context
  • initialMessage (optional): An initial message to send when the chat opens

​
Getting help

​
API reference

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