Customer Support
<!-- eslint-disable no-console -->
<script setup lang="ts">
import { ConversationBar } from '@/components/elevenlabs-ui/conversation-bar'
const agentId = globalThis._importMeta_.env.VITE_ELEVENLABS_AGENT_ID
const handleConnect = () => console.log('Connected')
const handleDisconnect = () => console.log('Disconnected')
const handleMessage = (msg: any) => console.log('Message:', msg)
const handleError = (err: any) => console.error('Error:', err)
</script>
<template>
<div class="flex w-full items-center justify-center">
<div class="w-full max-w-md">
<ConversationBar
:agent-id="agentId"
@connect="handleConnect"
@disconnect="handleDisconnect"
@message="handleMessage"
@error="handleError"
/>
</div>
</div>
</template>Installation
pnpm dlx elevenlabs-ui-vue@latest add conversation-bar
Usage
This component requires an ElevenLabs Agent ID. Create your agent here.
import { ConversationBar } from "@/components/elevenlabs-ui/conversation-bar"Basic Usage
<ConversationBar
:agent-id="your-agent-id"
@connect="console.log('Connected')"
@disconnect="console.log('Disconnected')"
@message="(message) => console.log('Message:', message)"
@error="(error) => console.error('Error:', error)"
/>With Custom Styling
<ConversationBar
:agent-id="your-agent-id"
class="max-w-2xl"
waveformClass="bg-gradient-to-r from-blue-500 to-purple-500"
@connect="console.log("Connected")"
/>API Reference
ConversationBar
A complete voice conversation interface with WebRTC support, microphone controls, text input, and real-time waveform visualization.
Props
| Prop | Type | Description |
|---|---|---|
| agentId | string | Required. ElevenLabs Agent ID to connect to |
| class | string | Optional CSS classes for the container |
| waveformClass | string | Optional CSS classes for the waveform |
Emits
| Event | Type | Description |
|---|---|---|
| connect | () => void | Callback when conversation connects |
| disconnect | () => void | Callback when conversation disconnects |
| error | (error: Error) => void | Callback when an error occurs |
| message | (message: { source: "user" | "ai"; message: string }) => void | Callback when a message is received |
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
Notes
- Uses WebRTC for real-time audio streaming
- Automatically requests microphone permissions when starting a conversation
- Cleans up media streams on component unmount
- Text input sends contextual updates to the agent while typing
- The waveform visualizes microphone input in real-time when connected and unmuted