← Examples

Deepgram Orb React UI

The signature Deepgram hoop animation. Three states: idle, listening, talking. Volume from mic and player feeds the chatter effect.

Wired to a live agent

import {
  AgentProvider, Orb, AgentStartButton,
  useAgentMicrophone, useAgentPlayer, useAgentMode,
} from '@deepgram/agent-react-ui';

function LiveOrb() {
  const { getInputVolume } = useAgentMicrophone();
  const { getOutputVolume } = useAgentPlayer();
  const { mode } = useAgentMode();

  const state = mode === "speaking" ? "talking"
    : mode === "listening" ? "listening" : "idle";

  return <Orb
    state={state}
    getInputVolume={getInputVolume}
    getOutputVolume={getOutputVolume}
  />;
}

Live agent demo

Manual playground