Media controls

Overview

Media control components give users control over their audio and video inputs, session actions, and browser audio playback. They handle the details of track management, mute/unmute state, and device switching so you can focus on layout and design.

Most voice agent apps need at least a microphone toggle and a way to disconnect. AgentControlBar bundles common controls into a single component for quick setup, while the individual components like AgentTrackToggle and AgentDisconnectButton let you build custom layouts with full control over placement and styling.

Components

AgentControlBar

The quickest way to add media controls. AgentControlBar renders a complete set of controls for voice agent applications — microphone toggle, disconnect button, and optional extras — in a single, pre-styled component. Use this when you want standard controls without building a custom layout.

import { AgentControlBar } from '@/components/agents-ui/agent-control-bar';

export function Controls() {
  return (
    <AgentControlBar
      controls={{ microphone: true, leave: true }}
    />
  );
}

AgentTrackControl

Renders controls for an individual media track, including mute/unmute and device selection. Use this when you need more granular control over specific tracks than what AgentControlBar provides — for example, to place the microphone toggle in a header and the camera control in a sidebar.

AgentTrackToggle

A single toggle button for enabling or disabling a specific media track — typically the microphone or camera. This is the simplest building block for custom control layouts where you only need an on/off switch without device selection.

AgentDisconnectButton

A button that disconnects from the current agent session when clicked. Place it alongside your other controls to give users a clear way to end the conversation. If you're using AgentControlBar with the leave control enabled, this is already included.

StartAudioButton

Handles the browser autoplay restriction for audio. Browsers require a user gesture before playing audio, so this component renders a button that starts audio playback when clicked. Most agent apps need this — without it, users may not hear the agent speak until they interact with the page.

Related

These guides cover the concepts behind media controls and related components.