Skip to main content

​
Overview

This guide covers common issues you may encounter when integrating the AI Chat Extension SDK and how to resolve them.

​
Installation issues

​
Package not found

Symptom: npm install or pnpm add fails with “package not found” Cause: npm registry not configured or authentication token missing Solution:
1

Add registry to .npmrc

.npmrc
@sleek:registry=https://npm.cloudsmith.io/sleek/sleek/
//npm.cloudsmith.io/sleek/sleek/:_authToken={YOUR_TOKEN_HERE}
2

Replace token placeholder

Replace {YOUR_TOKEN_HERE} with your actual authentication token
3

Retry installation

pnpm add @sleek/ai-chat-extension-sdk
Contact [email protected] if you need an authentication token.

​
Build errors after installation

Symptom: TypeScript or build errors after installing the SDK Cause: Missing dependencies or TypeScript version mismatch Solution: 
# Ensure peer dependencies are installed
pnpm install

# Check TypeScript version (should be 5.0+)
pnpm list typescript

# Update TypeScript if needed
pnpm add -D typescript@latest

​
Manifest configuration issues

​
SDK not initializing

Symptom: SDK initialization fails with manifest validation error Cause: Missing required manifest permissions or web-accessible resources Solution: Verify your manifest.json includes:
manifest.json
{
  "manifest_version": 3,
  "permissions": ["tabs", "scripting"],
  "host_permissions": ["<all_urls>"],
  "web_accessible_resources": [
    {
      "resources": [
        "chat-controller.js",
        "chat-panel.js",
        "chat-panel.html"
      ],
      "matches": ["<all_urls>"]
    }
  ]
}
Use skipManifestValidation: true during development to bypass validation, but fix manifest issues before production.

​
Content script not injecting

Symptom: Chat controller doesn’t load, no badge or panel appears Cause: Content script files not copied to extension directory Solution:
1

Verify files are copied

# Check that files exist in your dist directory
ls -la dist/chat-controller.js
ls -la dist/chat-panel.js
ls -la dist/chat-panel.html
2

Add copy step to build script

package.json
{
  "scripts": {
    "build": "your-build-command && pnpm copy-sdk-files",
    "copy-sdk-files": "cp node_modules/@sleek/ai-chat-extension-sdk/dist/chat-controller.js dist/ && cp node_modules/@sleek/ai-chat-extension-sdk/dist/chat-panel.* dist/"
  }
}
3

Rebuild extension

pnpm build

​
UI issues

​
Chat badge not appearing

Symptom: No chat badge shows up after searching Causes:
  1. Query not classified as “shopping”
  2. Badge feature not enabled
  3. Branding configuration missing
  4. Page is in denylist
Solutions:
Try clear shopping queries:
  • “best headphones”
  • “Nike running shoes”
  • “iPhone 15 deals”
Enable debug mode to see classification results:
enableDebug: true,

featureControls: {
  enableChatBadge: true,  // Must be true
}

branding: {
  chatBadge: {
    logoUrl: 'https://your-extension.com/logo.png',  // Required
  },
}
Verify the current page isn’t excluded:
// Check console for denylist matches
console.log('Current URL:', window.location.href);

​
Chat panel not opening

Symptom: Clicking badge doesn’t open chat panel Causes:
  1. Panel feature not enabled
  2. Chat panel files missing
  3. Chat config missing or invalid
  4. RPC communication failure
Solutions: 
featureControls: {
  enableChatPanel: true,  // Must be true
}

ls -la dist/chat-panel.js
ls -la dist/chat-panel.html
Verify web-accessible resources in manifest:
"web_accessible_resources": [
  {
    "resources": ["chat-panel.js", "chat-panel.html"],
    "matches": ["<all_urls>"]
  }
]

chatConfig: {
  apiKey: 'your-zero-click-api-key',  // Required
}
Open DevTools Console and look for:
  • RPC timeout errors
  • Failed to load chat panel
  • CORS errors

​
Panel appears blank

Symptom: Chat panel opens but shows blank white screen Causes:
  1. Chat panel JavaScript not loading
  2. API key invalid
  3. RPC initialization failure
Solutions:
1

Check browser console

Look for JavaScript errors in DevTools Console
2

Verify API key

chatConfig: {
  apiKey: 'your-zero-click-api-key',  // Verify this is correct
}
3

Test API endpoint

curl -H "Authorization: Bearer your-zero-click-api-key" \
     https://ai.pie.org/api/v1/health
4

Enable debug mode

enableDebug: true,

​
Data provider issues

​
Providers not being called

Symptom: Data providers never execute, no logs Causes:
  1. UI features disabled
  2. No shopping queries detected
  3. Panel not opened
Solutions:
Data providers only execute when UI features are active:
featureControls: {
  enableChatBadge: true,
  enableChatPanel: true,
}
Search for “best laptops” on Google and open the chat panel
dataProviders: {
  offerRedirectUrlProvider: async (url) => {
    console.log('Offer redirect url requested for:', url);
    const result = await fetchOfferRedirectUrl(url);
    console.log('Returning:', result);
    return result;
  },
}

​
Provider errors breaking SDK

Symptom: SDK stops working after provider throws error Cause: Exceptions thrown from data providers Solution: Always wrap providers in try-catch and return null/: 
const offerRedirectUrlProvider = async (url) => {
  try {
    const response = await fetch(/* ... */);
    return response.offerRedirectUrl || null;
  } catch (error) {
    console.error('Offer redirect url error:', error);
    return null;  // Critical: return null, never throw
  }
};

const merchantCashbackProvider = async (urls) => {
  try {
    const response = await fetch(/* ... */);
    return response.cashback || {};
  } catch (error) {
    console.error('Cashback error:', error);
    return {};  // Critical: return {}, never throw
  }
};

​
Slow performance

Symptom: Chat feels sluggish, UI freezes Cause: Data providers taking too long to respond Solutions: 
const offerRedirectUrlProvider = async (url) => {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 500);

  try {
    const response = await fetch(url, { signal: controller.signal });
    clearTimeout(timeoutId);
    return response.offerRedirectUrl || null;
  } catch (error) {
    clearTimeout(timeoutId);
    if (error.name === 'AbortError') {
      console.warn('Offer redirect url timeout');
    }
    return null;
  }
};

const cache = new Map<string, string>();

const offerRedirectUrlProvider = async (url) => {
  if (cache.has(url)) {
    return cache.get(url)!;
  }

  const result = await fetchOfferRedirectUrl(url);
  if (result) {
    cache.set(url, result);
  }
  return result;
};

const offerRedirectUrlProvider = async (url) => {
  const start = performance.now();
  try {
    const result = await fetchOfferRedirectUrl(url);
    const duration = performance.now() - start;
    console.log(`Offer redirect url took ${duration.toFixed(0)}ms`);
    return result;
  } catch (error) {
    return null;
  }
};
Target <500ms response times.

​
Event issues

​
Events not firing

Symptom: Event listeners never called Cause: Listener registered after events occurred Solution: Register listeners immediately after SDK initialization: 
// Initialize SDK
await initializeAiChatExtensionSdk('your-api-key', {
  // ... config
});

// Register listener immediately
getAiChatExtensionSdk().registerEventListener((event, context) => {
  console.log('Event:', event.type);
});
You can also pass listeners during initialization as the third parameter.

​
Missing event data

Symptom: Event fires but event.data is undefined Cause: Some events have no data payload (e.g., CHAT_PANEL_CLOSED) Solution: Check event type before accessing data: 
getAiChatExtensionSdk().registerEventListener((event, context) => {
  switch (event.type) {
    case AiChatExtensionSdkEventType.QUERY_CLASSIFIED:
      console.log(event.data.query);  // Has data
      break;
    case AiChatExtensionSdkEventType.CHAT_PANEL_CLOSED:
      // No data payload for this event
      console.log('Panel closed (no data)');
      break;
  }
});

​
Query classification issues

​
All queries classified as “unknown”

Symptom: Shopping queries not detected, badge never shows Causes:
  1. Invalid API key
  2. Network/firewall blocking API calls
  3. Backend service unavailable
Solutions:
1

Verify API key

Check that your Sleek API key is correct
2

Test API connectivity

curl -H "Authorization: Bearer your-sleek-api-key" \
     https://api.onsleek.ai/classify
3

Check browser console

Look for network errors or 401/403 responses
4

Enable debug mode

enableDebug: true,
Check console for classification responses

​
Queries not being detected

Symptom: No classification happening, no events Causes:
  1. Not on supported platform (Google Search, ChatGPT)
  2. SDK not active on current page
  3. Page in denylist
Solutions:
Currently supported:
  • Google Search (google.com/search)
  • ChatGPT (chat.openai.com)
Navigate to these sites and try shopping queries.
// In browser console
console.log('SDK active:', !!getAiChatExtensionSdk());
Check console for denylist messages when debug mode is enabled

​
Browser-specific issues

​
Firefox: Content script not loading

Symptom: Works in Chrome but not Firefox Cause: Different manifest format or permissions Solution: Ensure Firefox-compatible manifest:
manifest.json
{
  "manifest_version": 3,
  "permissions": ["tabs", "scripting"],
  "host_permissions": ["<all_urls>"],
  "web_accessible_resources": [
    {
      "resources": [
        "chat-controller.js",
        "chat-panel.js",
        "chat-panel.html"
      ],
      "matches": ["<all_urls>"]
    }
  ],
  "browser_specific_settings": {
    "gecko": {
      "id": "[email protected]"
    }
  }
}

​
Safari: Styling issues

Symptom: Chat panel styling broken in Safari Cause: Webkit-specific CSS differences Solution: Use broadly compatible CSS: 
customStyles: {
  panelContainer: {
    backgroundColor: 'rgba(255, 255, 255, 0.98)',
  }
}

​
Debugging tips

​
Enable debug mode

Always start with debug mode when troubleshooting: 
await initializeAiChatExtensionSdk('your-api-key', {
  enableDebug: true,  // Enables detailed console logging
  // ... other config
});

​
Check SDK version

Verify you’re using the latest SDK version: 
pnpm list @sleek/ai-chat-extension-sdk
Update to latest: 
pnpm update @sleek/ai-chat-extension-sdk

​
Inspect SDK state

In browser console: 
// Get SDK instance
const sdk = getAiChatExtensionSdk();

// Check if initialized
console.log('SDK initialized:', !!sdk);

// Manually trigger classification (for testing)
// Note: This is an internal API and may not be available

​
Check browser console

Always check the DevTools Console for:
  • JavaScript errors
  • Network request failures
  • SDK debug logs
  • Warning messages

​
Test in incognito mode

Test in incognito/private browsing to rule out:
  • Conflicts with other extensions
  • Cached data issues
  • Profile-specific problems

​
Inspect network requests

In DevTools Network tab, filter for:
  • Requests to api.onsleek.ai (classification)
  • Requests to ai.pie.org (chat backend)
  • Failed requests (red)
  • 401/403 responses (authentication issues)

​
Common error messages

​
”Manifest validation failed”

Error: Failed to initialize SDK: Manifest validation failed Solution: Fix manifest.json configuration (see Manifest configuration issues)

​
“Chat panel iframe failed to load”

Error: Chat panel iframe failed to load Solutions:
  1. Verify chat-panel.html exists in dist directory
  2. Check web-accessible resources in manifest
  3. Look for CORS errors in console

​
”Data providers are required”

Error: Data providers are required when UI controls are enabled Solution: Provide data providers or disable UI features: 
dataProviders: {
  offerRedirectUrlProvider: async (url) => null,
  merchantCashbackProvider: async (urls) => ({}),
}

​
“Invalid API key”

Error: Failed to classify query: 401 Unauthorized Solution: Verify API key is correct and active

​
Getting help

If you’re still experiencing issues:

Email support

Contact our support team for assistance

Check documentation

Review the full SDK documentation
When contacting support, please include:
  • SDK version
  • Browser and version
  • Manifest.json content
  • Console errors/logs
  • Steps to reproduce the issue