Quick Start

Quick Start

If you want the fastest path, this is it: paste in your avatarId and apiKey, render the component, and you are done.

Install

npm install @zeroweight/react @zeroweight/renderer
npm install react react-dom @livekit/components-react @livekit/components-styles livekit-client lucide-react

Minimal React example

import { LiveKitAvatarSession } from "@zeroweight/react";
 
export default function App() {
  return (
    <LiveKitAvatarSession
      avatarId="your-avatar-id"
      apiKey="your-api-key"
      sessionDuration={120}
      inactivityTimeout={30000}
    />
  );
}

This default setup uses:

  • API base URL: https://api.zeroweight.ai
  • LiveKit URL: wss://prod-project-pazuyq69.livekit.cloud
  • Auth header: X-ZW-Api-Key: <apiKey>

What happens behind the scenes

@zeroweight/react will:

  1. Fetch the avatar bundle from ZeroWeight.
  2. Request a LiveKit token for the selected avatar.
  3. Connect the voice session and mount the renderer UI.

Example API calls

curl \
  -H "X-ZW-Api-Key: your-api-key" \
  "https://api.zeroweight.ai/api/v1/avatars/bundle/avatar_123"
curl \
  -H "X-ZW-Api-Key: your-api-key" \
  "https://api.zeroweight.ai/api/v1/livekit/getToken?avatar_id=avatar_123&name=alice"

Important note

The quick start is great for testing, demos, and internal tools. For production, move your API key to the server and follow the Security guide.

InstallationAdvanced Usage