feat: integrate agent-session-view block (#321)

Author: thomasyuill-livekit

app-config.ts

@@ -17,12 +17,12 @@ export interface AppConfig {
   audioVisualizerType?: 'bar' | 'wave' | 'grid' | 'radial' | 'aura';
   audioVisualizerColor?: `#${string}`;
   audioVisualizerColorDark?: `#${string}`;
+  audioVisualizerColorShift?: number;
   audioVisualizerBarCount?: number;
   audioVisualizerGridRowCount?: number;
   audioVisualizerGridColumnCount?: number;
   audioVisualizerRadialBarCount?: number;
   audioVisualizerRadialRadius?: number;
-  audioVisualizerAuraColorShift?: number;
   audioVisualizerWaveLineWidth?: number;
 
   // agent dispatch configuration
@@ -49,9 +49,10 @@ export const APP_CONFIG_DEFAULTS: AppConfig = {
   startButtonText: 'Start call',
 
   // optional: audio visualization configuration
+  // audioVisualizerType: 'bar',
   // audioVisualizerColor: '#002cf2',
   // audioVisualizerColorDark: '#1fd5f9',
-  // audioVisualizerType: 'bar',
+  // audioVisualizerColorShift: 0.3,
   // audioVisualizerBarCount: 5,
   // audioVisualizerType: 'radial',
   // audioVisualizerRadialBarCount: 24,
@@ -62,7 +63,6 @@ export const APP_CONFIG_DEFAULTS: AppConfig = {
   // audioVisualizerType: 'wave',
   // audioVisualizerWaveLineWidth: 3,
   // audioVisualizerType: 'aura',
-  // audioVisualizerAuraColorShift: 0.3,
 
   // agent dispatch configuration
   agentName: process.env.AGENT_NAME ?? undefined,

app/api/connection-details/route.ts app/api/token/route.tsapp/api/connection-details/route.ts renamed to app/api/token/route.ts

@@ -18,6 +18,12 @@ const LIVEKIT_URL = process.env.LIVEKIT_URL;
 export const revalidate = 0;
 
 export async function POST(req: Request) {
+  if (process.env.NODE_ENV !== 'development') {
+    throw new Error(
+      'THIS API ROUTE IS INSECURE. DO NOT USE THIS ROUTE IN PRODUCTION WITHOUT AN AUTHENTICATION LAYER.'
+    );
+  }
+
   try {
     if (LIVEKIT_URL === undefined) {
       throw new Error('LIVEKIT_URL is not defined');
@@ -29,9 +35,10 @@ export async function POST(req: Request) {
       throw new Error('LIVEKIT_API_SECRET is not defined');
     }
 
-    // Parse agent configuration from request body
+    // Parse room config from request body.
     const body = await req.json();
-    const agentName: string = body?.room_config?.agents?.[0]?.agent_name;
+    // Recreate the RoomConfiguration object from JSON object.
+    const roomConfig = RoomConfiguration.fromJson(body?.room_config, { ignoreUnknownFields: true });
 
     // Generate participant token
     const participantName = 'user';
@@ -41,15 +48,15 @@ export async function POST(req: Request) {
     const participantToken = await createParticipantToken(
       { identity: participantIdentity, name: participantName },
       roomName,
-      agentName
+      roomConfig
     );
 
     // Return connection details
     const data: ConnectionDetails = {
       serverUrl: LIVEKIT_URL,
       roomName,
-      participantToken: participantToken,
       participantName,
+      participantToken,
     };
     const headers = new Headers({
       'Cache-Control': 'no-store',
@@ -66,7 +73,7 @@ export async function POST(req: Request) {
 function createParticipantToken(
   userInfo: AccessTokenOptions,
   roomName: string,
-  agentName?: string
+  roomConfig: RoomConfiguration
 ): Promise<string> {
   const at = new AccessToken(API_KEY, API_SECRET, {
     ...userInfo,
@@ -81,10 +88,8 @@ function createParticipantToken(
   };
   at.addGrant(grant);
 
-  if (agentName) {
-    at.roomConfig = new RoomConfiguration({
-      agents: [{ agentName }],
-    });
+  if (roomConfig) {
+    at.roomConfig = roomConfig;
   }
 
   return at.toJwt();

components/agents-ui/agent-audio-visualizer-aura.tsx

@@ -8,6 +8,18 @@ import { ReactShaderToy } from '@/components/agents-ui/react-shader-toy';
 import { useAgentAudioVisualizerAura } from '@/hooks/agents-ui/use-agent-audio-visualizer-aura';
 import { cn } from '@/lib/shadcn/utils';
 
+/**
+ * @license
+ *
+ * Originally developed for Unicorn Studio
+ * https://unicorn.studio
+ *
+ * Licensed under the Polyform Non-Resale License 1.0.0
+ * https://polyformproject.org/licenses/non-resale/1.0.0/
+ *
+ * © 2026 UNCRN LLC
+ */
+
 const DEFAULT_COLOR = '#1FD5F9';
 
 function hexToRgb(hexColor: string) {
@@ -236,10 +248,10 @@ interface AuraShaderProps {
   blur?: number;
 
   /**
-   * Color of the aura
+   * Color of the aura in hexidecimal format.
    * @default '#1FD5F9'
    */
-  color?: string;
+  color?: `#${string}`;
 
   /**
    * Color variation across layers (0-1)
@@ -361,10 +373,10 @@ export interface AgentAudioVisualizerAuraProps {
    */
   state?: AgentState;
   /**
-   * The color of the aura in hex format.
+   * The color of the aura in hexidecimal format.
    * @defaultValue '#1FD5F9'
    */
-  color?: string;
+  color?: `#${string}`;
   /**
    * The color shift of the aura.
    * @defaultValue 0.05
@@ -428,11 +440,7 @@ export function AgentAudioVisualizerAura({
       amplitude={amplitude}
       frequency={frequency}
       brightness={brightness}
-      className={cn(
-        AgentAudioVisualizerAuraVariants({ size }),
-        'overflow-hidden rounded-full',
-        className
-      )}
+      className={cn(AgentAudioVisualizerAuraVariants({ size }), className)}
       {...props}
     />
   );

components/agents-ui/agent-audio-visualizer-bar.tsx

@@ -46,7 +46,7 @@ function cloneSingleChild(
 export const AgentAudioVisualizerBarElementVariants = cva(
   [
     'rounded-full transition-colors duration-250 ease-linear',
-    'bg-transparent data-[lk-highlighted=true]:bg-current',
+    'bg-current/10 data-[lk-highlighted=true]:bg-current',
   ],
   {
     variants: {
@@ -93,6 +93,10 @@ export interface AgentAudioVisualizerBarProps {
    * @defaultValue 'connecting'
    */
   state?: AgentState;
+  /**
+   * The color of the bars in hexidecimal format.
+   */
+  color?: `#${string}`;
   /**
    * The number of bars to display in the visualizer.
    * If not provided, defaults based on size: 3 for 'icon'/'sm', 5 for others.
@@ -132,10 +136,12 @@ export interface AgentAudioVisualizerBarProps {
 export function AgentAudioVisualizerBar({
   size = 'md',
   state = 'connecting',
+  color,
   barCount,
   audioTrack,
   className,
   children,
+  style,
   ...props
 }: AgentAudioVisualizerBarProps &
   VariantProps<typeof AgentAudioVisualizerBarVariants> &
@@ -192,6 +198,7 @@ export function AgentAudioVisualizerBar({
   return (
     <div
       data-lk-state={state}
+      style={{ ...style, color } as CSSProperties}
       className={cn(AgentAudioVisualizerBarVariants({ size }), className)}
       {...props}
     >

components/agents-ui/agent-audio-visualizer-grid.tsx

@@ -198,6 +198,10 @@ export type AgentAudioVisualizerGridProps = GridOptions & {
    * @defaultValue 'connecting'
    */
   state?: AgentState;
+  /**
+   * The color of the grid cells in hexidecimal format.
+   */
+  color?: `#${string}`;
   /**
    * The audio track to visualize. Can be a local/remote audio track or a track reference.
    */
@@ -235,6 +239,7 @@ export function AgentAudioVisualizerGrid({
   size = 'md',
   state = 'connecting',
   radius,
+  color,
   rowCount: _rowCount = 5,
   columnCount: _columnCount = 5,
   interval = 100,
@@ -266,7 +271,9 @@ export function AgentAudioVisualizerGrid({
     <div
       data-lk-state={state}
       className={cn(AgentAudioVisualizerGridVariants({ size }), className)}
-      style={{ ...style, gridTemplateColumns: `repeat(${columnCount}, 1fr)` }}
+      style={
+        { ...style, gridTemplateColumns: `repeat(${columnCount}, 1fr)`, color } as CSSProperties
+      }
       {...props}
     >
       {items.map((idx) => (

components/agents-ui/agent-audio-visualizer-radial.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { type ComponentProps, useMemo } from 'react';
+import { type CSSProperties, type ComponentProps, useMemo } from 'react';
 import { type VariantProps, cva } from 'class-variance-authority';
 import { type LocalAudioTrack, type RemoteAudioTrack } from 'livekit-client';
 import {
@@ -19,7 +19,7 @@ export const AgentAudioVisualizerRadialVariants = cva(
     '**:data-lk-index:rounded-full **:data-lk-index:transition-colors **:data-lk-index:duration-150 **:data-lk-index:ease-linear **:data-lk-index:data-[lk-highlighted=true]:bg-current',
     'has-data-[lk-state=connecting]:**:data-lk-index:duration-300',
     'has-data-[lk-state=initializing]:**:data-lk-index:duration-300',
-    'has-data-[lk-state=listening]:**:data-lk-index:duration-300 has-data-[lk-state=listening]:**:data-lk-index:duration-300',
+    'has-data-[lk-state=listening]:**:data-lk-index:duration-300',
     'has-data-[lk-state=thinking]:animate-spin has-data-[lk-state=thinking]:[animation-duration:5s] has-data-[lk-state=thinking]:**:data-lk-index:bg-current',
   ],
   {
@@ -52,6 +52,10 @@ export interface AgentAudioVisualizerRadialProps {
    * @defaultValue 'connecting'
    */
   state?: AgentState;
+  /**
+   * The color of the radial bars in hexidecimal format.
+   */
+  color?: `#${string}`;
   /**
    * The radius (distance from center) for the radial bars.
    * If not provided, defaults based on size.
@@ -93,10 +97,12 @@ export interface AgentAudioVisualizerRadialProps {
 export function AgentAudioVisualizerRadial({
   size = 'md',
   state = 'connecting',
+  color,
   radius,
   barCount,
   audioTrack,
   className,
+  style,
   ...props
 }: AgentAudioVisualizerRadialProps &
   ComponentProps<'div'> &
@@ -175,6 +181,7 @@ export function AgentAudioVisualizerRadial({
     <div
       data-lk-state={state}
       className={cn(AgentAudioVisualizerRadialVariants({ size }), 'relative', className)}
+      style={{ ...style, color } as CSSProperties}
       {...props}
     >
       {bands.map((band, idx) => {