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 (<AgentTrackControlvariant="default"source="microphone"pending=falsepressed=falsedisabled=false// provide audioTrack to render an audio visualizeraudioTrack={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, andxl - Select from three styles:
default,outline, andlivekit - 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 | – |