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

# TalkingAvatarView (React)

> The Open Source 3D talking avatar as a React component.

```jsx theme={null}
import { TalkingAvatarView } from "@interviewflowai/talking-avatar/react";
```

Needs React 18 or later, and `three`. In the Next.js App Router, use it in a client component (`"use client"`).

```jsx theme={null}
"use client";
import { useRef } from "react";
import { TalkingAvatarView } from "@interviewflowai/talking-avatar/react";

export function Agent({ stream }) {
  const avatar = useRef(null);

  return (
    <div style={{ width: 640, height: 360 }}>
      <TalkingAvatarView
        ref={avatar}
        avatarUrl="/avatar.glb"
        stream={stream}
        onError={console.error}
      />
      <button onClick={() => avatar.current?.speak("/hello.mp3")}>Say hello</button>
    </div>
  );
}
```

## Props

**avatarUrl** `string` *required*

Your `.glb` avatar. Changing it swaps the avatar without recreating anything.

**morphTargets** `Record\<string, string | string[]\>`

Your avatar's morph names, applied with `avatarUrl`. See [Other morph names](https://docs.talking-avatar.dev/open-source/avatars.md#other-morph-names).

**stream** `MediaStream | null`

Live audio to play and lip sync. `null` or `undefined` detaches it.

**status** `"listening" | "thinking"` (default: listening)

Behaviour while not speaking.

**modelUrl** `string`

Where to load the model from. Read on mount.

**streamDelayMs** `number` (default: 150)

Delay before an attached stream plays. Read on mount.

**onError** `(error: Error) =\> void`

Errors from background work.

**className, style** `string, CSSProperties`

Applied to the wrapper `div`, which is 100% × 100% by default.

**ref** `TalkingAvatar`

The [`TalkingAvatar`](https://docs.talking-avatar.dev/sdk/talking-avatar) instance, for `speak()` and its other methods.

The component disposes itself when it unmounts.


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