bravo-coach-chat-widget

Zero-dependency embeddable chat widget for the Bravo Coach AI guardrailed coaching assistant.

Why it's built the way it is

• No secrets in the widget. Auth is delegated to the host page via getToken() — return a user JWT for client-tier answers, or null for anonymous (public-tier) access. The data-segmentation decision happens server-side under Row-Level Security either way.
• Shadow-DOM isolated — host CSS can't break it; its styles can't leak out.
• XSS-safe by construction — every piece of server content renders via textContent, never innerHTML.
• Honest UI states — answered (with source citations), escalated to the coach (amber), and blocked (red) are distinct first-class states, because "the bot asked a human" is a feature.

Install

npm install bravo-coach-chat-widget

import { BravoCoachWidget } from "bravo-coach-chat-widget";

BravoCoachWidget.init({
  apiUrl: "https://your-agent-api.example.com",
  getToken: async () => (await supabase.auth.getSession()).data.session?.access_token ?? null,
});

Or with a plain script tag:

<script type="module" src="https://unpkg.com/bravo-coach-chat-widget/src/widget.js"></script>
<script type="module">
  window.BravoCoachWidget.init({ apiUrl: "https://your-agent-api.example.com" });
</script>

Options

| Option | Default | Notes | |---|---|---| | apiUrl | — (required) | Agent API base URL | | getToken | () => null | async fn returning user JWT or null | | title | "Ask the Coach" | panel header | | accent | "#e8590c" | brand colour | | placeholder | "Ask about training…" | input hint | | zIndex | 2147483000 | stacking |

MIT © Khan Steenkamp