Skip to main content
This is an advanced integration. This guide is intended for confirmed developers. If you are not comfortable with fullstack development, please check our no-code sessions & automatic sessions recipes instead.

​
Joining Sessions

You first need to start a session and get your consumerAccessToken. The consumer access token is a livekit room access token. There are various ways to obtain it. After obtaining the consumerAccessToken, you can use any of the Livekit SDKs to connect to the session.
Equos Browser SDK provides UI (react & web) components to easily start & join sessions in the browser. Check out the Browser SDK documentation for more details.
Here is a an example using Livekit React SDK: 
"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. Adjust the code to fit your front-end framework and design system.
This code is not complete and is provided as a starting point. Check out our NextJS end-to-end implementation example on GitHub for a full working example.

​
Self-Hosted Livekit Sessions

You can also use Equos with your self-hosted Livekit server and agents.
This section is meant for developers with existing livekit agents running on their platform. If not, check our no-code sessions & automatic sessions recipes instead.

Need a working demo?

Check our python integration example on GitHub.