site-context-chat

An AI website chat that answers your visitors from your own knowledge base: services, prices, opening hours, FAQs, in plain Markdown. When it can't help, it offers to pass on an enquiry.

This package is the client: the chat widget, the chat admin panel, a script-tag embed and a small CLI. The answers come from a backend on your own Supabase project, with your own AI key (Claude, OpenAI or Z.ai GLM).

• Using Kontor? Your Kontor backend already runs the chat. Use your project URL and publishable key from Kontor (Settings → Visitor chat → Website embed).
• Without Kontor: download the free chat backend (two functions, the database script and a setup guide) from getkontor.eu/support-software or the GitHub releases.

Also available as a WordPress plugin.

Install

npm install site-context-chat @supabase/supabase-js

React 18 or newer. ES modules only.

The chat widget

import { ChatbotProvider } from 'site-context-chat';
import { SiteChatWidget } from 'site-context-chat/widget';
import 'site-context-chat/styles.css';

export function AppShell({ children }) {
  return (
    <ChatbotProvider
      supabaseUrl={process.env.NEXT_PUBLIC_SUPABASE_URL}
      supabaseAnonKey={process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY}
      siteId="default"
    >
      {children}
      <SiteChatWidget routePath={typeof window !== 'undefined' ? window.location.pathname : '/'} />
    </ChatbotProvider>
  );
}

supabaseAnonKey takes your project's publishable key (sb_publishable_…) or the legacy anon key. Both are public by design. Never put the service or secret key in a website.

Optional widget props: hideFabWhenSelector (hide the chat button while an element is on screen), aiPrivacyNotice, proactiveNudge, inline (render inside a container instead of floating).

The chat admin (private route)

import { AdminPanel } from 'site-context-chat/admin';
import 'site-context-chat/styles.css';

export default function ChatAdminPage() {
  return (
    <AdminPanel
      supabaseUrl={process.env.NEXT_PUBLIC_SUPABASE_URL}
      supabaseAnonKey={process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY}
      siteId="default"
    />
  );
}

Unlock it with your backend's admin secret (SITE_CHAT_ADMIN_SECRET), then set the chat's name and model, paste your knowledge base, and read conversations and enquiries. To keep the secret out of the browser, pass it from your own server-side auth as adminCredential.

Script-tag embed (any HTML site)

The package ships a self-contained build that includes React: node_modules/site-context-chat/dist/embed/site-context-chat-embed.js and .css. (Or download the embed kit from the releases.) Host the two files, then:

<script>
  window.SiteContextChatConfig = {
    supabaseUrl: 'https://YOUR_PROJECT.supabase.co',
    supabaseAnonKey: 'YOUR_PUBLISHABLE_KEY',
    siteId: 'default',
  };
</script>
<link rel="stylesheet" href="/path/to/site-context-chat-embed.css" />
<script src="/path/to/site-context-chat-embed.js"></script>

API: window.SiteContextChat.mount(config?) / window.SiteContextChat.unmount(). Set manual: true in the config to skip the automatic mount.

Turn your docs into a knowledge base

npx site-context-chat export ./docs ./context.md

Bundles a folder of Markdown files into one document. Paste it into the admin's Context tab.

Backend API (for reference)

The widget talks to one function, site-chat (actions config, history, chat with streaming, submitInquiry); the admin panel to site-chat-admin (actions get, save, conversations, conversation, inquiries, with the x-admin-secret header). Both come with the free backend and with every Kontor backend.

Licence

MIT. Made by TechLads for Kontor.