DEV Community

Cover image for 🤖 Voice Agent UI
𝕱𝖑𝖆𝖒𝖊
𝕱𝖑𝖆𝖒𝖊

Posted on

🤖 Voice Agent UI

Voice Agent

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

Live Simulation >>

[Preview]

Preview

[Usage]

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

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

Examples

Agent Statuses

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

Agent Statuses Preview

Speaking Patterns

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

Speaking Patterns Preview

Colors

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

Colors Preview


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

Github >>

Top comments (0)