Features
- Voice Input: Connect to ElevenLabs agents via WebRTC for real-time voice conversations
- Text Input: Expandable keyboard input with contextual updates
- Microphone Controls: Mute/unmute toggle with visual feedback
- Live Waveform: Real-time audio visualization during conversations
- Connection States: Visual feedback for disconnected, connecting, connected, and disconnecting states
- Keyboard Shortcuts: Enter to send messages, Shift+Enter for new lines
- Responsive Design: Works seamlessly across desktop and mobile devices
Usage
This component requires an ElevenLabs Agent ID. Create your agent here.
import { ConversationBar } from "@/components/ui/conversation-bar";
Basic Usage
<ConversationBar
agentId="your-agent-id"
onConnect={() => console.log("Connected")}
onDisconnect={() => console.log("Disconnected")}
onMessage={(message) => console.log("Message:", message)}
onError={(error) => console.error("Error:", error)}
/>
With Custom Styling
<ConversationBar
agentId="your-agent-id"
className="max-w-2xl"
waveformClassName="bg-gradient-to-r from-blue-500 to-purple-500"
onConnect={() => console.log("Connected")}
/>
Connected examples use ElevenLabs services. Configure the demonstrated server action or token endpoint and agent settings in the host application. Keep API keys on the server; service usage is separate from the MIT-licensed UI.
Microphone input requires a secure browser context and user permission. Provide a usable permission-denied state.
