LiveKit docs › Components › Media controls › AgentControlBar

---

# Agent Control Bar

> A control bar for managing media tracks (microphone, camera, screen share), opening the chat input, and disconnecting the agent session.

## Usage

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

```tsx
'use client';

import { useSession } from '@livekit/components-react';
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 Demo() {
  const session = useSession(TOKEN_SOURCE);

  return (
    <AgentSessionProvider session={session}>
      <AgentControlBar
        variant={{variant}}
        isChatOpen={{isChatOpen}}
        isConnected={{isConnected}}
        controls={{controls}}
      />
    </AgentSessionProvider>
  );
}
```

## Features

- Configure which controls are visible: `microphone`, `camera`, `screenShare`, `chat`, and `leave`
- Select from three styles: `default`, `outline`, and `livekit`
- Control chat input visibility with `isChatOpen` and `onIsChatOpenChange`
- Persist user device preferences with `saveUserChoices` (enabled by default)
- Handle device errors

## Installation

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

```

## Props

| Prop name | Type | Default |
| --------- | ---- | ------- |
| `variant?` | enum | `default` |
| `controls?` | AgentControlBarControls | `{
  leave: true,
  microphone: true,
  screenShare: true,
  camera: true,
  chat: true,
}` |
| `saveUserChoices?` | boolean | `true` |
| `isConnected?` | boolean | – |
| `isChatOpen?` | boolean | – |
| `onDisconnect?` | () => void | – |
| `onIsChatOpenChange?` | (open: boolean) => void | – |
| `onDeviceError?` | (error: { source: Source; error: Error; }) => void | – |
| `ref?` | Ref<HTMLDivElement> | – |
| `...props?` | ComponentProps<'div'> | |

---

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

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