A face. A voice. A presence.

import { RealtimeAvatarClient } from "@theinfluencecompany/realtime-avatar";
import {
  RealtimeAvatarLiveKitRoom,
  VideoTrack,
  useChat,
  useLiveKitAvatarGrant,
  useTranscriptions,
  useVoiceAssistant,
} from "@theinfluencecompany/realtime-avatar/react";

const client = RealtimeAvatarClient.browser(); // API key stays server-side

function AvatarChat() {
  const grant = useLiveKitAvatarGrant({
    client,
    session: { avatarId: "ava_…", sttMode: "off" },
  });
  return (
    <RealtimeAvatarLiveKitRoom grant={grant.grant} audio={false} video={false}>
      <AvatarMedia />
    </RealtimeAvatarLiveKitRoom>
  );
}

function AvatarMedia() {
  const { send } = useChat();
  const captions = useTranscriptions();
  const { videoTrack } = useVoiceAssistant();
  return (
    <>
      {videoTrack ? <VideoTrack trackRef={videoTrack} onClick={() => send("Hello.")} /> : null}
      <p>{captions.at(-1)?.text}</p>
    </>
  );
}