sgiant-ai-widget

A framework-agnostic AI chat widget. This page uses no bundler and no build step.

Everything below this line is the whole integration. The bubble in the corner is real — open it and send a message.

<script src="sgiant-ai-widget.global.js"></script>
<script>
  SgiantAiWidget.createAiChatWidget({
    endpoint: "https://your-backend.example.com/chat",
  });
</script>

About this demo: there is no server behind this page — it is served as a static file. So it installs a small stub that answers the widget's own request format (newline-delimited JSON) with a canned reply, streamed a word at a time. That stub is at the bottom of this file and is about fifteen lines; your real backend replaces it. The protocol it implements is documented in BACKEND.md.

More examples

• Beyond streaming text — activity steps, a question, a confirm-gated write, chips, a form the model designed, a card with actions, and your own renderer. Each one runs a real turn, with the JSON that produced it beside it.
• The chrome — launcher states you can drive, what the user can do to the panel (drag, reset, expand), and an animated robot avatar built as one inline SVG.
• Advanced mode — the assistant highlighting, filling and clicking inside a real app in an iframe, over sgiant-ai-agent-bridge. Three scenarios you can run.
• Real charts, no chart library — animated bars, an animated line with a prior-period overlay, and a donut, all drawn by the page in about sixty lines of inline SVG through the renderChartFallback seam.
• Theming and the brand mark — launcher geometry as CSS custom properties, and an inline SVG mark.

What a backend has to do

Answer one POST with a stream of JSON lines. Four frame types matter: {"type":"text","d":"…"} to append text, {"threadId":"…"} to name the conversation, {"type":"done"} to end the turn, and {"type":"error","message":"…"} if it fails.