Voice Agent UI

Voice Agent

Interactive grid-based voice assistant interface with multiple state visualizers.

Live Simulation >>

[Preview]

[Usage]

import { VoiceAgent } from '@unbrn/ui/VoiceAgent';

export default function Example() {
  return (
    <VoiceAgent
      status="speaking"
      onMuteToggle={() => console.log('Muted')}
      onDisconnect={() => console.log('Hangup')}
    />
  );
}

Examples

Agent Statuses

The voice agent supports 5 statuses: idle, connecting, listening, speaking, and paused.

Speaking Patterns

Choose from three distinct visualization algorithms: blob, wave, and ripple.

Colors

Custom color accents support any valid CSS color property (Hex, RGB, HSL, presets).

This voice agent component is the part of Unbrn/UI considered to be supporting and contributing to our project.

Github >>