conversation-bar-demo

PreviousNext

Preview

Loading preview…
examples/conversation-bar-demo.tsx
"use client"

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

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

export default 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

npx shadcn@latest add @elevenlabs-ui/conversation-bar-demo

Usage

import { ConversationBarDemo } from "@/components/conversation-bar-demo"
<ConversationBarDemo />