> ## 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.

# Quickstart

> Create a session on your server and join it from React.

## Prerequisites

You need:

* A Digital Human API key with `sessions:create`, `sessions:read`, and
  `sessions:delete` scopes.
* A digital human ID from your account dashboard.
* Node.js 20.17 or newer and a React application.

## 1. Install the SDK and LiveKit

```bash theme={null}
pnpm add digital-human livekit-client @livekit/components-react @livekit/components-styles react
```

## 2. Store server credentials

```bash .env.local theme={null}
DIGITAL_HUMAN_API_KEY=your_api_key
DIGITAL_HUMAN_ID=your_digital_human_id
```

Keep this file out of source control. Do not prefix the API-key variable with a
framework's public-environment convention.

## 3. Create a server route

```ts app/api/session/route.ts theme={null}
import { createDigitalHumanClient } from "digital-human/server";

const client = createDigitalHumanClient({
  apiKey: process.env.DIGITAL_HUMAN_API_KEY!,
});

export async function POST(request: Request) {
  const session = await client.createSession({
    idempotencyKey: request.headers.get("Idempotency-Key") ?? crypto.randomUUID(),
    digitalHumanId: process.env.DIGITAL_HUMAN_ID!,
  });

  if (!session.connection) {
    return Response.json({ message: "Session is not connectable" }, { status: 409 });
  }

  return Response.json(session.connection, {
    status: 201,
    headers: { "Cache-Control": "no-store" },
  });
}
```

The route returns a safe `SessionConnection`; it never returns the API key.

## 4. Connect from React

```tsx app/call.tsx theme={null}
"use client";

import "@livekit/components-styles";
import { VideoConference } from "@livekit/components-react";
import type { SessionConnection } from "digital-human";
import { DigitalHumanRoom } from "digital-human/react";
import { useState } from "react";

export function Call() {
  const [connection, setConnection] = useState<SessionConnection | null>(null);

  async function start() {
    const response = await fetch("/api/session", {
      method: "POST",
      headers: { "Idempotency-Key": crypto.randomUUID() },
    });
    if (!response.ok) throw new Error("Unable to start session");
    setConnection(await response.json());
  }

  if (!connection) return <button onClick={() => void start()}>Start call</button>;

  return (
    <DigitalHumanRoom connection={connection}>
      <VideoConference />
    </DigitalHumanRoom>
  );
}
```

`DigitalHumanRoom` requests camera and microphone access by default. Use
LiveKit's `PreJoin` component when users should select devices before the
session connects.

## Next steps

<CardGroup cols={2}>
  <Card title="Build a full call" icon="users" href="/guides/full-call">
    Add prejoin device selection and LiveKit's complete conferencing UI.
  </Card>

  <Card title="Embed only the face" icon="user" href="/guides/embedded-face">
    Publish user media without showing a local participant tile.
  </Card>
</CardGroup>


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