@ddrinnova/agentsgt-widget

Drop-in chat widget for AgentsGT AI agents.

Embed a fully-featured AI assistant on any website with a single script tag.

Features

• 3 display modes — Popup bubble, sidebar panel, or inline chat
• Streaming responses — Real-time AI output via Vercel AI SDK
• Markdown rendering — Rich text, code blocks, tables, and lists
• Tool display — Web search results, image generation, document lookup
• Multi-language — Auto-detects agent language (EN, ES, FR, DE, PT, IT)
• Session persistence — Conversations survive page refreshes
• Theming — Customize colors to match your brand
• Lightweight — ~150 KB gzipped, zero external CSS conflicts

Quick Start

Script Tag

The fastest way to add an agent to any site:

<div id="agent-chat"></div>

<script src="https://unpkg.com/@ddrinnova/agentsgt-widget/dist/widget.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@ddrinnova/agentsgt-widget/dist/widget.css" />

<script>
  AgentSGTWidget.mountApp(document.getElementById('agent-chat'), {
    runtimeUrl: 'https://agentsgt.com/api/v1/agents/chat/YOUR_AGENT_ID',
    apiKey: 'pk_xxx:sk_xxx',
  });
</script>

npm Install

npm install @ddrinnova/agentsgt-widget

import { mountApp } from '@ddrinnova/agentsgt-widget';
import '@ddrinnova/agentsgt-widget/dist/widget.css';

const unmount = mountApp(document.getElementById('agent-chat')!, {
  runtimeUrl: 'https://agentsgt.com/api/v1/agents/chat/YOUR_AGENT_ID',
  apiKey: 'pk_xxx:sk_xxx',
  uiMode: 'popup',
});

// Call unmount() to remove the widget later

React Component

import App from '@ddrinnova/agentsgt-widget';
import '@ddrinnova/agentsgt-widget/dist/widget.css';

function MyPage() {
  return (
    <App
      runtimeUrl="https://agentsgt.com/api/v1/agents/chat/YOUR_AGENT_ID"
      apiKey="pk_xxx:sk_xxx"
      uiMode="popup"
      title="Support"
      initialMessage="Hi! How can I help you today?"
      theme={{ primaryColor: '#7C3AED' }}
    />
  );
}

Loader (dynamically load widget assets)

<div id="agent-widget"></div>

<script>
  window.onload = function () {
    if (window.AgentSGTWidgetLoader) {
      AgentSGTWidgetLoader.load('agent-widget', {
        runtimeUrl: 'https://agentsgt.com/api/v1/agents/chat/YOUR_AGENT_ID',
        apiKey: 'pk_xxx:sk_xxx',
        name: 'My Assistant',
        uiMode: 'popup',
        theme: { primaryColor: '#FBB76B' },
      });
    }
  };
</script>
<script src="https://unpkg.com/@ddrinnova/agentsgt-widget/dist/loader.umd.js"></script>

Options

| Option | Type | Default | Description | |:---|:---|:---|:---| | runtimeUrl | string | required | Full URL to the agent chat endpoint | | apiKey | string | required | API key in pk_xxx:sk_xxx format | | uiMode | "popup" | "sidebar" | "chat" | "popup" | Display mode | | title | string | Agent name | Header title | | initialMessage | string | "Need any help?" | Greeting shown on first visit | | identifier | string | — | External user ID for conversation tracking | | theme.primaryColor | string | #FBB76B | Accent color |

Display Modes

"popup"  (default)

Floating chat bubble in the bottom-right corner. Click to open a 400 × 520 chat window. Best for customer support overlays.

"sidebar"

Full-height panel that slides in from the right. Great for dashboards and admin panels.

"chat"

Inline chat that fills its parent container. Use when embedding directly into your page layout.

Theming

Quick — via prop

{ theme: { primaryColor: '#7C3AED' } }

Full control — via CSS custom properties

:root {
  --agt-primary: #FBB76B;                     /* Accent color */
  --agt-bg: #ffffff;                           /* Widget background */
  --agt-text: #1f2937;                         /* Primary text */
  --agt-text-secondary: #6b7280;               /* Muted text */
  --agt-border: #e5e7eb;                       /* Borders */
  --agt-muted: #f3f4f6;                        /* Subtle backgrounds */
  --agt-user-bg: rgba(251, 183, 107, 0.1);    /* User bubble */
  --agt-assistant-bg: #f3f4f6;                 /* Assistant bubble */
  --agt-radius: 1rem;                          /* Border radius */
}

API Keys

1. Open the AgentsGT dashboard
2. Navigate to Settings → API Keys
3. Create a new key pair — you'll get a pk_xxx:sk_xxx string
4. Pass it as the apiKey prop

API keys used in client-side widgets are visible to end users. Enable domain whitelisting in your dashboard to restrict usage to your domains.

Development

git clone https://github.com/ddrinnova/agentsgt-widget.git
cd agentsgt-widget
npm install
npm run dev            # Start dev server at localhost:5173
npm run build          # Production build → dist/
npm run release        # Bump patch version + publish to npm
npm run release:minor  # Bump minor version + publish
npm run release:quick  # Bump + publish without git tag

Built with Vercel AI SDK + React

agentsgt.com  •  GitHub  •  npm