Live transcript
A running transcript of a voice conversation, with words appearing as they are spoken.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/live-transcript.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/live-transcript.json
Build a voice assistant interface with a live transcript →
Usage & API
Example
import { LiveTranscript } from "@/components/ai/live-transcript"
<LiveTranscript
speakers={speakers}
turns={[]}
activeTurn={1}
activeWord={1}
/>Props LiveTranscript
| Prop | Type & description | Required |
|---|---|---|
speakers | Record<string, TranscriptSpeaker> | Required |
turns | TranscriptTurn[] | Required |
activeTurn | numberIndex of the turn being spoken. Turns after it are hidden. | Required |
activeWord | numberIndex of the word being spoken in the active turn. Words after it are hidden. -1 when the turn has finished. | Required |
live | boolean | Optional |
elapsed | string | Optional |
className | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Two speakers is the only variant, and the name describes the preview rather than a limit. The component accepts any speaker map. Unknown ids fall back to the raw id and a neutral avatar. The preview uses Maya in a blue gradient and Assistant in a warm gradient, with times from 0:02 through 0:36. The Live badge hides when live is false. The elapsed string is printed as you passed it, with tabular figures, and the demo formats a running second count. Back to live is absolutely positioned at the bottom centre and only exists while the reader is not pinned. The scroll area is tabbable. The current-word highlight uses a shared layout id so it slides between words. Reduced motion skips the per-word blur and the highlight's spring. Nothing in the row is editable.
Choosing a layout
Use it beside a call when the exact words matter more than a single caption line. A support call, a meeting, or a voice note being dictated all produce more than Voice session can show in its caption card. This list keeps speaker, time, and the partial sentence. Leave live on during the session and turn it off, or stop advancing the indexes, when the call is over and the log is a record. The fixed height is 340 pixels with its own scroll, so it can sit in a column without growing the page.
Do not use it as the mute and hang-up bar. Those controls are Voice session, and the two are meant to sit together: one line of captions in the bar if you want them, and this history beside or below. Do not use it to pick a microphone or a voice. It renders names you already have. It is also a poor fit for a chat thread you type into. There is no composer. Words only appear because activeWord increased. If your transcript arrives as whole paragraphs after the fact, you can still use the list by setting activeWord to -1 and activeTurn to the last index, and the Live badge can go away.
Why did the latest words leave the screen?
The list auto-scrolls only while following is on. Scrolling up more than a small gap turns following off and shows Back to live. New words still render at the bottom. They are just not scrolled into view until you press that button or return to the bottom. The pin updates on activeTurn and activeWord, not on a timer.
Which turns and words are visible?
Turns are sliced through activeTurn inclusive. Inside the active turn, if activeWord is zero or more, only words through that index render, and that last word is the highlighted one. If activeWord is -1, the active turn shows every word and is styled as finished. Later turns stay out of the tree until you raise the index.