Conversation Bar

"use client"

import { ConversationProvider } from "@elevenlabs/react"

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

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

export function ConversationBarDemo() {
  return (
    <ConversationProvider>
      <div className="flex min-h-[200px] w-full items-center justify-center">
        <div className="w-full max-w-md">
          <ConversationBar agentId={DEFAULT_AGENT.agentId} />
        </div>
      </div>
    </ConversationProvider>
  )
}

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://ui.zgi.ai/r/conversation-bar.json
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-primary"
  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 realtime voice agents via WebRTC for live 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 the @elevenlabs/react package for the default conversation provider integration
• 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