Agent Session View - 01 | LiveKit Documentation

Usage

Agent is listening, ask it a question

'use client';

import { useSession } from '@livekit/components-react';
import { TokenSource } from '@/lib/token-source';
import { AgentSessionProvider } from '@/components/agents-ui/agent-session-provider';
import { AgentSessionView } from '@/components/agents-ui/blocks/agent-session-view-01/agent-session-view';

const TOKEN_SOURCE = TokenSource.sandboxTokenServer(
  process.env.NEXT_PUBLIC_SANDBOX_TOKEN_SERVER_ID
);

export default function Demo() {
  const session = useSession(TOKEN_SOURCE);

  return (
    <AgentSessionProvider session={session}>
      <AgentSessionView
        isPreConnectBufferEnabled="true"
        preConnectMessage="Agent is listening, ask it a question"
        supportsChatInput={true}
        supportsVideoInput={true}
        supportsScreenShare={true}
        audioVisualizerType="aura"
        audioVisualizerColor={undefined}
        audioVisualizerColorShift={0.3}
        audioVisualizerBarCount={5}
        audioVisualizerGridRowCount={25}
        audioVisualizerGridColumnCount={25}
        audioVisualizerRadialBarCount={25}
        audioVisualizerRadialRadius={100}
        audioVisualizerWaveLineWidth={3}
      />
    </AgentSessionProvider>
  );
}

Features

Render a complete agent session surface with transcript and controls.
Toggle chat, camera, and screen share support in the control bar.
Show a pre-connect shimmer prompt before the first message arrives.
Configure multiple audio visualizer styles and variant-specific options.
Pass a custom className to extend layout styling.

Installation

pnpm dlx shadcn@latest add @agents-ui/agent-session-view-01

Props

Prop name	Type	Default
ref?	Ref<HTMLElement>	–
className?	string	–
themeMode?	enum	–
preConnectMessage?	string	Agent is listening, ask it a question
supportsChatInput?	boolean	true
supportsVideoInput?	boolean	true
supportsScreenShare?	boolean	true
isPreConnectBufferEnabled?	boolean	true
audioVisualizerType?	enum	–
audioVisualizerColor?	`#${string}`	–
audioVisualizerColorShift?	number	–
audioVisualizerBarCount?	number	–
audioVisualizerGridRowCount?	number	–
audioVisualizerGridColumnCount?	number	–
audioVisualizerRadialBarCount?	number	–
audioVisualizerRadialRadius?	number	–
audioVisualizerWaveLineWidth?	number	–