> ## Documentation Index
> Fetch the complete documentation index at: https://docs.spatius.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# LiveKit Agents Integration Client

> Connect a Web client to a LiveKit Agents room and render the avatar.

## Before you start

* Complete the [Agent setup](/livekit-agents/server).
* 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

```bash theme={null}
npm install @spatius/avatarkit @spatius/avatarkit-rtc livekit-client
```

Configure your build tool to load the AvatarKit WebAssembly assets. See [Toolchain Setup](/sdk-reference/web-sdk/toolchain).

## Connect and render

```typescript theme={null}
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](/sdk-reference/web-sdk/rtc-adapter#host-owned-rtc-clients).

## Next steps

<CardGroup cols={3}>
  <Card title="Integration demo" icon="github" href="https://github.com/spatius-ai/spatius-integration-demo/tree/main/rtc-mode" />

  <Card title="RTC Adapter API" icon="code" href="/sdk-reference/web-sdk/rtc-adapter" />

  <Card title="Client lifecycle" icon="arrows-rotate" href="/concepts/lifecycle" />
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.