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

# Build a full video call

> Compose the SDK with LiveKit's complete conferencing UI.

LiveKit's `VideoConference` component already provides a participant grid,
focus layout, pagination, device controls, screen sharing, basic chat, and
connection feedback. Use it directly rather than rebuilding those behaviors.

## Collect device choices

Render `PreJoin` before creating the room:

```tsx theme={null}
import { PreJoin } from "@livekit/components-react";

<PreJoin onSubmit={(choices) => void startSession(choices)} />;
```

Create the API session after the user confirms their devices. This avoids
starting a billable realtime session while the user is still deciding whether
to join.

## Render the conference

```tsx theme={null}
import "@livekit/components-styles";
import { VideoConference } from "@livekit/components-react";
import { DigitalHumanRoom } from "digital-human/react";

<DigitalHumanRoom
  connection={connection}
  audio={choices.audioEnabled ? { deviceId: choices.audioDeviceId } : false}
  video={choices.videoEnabled ? { deviceId: choices.videoDeviceId } : false}
>
  <VideoConference />
</DigitalHumanRoom>;
```

Keep LiveKit's component stylesheet imported once in your application. You can
override its design tokens or replace individual LiveKit layout components as
your product evolves.

## End the API session

Leaving a LiveKit room and ending an API session are separate operations. When
the user explicitly ends the experience, call an authenticated server route
that invokes:

```ts theme={null}
await client.endSession(sessionId);
```

Do not automatically end the API session for every transient disconnect; the
browser may reconnect after a short network interruption.


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