LiveKit docs › Agent Frontends › 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** preview:

```tsx
'use client';

import { useSession } from '@livekit/components-react';
import { TokenSource } from 'livekit-client';
import { AgentSessionProvider } from '@/components/agents-ui/agent-session-provider';
import { AgentControlBar } from '@/components/agents-ui/agent-control-bar';

const TOKEN_SOURCE = TokenSource.endpoint('/api/token');

export function Controls() {
  const session = useSession(TOKEN_SOURCE);

  return (
    <AgentSessionProvider session={session}>
      <AgentControlBar
        variant="livekit"
        isChatOpen={false}
        isConnected={true}
        controls={{
          microphone: true,
          camera: true,
          screenShare: true,
          chat: true,
          leave: true,
        }}
      />
    </AgentSessionProvider>
  );
}
```

- **[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-10-07T15:59:26.504Z.
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).