Agent Track Control | LiveKit Documentation

Usage

'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="default"
      source="microphone"
      pressed={false}
      pending={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 name	Type	Default
kind	enum	–
source	enum	–
pressed?	boolean	–
pending?	boolean	–
disabled?	boolean	–
className?	string	–
audioTrack?	TrackReferenceOrPlaceholder	–
onPressedChange?	function	–
onMediaDeviceError?	function	–
onActiveDeviceChange?	function	–