AI Agent UIKit

React components for building AI agents with real-time voice and video

npm install agora-agent-uikit

Agent Visualizer

An animated agent visualizer component that displays Lottie animations for different agent states

Listening

Agent State

Size

Code

import { AgentVisualizer } from "agora-agent-uikit"

export function MyComponent() {
  return (
    <AgentVisualizer
      state="listening"
      size="md"
    />
  )
}

// Available states:
// - not-joined, joining, ambient
// - listening, analyzing, talking
// - disconnected

// Available sizes:
// - sm (128px), md (192px), lg (256px)