# Voice Chat
Source: https://ui.spencerwueste.com/docs/blocks/voice-chat/
Markdown: https://ui.spencerwueste.com/llm/blocks/voice-chat.md

> Push-to-talk assistant with live waveform, streaming transcript, and barge-in.

> Live preview: https://ui.spencerwueste.com/preview/voice-chat

## What's inside

- **Waveform** animates while listening or speaking; pass real `levels` from an AnalyserNode to follow the microphone.
- **Thread** keeps the transcript pinned to the newest turn.
- **Barge-in** lets a tap during speech cut the reply and start listening again.

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/voice-chat.json
```

Manual install dependencies: `@heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/voice-chat.json

The registry item pulls in every component it depends on.

## Usage

```tsx
import VoiceChat from "@/components/blocks/voice-chat/voice-chat";

export default function Page() {
  return (
    <div className="h-dvh p-4">
      <VoiceChat />
    </div>
  );
}
```

Give the parent a bounded height. The block fills it and scrolls internally.

## Going live

Replace `runTurn` with your realtime pipeline: capture audio, stream a transcript into the user turn, then stream the reply text while playing audio. The state machine (idle, listening, thinking, speaking) stays the same.