Hero voicePro
A hero whose main object is a voice agent you can watch and talk to. A scripted call plays on view with live captions; visitors tap the orb to cut in, replay it, hear it in the browser's voice, or switch to their own microphone and watch the orb follow them.
On this page
ProA front desk call plays on view with live captions. Tap the orb to cut in, replay it, turn on the voice or use your own microphone.
Installation
Usage
import { HeroVoice } from "@/components/ui/chatcn/pro/hero-voice"
<HeroVoice
title="Answer every call on the first ring."
description="Hollis takes bookings and hands the hard calls to your team."
script={FRONT_DESK_SCRIPT}
agentName="Front desk"
actions={<Button variant="solid" size="lg">Set up a phone line</Button>}
/>The script is a list of turns with an optional barge-in, played by the same scripted engine as the voice examples. The microphone is optional: it only meters the visitor's level, so the orb follows their voice and the agent answers when they pause, and the captions say plainly that nothing is recorded. Without a mic, or when it is blocked, the script carries the hero.
Examples
Centered, tap to start
ProThe centered layout with the wireframe orb. Nothing plays until the visitor taps the orb.
Props
| Prop | Type | Notes |
|---|---|---|
title, description, actions | ReactNode | The copy column |
script | ChatcnVoiceScriptTurn[] | The call that plays. Pass a module constant |
agentName | string | On the captions. Default Assistant |
orb | ComponentType | Any orb with the voice orb's props. Default ParticleOrb |
mic | boolean | Offer Use my microphone. Default true |
micReplies | string[] | What the agent says back in mic mode, in turn |
sound | boolean | Offer the browser voice for the agent's lines. Default true |
autoPlay | boolean | Play when scrolled into view. Default true |
hint | ReactNode | A line under the controls |
layout | "end" | "center" | Default end: copy at the start, stage at the end |
Keyboard
| Key | Action |
|---|---|
Tab, Enter | The orb (play or interrupt), Replay, microphone and sound |
Accessibility
- The section is named by its heading. The orb's button says what it does: play the demo, or interrupt.
- Sound is off until the visitor turns it on, and the microphone is only requested on their click.
- Finished agent lines are announced once through the captions' live region.
Motion
- The script starts once, when a third of the hero is on screen. Under reduced motion the orb shows one still per state and the captions still update.