@skit-ai/llm-studio-chat-websdk/BROWSER_USAGE.md

A lightweight chat widget for LLM Studio

# Browser Usage Guide for LLM Studio Chat WebSDK

This guide explains how to use the LLM Studio Chat WebSDK directly in browser environments.

## Quick Setup

Include both the polyfill and the UMD bundle in your HTML file:

```html
<!-- 1. First include the polyfill -->
<script src="https://cdn.jsdelivr.net/npm/@skit-ai/llm-studio-chat-websdk/dist/polyfill.js"></script>

<!-- 2. Then include the SDK -->
<script src="https://cdn.jsdelivr.net/npm/@skit-ai/llm-studio-chat-websdk/dist/llm-studio-chat-websdk.umd.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Initialize the chat widget
    LLMStudioChat.init({
      clientId: "YOUR_CLIENT_ID",
      assistantId: "YOUR_ASSISTANT_ID",
      region: "us", // or "in" for India region
      
      // Optional customizations
      position: "bottom-right",
      assistantName: "Support Bot", 
      welcomeMessage: "Hello! How can I help you today?",
      suggestedPrompts: [
        "What services do you offer?",
        "How do I reset my password?",
        "I need technical support"
      ],
      primaryColor: "#4f46e5"
    });
  });
</script>
```

## Why the Polyfill?

The WebSDK is built with modern JavaScript tools which might reference Node.js-specific globals like `process`. The polyfill ensures these are available in browser environments.

## Embedded Mode

To embed the chat widget directly in a container:

```html
<div id="chat-container" style="height: 500px; width: 100%;"></div>

<script>
  LLMStudioChat.init({
    clientId: "YOUR_CLIENT_ID",
    assistantId: "YOUR_ASSISTANT_ID",
    region: "us",
    embedded: true // This enables embedded mode
  });
</script>
```

## Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| clientId | string | | Required. Your LLM Studio client ID |
| assistantId | string | | Required. The ID of the assistant |
| region | string | | Required. "us" or "in" |
| position | string | "bottom-right" | Position of the chat button. Options: "bottom-right", "bottom-left", "top-right", "top-left" |
| embedded | boolean | false | If true, the chat widget will be embedded in #chat-container |
| triggerButtonLabel | string | "Chat with us" | Label for the trigger button |
| assistantName | string | "John" | Name of the assistant |
| assistantAvatar | string | | URL to the assistant's avatar image |
| welcomeMessage | string | "We're here to help..." | Welcome message shown at the top of the chat |
| suggestedPrompts | string[] | [] | Array of suggested prompts shown as chips |
| primaryColor | string | "#3b82f6" | Primary color for the chat widget |
| height | string | "600px" | Height of the chat widget |
| width | string | "380px" | Width of the chat widget |

## Troubleshooting

If you're experiencing issues:

1. Make sure you're including the polyfill before the main SDK
2. Check your browser console for any errors
3. Verify your clientId and assistantId are correct
4. For embedded mode, ensure the container exists before initialization

## CDN URLs

Latest version:
```
https://cdn.jsdelivr.net/npm/@skit-ai/llm-studio-chat-websdk/dist/polyfill.js
https://cdn.jsdelivr.net/npm/@skit-ai/llm-studio-chat-websdk/dist/llm-studio-chat-websdk.umd.js
```

Specific version:
```
https://cdn.jsdelivr.net/npm/@skit-ai/llm-studio-chat-websdk@0.2.3/dist/polyfill.js
https://cdn.jsdelivr.net/npm/@skit-ai/llm-studio-chat-websdk@0.2.3/dist/llm-studio-chat-websdk.umd.js
```