Voice Agent

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

Installation

$ pnpm dlx 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.

Props14

Prop	Type	Default
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	number41 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	number1 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.

agentNamestring
Name of the voice agent shown in the call header.
Default"Ava"
agentRolestring
Short role line under the agent name.
Default"Fernway concierge"
callerNamestring
Name of the person on the other end of the call.
Default"Maya Chen"
callerLinestring
Caller phone line or subtitle under the caller name.
Default"+1 (415) ••• 0192"
turnsVoiceTurn[]
Ordered transcript turns: speaker, text, optional interruption point and tool call.
DefaultDEFAULT_TURNS
summaryTitlestring
Heading of the summary card shown after the call.
Default"Call summary"
summaryStatusstring
Green status word next to the summary title.
Default"Booked"
summaryVoiceSummaryRow[]
Label and value rows on the summary card; `mono` sets monospace values.
DefaultDEFAULT_SUMMARY
startSecondsnumber
Seconds already on the call clock when the clip starts.
Default41
theme"light" | "dark"
Light or dark window styling.
Default"light"
accentstring
Accent color for the agent and active states.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
groundGshPresetId
Gradient shader preset id for the background.
groundParamsPartial<GradientParams>
Overrides for the shader preset parameters.