gabriel-chat

Headless React SDK for Gabriel hosted chat.

Install

npm install gabriel-chat

Peer dependency: react 18+.

Quick start

Your app backend should exchange the logged-in user for a Gabriel chat token, then pass it to the client:

import {
  GabrielChatProvider,
  useGabrielChat,
  useChatRealtime,
  mapThreads,
  type ApiThread,
} from "gabriel-chat";

function MessagesApp({ token }: { token: string }) {
  return (
    <GabrielChatProvider
      config={{
        baseUrl: "https://gabriel-production-6cf1.up.railway.app",
        getToken: () => token,
      }}
    >
      <Inbox />
    </GabrielChatProvider>
  );
}

function Inbox() {
  const { apiJson } = useGabrielChat();
  const [threads, setThreads] = useState([]);

  const reload = useCallback(async () => {
    const rows = await apiJson<ApiThread[]>("/api/threads");
    setThreads(mapThreads(rows));
  }, [apiJson]);

  useChatRealtime({ onChatsStale: reload });

  // render your own UI…
}

Same-origin (Gabriel web app)

<GabrielChatProvider config={{ baseUrl: "" }}>
  <YourChatUi />
</GabrielChatProvider>

Cookie session auth is used when getToken is omitted.