LiveKit Agents Integration Client - Spatius

Before you start

Complete the Agent setup.
Create a backend endpoint that returns a short-lived LiveKit token, server URL, and room name for the client.
Use the same Spatius App ID and Avatar ID as the worker. Keep the Spatius API Key on the worker.

This packaged LiveKit client path is currently available on Web. The native RTC SDKs expose an RTCProvider extension point, but do not bundle a native LiveKitProvider.

Install

npm install @spatius/avatarkit @spatius/avatarkit-rtc livekit-client

Configure your build tool to load the AvatarKit WebAssembly assets. See Toolchain Setup.

Connect and render

import { AvatarPlayer, LiveKitProvider } from '@spatius/avatarkit-rtc'
import { AvatarSDK, AvatarView, AvatarManager, DrivingServiceMode } from '@spatius/avatarkit'

interface LiveKitSession {
  url: string
  token: string
  roomName: string
}

export async function startAvatar(
  container: HTMLElement,
  session: LiveKitSession,
) {
  await AvatarSDK.initialize('your-spatius-app-id', {
    drivingServiceMode: DrivingServiceMode.rtc,
  })

  const avatar = await AvatarManager.shared.load('your-spatius-avatar-id')
  const avatarView = new AvatarView(avatar, container)
  await new Promise<void>((resolve) => {
    avatarView.onFirstRendering = resolve
  })

  const provider = new LiveKitProvider()
  const player = new AvatarPlayer(provider, avatarView)

  await player.connect(session)
  await player.startPublishing()

  return {
    player,
    async dispose() {
      await player.stopPublishing()
      await player.disconnect()
      avatarView.dispose()
    },
  }
}

startPublishing() requests microphone permission, so call startAvatar() from a user action. Run the returned dispose() function when the experience ends. The adapter creates and owns the LiveKit Room in this path. If your app must supply an existing room, follow the advanced attach() flow in the RTC Adapter reference.

Next steps

Integration demo

RTC Adapter API

Client lifecycle