> ## Documentation Index
> Fetch the complete documentation index at: https://docs.onsleek.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Get started with the AI Chat Extension SDK for browser extensions

## 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:

<CodeGroup>
  ```json Manifest v2 theme={null}
  "permissions": [
    ... your other permissions,
    "tabs",
    "scripting",
    "<all_urls>" // In manifest v2, you must add host permissions in the `permissions` array.
  ]
  ```

  ```json Manifest v3 theme={null}
  "permissions": [
    ... your other permissions,
    "tabs",
    "scripting"
  ]
  ```
</CodeGroup>

More information on browser extension permissions can be found
[here](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)
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.

```json theme={null}
"host_permissions": [
  ... other hosts your extension operates on,
  "<all_urls>"
]
```

## Installation

<Steps>
  <Step title="Configure npm registry">
    Add the Sleek registry to your `.npmrc` file:

    ```bash .npmrc theme={null}
    @sleek:registry=https://npm.cloudsmith.io/sleek/sleek/
    //npm.cloudsmith.io/sleek/sleek/:_authToken={YOUR_TOKEN_HERE}
    ```

    <Note>
      Contact [support@onsleek.com](mailto:support@onsleek.com) to receive your authentication token.
    </Note>
  </Step>

  <Step title="Install the package">
    ```bash theme={null}
    pnpm add @sleek/ai-chat-extension-sdk
    ```
  </Step>

  <Step title="Configure manifest permissions">
    Update your `manifest.json` to include required permissions:

    <CodeGroup>
      ```json Manifest v2 theme={null}
      {
        "manifest_version": 2,
        "permissions": ["tabs", "scripting", "<all_urls>"]
      }
      ```

      ```json Manifest v3 theme={null}
      {
       "manifest_version": 3,
       "permissions": ["tabs", "scripting"],
       "host_permissions": ["<all_urls>"]
      }
      ```
    </CodeGroup>

    <Note>
      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.
    </Note>
  </Step>

  <Step title="Copy SDK static files">
    After building your extension, copy the SDK's content script to your output directory:

    ```bash theme={null}
    cp node_modules/@sleek/ai-chat-extension-sdk/dist/chat-controller.js dist/
    ```

    <Tip>
      Add this copy step to your build script to ensure the file is always up to date.
    </Tip>
  </Step>
</Steps>

## Quick start

Here's a minimal example to get the SDK running in your browser extension:

<CodeGroup>
  ```typescript background.ts theme={null}
  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;
    }
  });
  ```

  ```json manifest.json theme={null}
  {
    "manifest_version": 3,
    "name": "My Extension",
    "version": "1.0.0",
    "permissions": ["tabs", "scripting"],
    "host_permissions": ["<all_urls>"],
    "background": {
      "service_worker": "background.js"
    }
  }
  ```
</CodeGroup>

## Advanced usage

### Manually initializing chat on a tab

You can programmatically initialize the chat on a specific tab using the `initializeChatOnTab` method:

```typescript theme={null}
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

* **Email support**: [support@onsleek.com](mailto:support@onsleek.com)
* **Sales inquiries**: [sales@onsleek.com](mailto:sales@onsleek.com)

## API reference

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