00Playground
Tune Sir to your brand.
Drag the knobs, watch the widget shift, copy the snippet, paste it into your site. The preview accent is scoped to this page only — it won't repaint the marketing site.
yoursite.com/blog/launching-the-thing
Blog · May 17, 2026
Launching the thing
This is what an article on your site might look like. The widget appears in whichever position you've configured — bottom-right, bottom-left, or inline directly below content.
Open the widget below to try it. Resize the window to see how it adapts. Switch position from "bottom-right" to "inline" to see the inline rendering mode.
Preview (bottom-right)
Your site goes here.
This is a stand-in for your actual page content. The widget overlays on top in floating mode, or renders inline below the article in inline mode.
Sir Chats-a-Lot
online · grounded in this site
Hey — I'm Sir Chats-a-Lot. What can I help you with?
Try one
Your config
"use client";
import {
SirChatsALotProvider,
SirChatsALotLauncher,
SirChatsALotWidget,
type AgentRequest,
} from "sir-chats-a-lot";
import "sir-chats-a-lot/styles";
// Your server route (app/api/scal/route.ts) calls your LLM and returns the
// AgentResponse. Surfaces (buttons, forms, confirms) come from that route.
// Ground answers with gnosys/web over: /sitemap.xml
const api = async (request: AgentRequest) => {
const res = await fetch("/api/scal", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(request),
});
return res.json();
};
export function ScalMount() {
return (
<SirChatsALotProvider
productName="Your Site"
api={api}
greeting="Hey — I'm Sir Chats-a-Lot. What can I help you with?"
theme={{
colors: { accent: "#d49b3a" },
radius: { panel: "14px", button: "14px", input: "14px" },
}}
launcher={{ position: "bottom-right" }}
>
<SirChatsALotLauncher />
<SirChatsALotWidget />
</SirChatsALotProvider>
);
}Ready to ship it.
Paste the snippet, point it at your knowledge source, deploy. Five minutes.