@sksharma72000/ai-chat-websdk

An embeddable, fully themeable AI chat widget for web applications.
Drop it into any page with a single initialize() call — no framework required.

Features

• 🔐 JWT Authentication — pass a token on init, update it at any time, or auto-refresh on 401
• 🎨 Fully Themeable — colors, fonts, border-radius via CSS custom properties
• 📊 Rich Content — tables, code blocks, markdown, clarification flows & execution plans
• 📝 Chat History — loads and replays earlier conversations automatically
• ⚡ Edit & Retry — edit previous messages and regenerate responses inline
• 🔴 Connection Monitor — live online/offline indicator

Installation

npm install @sksharma72000/ai-chat-websdk

Peer dependencies — React 18 and ReactDOM 18 must be present in your host application (Option A only).

Quick Start

Option A — npm (React / Vue / Angular / any bundler)

npm install @sksharma72000/ai-chat-websdk react react-dom

import AIChatSDK from '@sksharma72000/ai-chat-websdk';
import '@sksharma72000/ai-chat-websdk/style.css';

// 1. Mount the widget
AIChatSDK.initialize({
  // Required
  apiUrl: 'https://api.example.com',

  // Auth — omit for public endpoints
  jwtToken: 'Bearer eyJ...',

  // Auto-refresh token on 401 — SDK retries the failed request automatically
  onTokenExpired: async () => {
    const res = await fetch('/auth/refresh', { method: 'POST' });
    const { token } = await res.json();
    return token; // 'Bearer ' prefix is optional — the SDK normalises it
  },

  // Branding
  title: 'Support Chat',
  logo: 'https://example.com/logo.png',
  welcomeMessage: '## 👋 Hi there!\nHow can I help you today?',

  // Pre-fill input on first open (user can edit or send immediately)
  initialMessage: 'Show me the latest reports',

  // Theme — all fields optional, defaults to indigo/violet palette
  theme: {
    primaryColor: '#6366f1',        // accent: buttons, header gradient start
    secondaryColor: '#8b5cf6',      // header gradient end
    backgroundColor: '#f8fafc',     // chat message area background
    fontFamily: "'Inter', sans-serif",
    borderRadius: '12px',           // message bubble corner radius
    userBubbleColor: '#6366f1',     // user message bubble fill
    userBubbleTextColor: '#ffffff', // user message bubble text
  },

  // Mount target — CSS selector or DOM element.
  // Omit to render as a floating FAB in the bottom-right corner.
  container: '#chat-widget-root',
});

// 2. Update token after silent refresh / login
AIChatSDK.setToken('Bearer eyJnew...');

// 3. Tear down on logout / page unload
AIChatSDK.destroy();

Option B — Script Tag / CDN (No React, No npm, No bundler)

The standalone bundle has React baked in — drop two tags into any HTML page and you're done.

<!-- Styles (shared with all bundle variants) -->
<link rel="stylesheet" href="https://unpkg.com/@sksharma72000/ai-chat-websdk/style.css" />
<!-- Standalone bundle (React included) -->
<script src="https://unpkg.com/@sksharma72000/ai-chat-websdk/ai-chat-websdk.standalone.js"></script>

<script>
  AIChatSDK.initialize({
    apiUrl: 'https://api.example.com',
    jwtToken: 'Bearer eyJ...',

    onTokenExpired: async () => {
      const res = await fetch('/auth/refresh', { method: 'POST' });
      const { token } = await res.json();
      return token;
    },

    title: 'Support Chat',
    theme: {
      primaryColor: '#6366f1',
      secondaryColor: '#8b5cf6',
    },
  });

  // Update token later
  AIChatSDK.setToken('Bearer new-token');

  // Remove widget
  AIChatSDK.destroy();
</script>

The standalone bundle is larger (~2 MB unminified) because React is included. For production React projects use Option A to avoid shipping React twice.

Build outputs

| File | Use case | |---|---| | ai-chat-websdk.es.js | ES module — React apps, bundlers (Vite, webpack, etc.) | | ai-chat-websdk.umd.js | CommonJS / UMD — Node SSR, older bundlers | | ai-chat-websdk.standalone.js | IIFE — plain HTML, CMS, no-framework pages | | style.css | Stylesheet for all bundle variants |

Configuration Reference

|---|---|---|---| | apiUrl | string | required | Base URL of the AI server | | jwtToken | string | — | JWT token (with or without Bearer prefix) | | onTokenExpired | () => Promise<string> | — | Called on 401; return new token; SDK retries automatically | | title | string | 'AI Assistant' | Header title | | logo | string | — | URL or base64 of logo image | | welcomeMessage | string | — | Markdown string shown as the first AI message | | initialMessage | string | — | Pre-fills the input when the widget first opens | | container | string \| HTMLElement | document.body | Mount target; omit for floating FAB | | theme | SDKTheme | — | See theme options below |

Theme Options

| Option | Default | Description | |---|---|---| | primaryColor | #6366f1 | Accent color — buttons, header gradient start | | secondaryColor | #8b5cf6 | Header gradient end | | backgroundColor | #f8fafc | Chat message area background | | fontFamily | system-ui | CSS font-family string | | borderRadius | 12px | Message bubble corner radius | | userBubbleColor | #6366f1 | User message bubble fill | | userBubbleTextColor | #ffffff | User message bubble text |

React Usage

import { ChatWindow } from '@sksharma72000/ai-chat-websdk';
import '@sksharma72000/ai-chat-websdk/style.css';

function App() {
  return (
    <ChatWindow config={{
      apiUrl: 'https://api.example.com',
      jwtToken: token,
      title: 'Support Chat',
    }} />
  );
}

Chat Mode

The chat mode (FAQ / client / database) is determined server-side via the JWT claims.
No manual mode selector is exposed — the server routes queries automatically based on the token.

License

MIT © Shree Krishna Acharya