LiveKit docs › Components › Media controls › AgentTrackControl

---

# Agent Track Control

> A UI control for managing media tracks (microphone, camera, screen share).

## Usage

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

```tsx
'use client';

import { useSession, useAgent } from '@livekit/components-react';
import { AgentSessionProvider } from '@/components/agents-ui/agent-session-provider';

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

export function Demo() {
  const { audioTrack } = useAgent();
  const handlePressedChange = (pressed: boolean) => console.log('pressed', pressed);
  const handleMediaDeviceError = (error: Error) => console.log('error', error);
  const handleActiveDeviceChange = (deviceId: string) => console.log('deviceId', deviceId);

  return (
    <AgentTrackControl
      variant={{variant}}
      source={{source}}
      pressed={{pressed}}
      pending={{pending}}
      disabled={{disabled}}
      // provide audioTrack to render an audio visualizer
      audioTrack={audioTrack}
      onPressedChange={handlePressedChange}
      onMediaDeviceError={handleMediaDeviceError}
      onActiveDeviceChange={handleActiveDeviceChange}
    />
  );
}
  
export function DemoWrapper() {
  const session = useSession(TOKEN_SOURCE);

  return (
    <AgentSessionProvider session={session}>
      <Demo />
    </AgentSessionProvider>
  );
}
```

## Features

- Toggle the capture of a client's media input (microphone, camera, screen share)
- Select from five sizes: `icon`, `sm`, `md`, `lg`, and `xl`
- Select from three styles: `default`, `outline`, and `livekit`
- Renders an audio visualizer when an audio track is provided
- Displays a select dropdown when multiple input devices are available

## Installation

```bash
pnpm dlx shadcn@latest add @agents-ui/agent-track-control

```

## Props

| Prop name | Type | Default |
| --------- | ---- | ------- |
| `kind` | enum | – |
| `source` | enum | – |
| `pressed?` | boolean | – |
| `pending?` | boolean | – |
| `disabled?` | boolean | – |
| `className?` | string | – |
| `audioTrack?` | TrackReferenceOrPlaceholder | – |
| `onPressedChange?` | (pressed: boolean) => void | – |
| `onMediaDeviceError?` | (error: Error) => void | – |
| `onActiveDeviceChange?` | (deviceId: string) => void | – |

---

This document was rendered at 2026-06-07T11:35:01.021Z.
For the latest version of this document, see [https://docs.livekit.io/reference/components/agents-ui/component/agent-track-control.md](https://docs.livekit.io/reference/components/agents-ui/component/agent-track-control.md).

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