← Examples

VoiceButton + Visualizer React UI

Minimal voice agent UI — one button with a live waveform. Uses VoiceButton for lifecycle control and LiveWaveform for visual feedback. No transcript, no text input.

Code — single source

import { AgentProvider, VoiceButton, LiveWaveform,
  useAgentPlayer } from '@deepgram/agent-react-ui';

const { getOutputVolume } = useAgentPlayer();

<LiveWaveform getVolume={getOutputVolume} />

Code — multiple sources (used below)

const { getOutputVolume } = useAgentPlayer();
const { getInputVolume } = useAgentMicrophone();

// Pass an array — waveform reacts to whichever is louder
<LiveWaveform getVolume={[getOutputVolume, getInputVolume]} />