LiveKit docs › Agents UI Components › Media controls

---

# Media controls

> Components for controlling microphone, camera, session actions, and other media in agent frontends.

## 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.

**[AgentControlBar](https://docs.livekit.io/reference/components/agents-ui/component/agent-control-bar.md)**

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

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

```

- **[AgentControlBar reference](https://docs.livekit.io/reference/components/agents-ui/component/agent-control-bar.md)**: Full API reference, props documentation, and variant examples.

### 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.

- **[AgentTrackControl reference](https://docs.livekit.io/reference/components/agents-ui/component/agent-track-control.md)**: Full API reference and props documentation.

### 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.

- **[AgentTrackToggle reference](https://docs.livekit.io/reference/components/agents-ui/component/agent-track-toggle.md)**: Full API reference and props documentation.

### 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.

- **[AgentDisconnectButton reference](https://docs.livekit.io/reference/components/agents-ui/component/agent-disconnect-button.md)**: Full API reference and props documentation.

### 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.

- **[StartAudioButton reference](https://docs.livekit.io/reference/components/agents-ui/component/start-audio-button.md)**: Full API reference and props documentation.

## Related

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

- **[Realtime media and data](https://docs.livekit.io/frontends/build/media-data.md)**: Learn about media tracks and how agents communicate with frontends.

- **[Session management](https://docs.livekit.io/frontends/build/sessions.md)**: Manage room connections and the agent lifecycle in your frontend.

---

This document was rendered at 2026-06-07T11:36:47.722Z.
For the latest version of this document, see [https://docs.livekit.io/frontends/agents-ui/media-controls.md](https://docs.livekit.io/frontends/agents-ui/media-controls.md).

To explore all LiveKit documentation, see [llms.txt](https://docs.livekit.io/llms.txt).