Skip to main content

Agent Track Control

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

Usage

Code
'use client';
import { useSession, useVoiceAssistant } from '@livekit/components-react';
import { AgentSessionProvider } from '@/components/agents-ui/agent-session-provider';
const TOKEN_SOURCE = TokenSource.sandboxTokenServer(
process.env.NEXT_PUBLIC_ SANDBOX_TOKEN_SERVER_ID
);
export function Demo() {
const { audioTrack } = useVoiceAssistant();
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="default"
source="microphone"
pending=false
pressed=false
disabled=false
// 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

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

Props

Prop nameTypeDefault
kind
enum
source
enum
pressed?
boolean
pending?
boolean
disabled?
boolean
className?
string
audioTrack?
TrackReferenceOrPlaceholder
onPressedChange?
function
onMediaDeviceError?
function
onActiveDeviceChange?
function