Conversation Bar

"use client"

import { ConversationBar } from "@/components/ui/conversation-bar"

const DEFAULT_AGENT = {
  agentId: process.env.NEXT_PUBLIC_ELEVENLABS_AGENT_ID!,
}

export function ConversationBarDemo() {
  return (
    <div className="flex min-h-[200px] w-full items-center justify-center">
      <div className="w-full max-w-md">
        <ConversationBar
          agentId={DEFAULT_AGENT.agentId}
          onConnect={() => console.log("Connected")}
          onDisconnect={() => console.log("Disconnected")}
          onMessage={(message) => console.log("Message:", message)}
          onError={(error) => console.error("Error:", error)}
        />
      </div>
    </div>
  )
}

Installation

pnpmnpmyarnbun
pnpm dlx @elevenlabs/agents-cli@latest components add conversation-bar
Copy

Usage

Copyimport { ConversationBar } from "@/components/ui/conversation-bar"

Basic Usage

Copy<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

Copy<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

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