# Voice Agent
URL: https://remocn.dev/docs/product-scenes/voice-agent

A voice agent call transcript streams, handles an interruption and books a table

- Install: `npx shadcn@latest add @remocn/voice-agent`
- Vibe: tech
- Natural length: 322f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/voice-agent
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { VoiceAgent } from "@/components/remocn/voice-agent";

const VoiceAgentScene = () => (
  <VoiceAgent
    agentName="Ava"
    callerName="Maya Chen"
    summaryStatus="Booked"
    accent="#3B5BFD"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="VoiceAgent"
    component={VoiceAgentScene}
    durationInFrames={340}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A call window opens with live speaking bars for the agent and the caller. Turns stream word by word, one is interrupted mid-sentence, a tool call runs and resolves, the call ends and a summary card lands. Pass your own `turns`, names and `summary` rows to retell the call. It ships light and dark through the `theme` prop.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `agentName` | `string` | `"Ava"` | Name of the voice agent shown in the call header. |
| `agentRole` | `string` | `"Fernway concierge"` | Short role line under the agent name. |
| `callerName` | `string` | `"Maya Chen"` | Name of the person on the other end of the call. |
| `callerLine` | `string` | `"+1 (415) ••• 0192"` | Caller phone line or subtitle under the caller name. |
| `turns` | `VoiceTurn[]` | `DEFAULT_TURNS` | Ordered transcript turns: speaker, text, optional interruption point and tool call. |
| `summaryTitle` | `string` | `"Call summary"` | Heading of the summary card shown after the call. |
| `summaryStatus` | `string` | `"Booked"` | Green status word next to the summary title. |
| `summary` | `VoiceSummaryRow[]` | `DEFAULT_SUMMARY` | Label and value rows on the summary card; `mono` sets monospace values. |
| `startSeconds` | `number` | `41` | Seconds already on the call clock when the clip starts. |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark window styling. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the agent and active states. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `ground` | `GshPresetId` | — | Gradient shader preset id for the background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader preset parameters. |

## Use when
- A launch video for a voice AI product that needs to show a live call, the agent being cut off mid-sentence and a tool call completing.
- A beat proving the agent takes real action, ending on a booking summary card with a confirmation code.
- A customer-support or concierge automation demo where the call ends in a structured outcome.

## Don't use when
- The product is a text chat assistant, not a call — use `chat-flow` instead.
- You want an AI answer with citations rather than a spoken conversation — use `ai-answer-sources` instead.
- You only need a short kinetic text line about voice, no call UI — use `mono-voice` instead.