║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Conversation Bar description: A complete voice conversation interface with microphone controls, text input, and real-time waveform visualization for ElevenLabs agents. featured: true component: true

<ComponentPreview name="conversation-bar-demo" description="A beautiful bar for voice and audio interactions" />

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx @elevenlabs/cli@latest components add conversation-bar

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install @elevenlabs/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="conversation-bar" title="components/ui/conversation-bar.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </CodeTabs>

Usage

<Callout type="info"> This component requires an ElevenLabs Agent ID. [Create your agent here](https://elevenlabs.io/agents?utm_source=ui_elevenlabs&utm_medium=web&utm_campaign=growth_experiments_ui_components). </Callout>

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")}
/>

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 | | className | string | Optional CSS classes for the container | | waveformClassName | string | Optional CSS classes for the waveform | | onConnect | () => void | Callback when conversation connects | | onDisconnect | () => void | Callback when conversation disconnects | | onError | (error: Error) => void | Callback when an error occurs | | onMessage | (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

• Requires the @elevenlabs/react package for conversation management
• 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

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║