"use client";import { useMemo, useState } from "react";import { LiveKitRoom } from "@livekit/components-react";import "@livekit/components-styles";import { CreateEquosSessionResponse } from "@equos/node-sdk/dist/types/session.type";import { RoomRenderer } from "./room-renderer";export default function Page() { const [session, setSession] = useState<CreateEquosSessionResponse | null>( null ); const onCreateSession = async () => { // Call to your backend to create the session. const session = null; // Replace with actual call setSession(session); }; const onHangUp = async () => { if (session) { // Call to your backend to stop the session. } setSession(null); }; return ( <> <div className="flex gap-4"> <div className="mx-auto flex flex-1 flex-col items-center gap-8 rounded-xl p-8"> { <> <div className="relative flex aspect-video w-full items-center justify-center"> <div className="z-10 flex flex-col items-center gap-8"> <span className="text-4xl font-bold">Talk to Jeremy</span> <button size="lg" onClick={onCreateSession}> Start Conversation </button> </div> </div> </> } </div> </div> {session && ( <aside className="fixed bottom-0 left-0 top-0 z-50 flex w-full items-center justify-center bg-black/75"> <section className="max-w-screen aspect-square h-[512px] max-h-screen w-fit overflow-hidden rounded-xl bg-background"> <LiveKitRoom serverUrl={session.session.host.serverUrl} token={session.consumerAccessToken} audio={true} // We want the user to be able to speak with the microphone. video={false} // We don't need the video of the user. > <RoomRenderer onStop={onHangUp} onClose={async () => setSession(null)} avatarIdentity={session.session.avatar.identity} avatarName={session.session.avatar.name} /> </LiveKitRoom> </section> </aside> )} </> );}
This code uses tailwindcss for styling and assumes you have a backend endpoint to create and stop sessions. Adjust the code to fit your front-end framework and design system.
Session duration (and billing) is calculated using session startedAt and endedAt timestamps.
Make sure to call the “end session” endpoint not matter what happens. It will set the endedAt field right away. Not ending the session will result in longer billing times as the session will remain active until it times out.
That’s it! 🎉 You can now safely run low-latency sessions with custom agents and avatars.