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 (ChatGPT and Google are enabled by default), including any merchant sites you allowlist (e.g. macys.com)
  • Chat badge: Displays suggested prompts when shopping queries are detected
  • Chat panel: 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

​
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>"],
  "web_accessible_resources": [
    "chat-controller.js", "chat-panel.js", "chat-panel.html"
  ]
}
The web_accessible_resources section is only required if you enable the chat badge or chat panel UI features.
4

Copy SDK static files

After building your extension, copy the SDK’s static files to your output directory:
# Always required
cp node_modules/@sleek/ai-chat-extension-sdk/dist/chat-controller.js dist/

# Only if enableChatBadge or enableChatPanel is true
cp node_modules/@sleek/ai-chat-extension-sdk/dist/chat-panel.js dist/
cp node_modules/@sleek/ai-chat-extension-sdk/dist/chat-panel.html dist/
Add this copy step to your build script to ensure files are 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-sleek-api-key', {
  featureControls: {
    enableChatBadge: true,
    enableChatPanel: true,
  },
  platformControls: {
    enableGoogle: true,    // Enabled by default
    enableChatGPT: false,  // Disabled by default
  },
  enableDebug: true,
  chatConfig: {
    apiKey: 'your-zero-click-api-key',
  },
  branding: {
    chatBadge: {
      logoUrl: 'https://your-extension.com/logo.png',
    },
    chatPanel: {
      logoUrl: 'https://your-extension.com/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, context) => {
  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;
  }
});

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