Browser SDK

@zentiq/client joins a live session in the browser: it shows the avatar in a <video> element, plays its voice, uses the microphone, and tells you what is said and who is speaking. It never needs your API key: your server starts the session and hands the browser the answer of POST /v1/sessions/tokens.

npm install @zentiq/client@^1

npm 7 or later also installs the one package it needs alongside it; with another package manager, install the peer dependency its package.json names.

Join#

import { joinSession, type SessionToken } from "@zentiq/client";

const token = (await fetch("/zentiq/session", { method: "POST" }).then((r) => r.json())) as SessionToken;

// People must know they are talking to an AI: show the persona's words for the whole session.
const disclosure = document.querySelector<HTMLElement>("#disclosure");
if (disclosure && token.disclosure?.required) disclosure.textContent = token.disclosure.text;

const session = await joinSession(token, {
  video: document.querySelector<HTMLVideoElement>("#avatar")!,
  onTranscript: (t) => {
    if (t.final) console.log(t.role === "user" ? "You" : t.speaker ?? token.persona.name, t.text);
  },
  onSpeaking: (who) => document.body.setAttribute("data-speaking", who),
});

joinSession(token, options) takes the whole token answer (it names the persona, so a duo's two people are known). The options:

It answers with a session: setMicrophoneEnabled(on), end(), the cast (who is on the stage) and sessionId.

Leaving and ending#

document.querySelector("#end")?.addEventListener("click", async () => {
  session.end(); // leaves the room
  // …and your server ends the session, so its minutes stop now.
  await fetch("/zentiq/end", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sessionId: token.sessionId }) });
});

session.end() leaves the room. It doesn't end the session: your server does, with POST /v1/sessions/{id}/end, and its minutes stop then. If the page just closes, Zentiq's clean-up ends the session a few minutes after the room is found empty.

Duos#

A duo's token names both people ("Mark & Susan"). The SDK then knows who is on the stage (session.cast.members, left then right), names the speaker on every caption, and calls onSpeakerChange as the floor passes from one to the other. castOf(name) and namedLines(text, cast) are exported for your own interface.

The AI label#

joinSession draws an AI label on the avatar's video for the whole session, in the session's language (the token's disclosure.label), and shows the token's notice for a few seconds when the session starts. It marks the video data-ai-generated="true" and describes it with the label for screen readers. It needs no style sheet, and the video's container becomes its frame (a container that is position: static is set to relative).

In full screen, put the video's container in full screen, not the video. See Telling people it's an AI.