live-layerdocs
View as markdown

React quickstart

Get an agent running in your React app in under 5 minutes.

Prerequisites

  • A React 18+ app (Next.js 13+, Vite, Remix, CRA, etc.)
  • An agent published on app.livelayer.studio (you'll need its agentId)

Step 1 — Install

bash
npm install @livelayer/react @livelayer/sdk

@livelayer/sdk is a peer dependency — install both. They release in lockstep.

Step 2 — Render

tsx
import { AvatarWidget } from "@livelayer/react";
import "@livelayer/react/styles.css";

export default function App() {
  return <AvatarWidget agentId="agt_abc123" />;
}

The CSS import is required — without it the widget renders unstyled.

Step 3 — Configure (most-used props)

These are the props you'll reach for most often. Full reference at AvatarWidget.

Step 4 — Wire your router (Next.js / React Router)

For SPAs, pass the current pathname so the widget can show/hide on specific routes and navigate via your router instead of full reloads:

Step 5 — React to events

Wire callbacks to track conversations or sync your own UI:

tsx
<AvatarWidget
  agentId="agt_abc123"
  onConnect={() => console.log("session connected")}
  onTranscript={(entries) => {
    const last = entries.at(-1);
    if (last?.final) console.log(`[${last.role}]`, last.text);
  }}
  onAgentState={(state) => {
    // state: "idle" | "listening" | "thinking" | "speaking"
  }}
/>

Where to go next

Now that you have a working widget: