Open Source
@smooai/chat-widget · MIT

Embeddable AI chat, beautifully on brand.

A framework-light <smooth-agent-chat> web component. One script tag. Streaming replies, grounded sources, popover or full-page — and it inherits your brand color, automatically.

Same component · three brands

One widget, your color

Live, streaming conversations below — the real <smooth-agent-chat> component running right on this page. Each one is the same code, themed from a single accent color.

Default · dark
Coral · light
Violet · dark

Adapts to your brand

Pass one primary color — gradients, bubbles, glow, and depth shades derive themselves. Light or dark.

Streaming + sources

Token-by-token replies with a live typing indicator and a collapsible, knowledge-grounded sources panel.

Popover or full-page

A floating launcher, or a full-bleed support surface. Same component, one attribute.

Framework-light

No React on the host page. Shadow-DOM isolated. ~19 kB gzipped, protocol client included.

Drop it in

Two lines to embed

Declarative — a script tag + the element
<!-- one script tag, then the element -->
<script src="https://unpkg.com/@smooai/chat-widget/dist/chat-widget.global.js"></script>

<smooth-agent-chat
    endpoint="wss://your-host/ws"
    agent-id="…"
    agent-name="Support">
</smooth-agent-chat>
Programmatic — bundler / ESM
import { mountChatWidget } from '@smooai/chat-widget';

mountChatWidget({
    endpoint: 'wss://your-host/ws',
    agentId: '…',
    agentName: 'Support',
    theme: { primary: '#8b5cf6' }, // one color themes everything
});

Build it into your product

Open source and built on smooth-operator. Star it, ship it, theme it.