Components
Loading preview...
Here is Conversation Bar component
@ElevenLabs
npx shadcn@latest add https://21st.dev/r/ElevenLabs/conversation-bar"use client"
import { ConversationBar } from "@/components/ui/conversation-bar"
const DEFAULT_AGENT = {
agentId: import.meta.env.VITE_ELEVENLABS_AGENT_ID || "stub-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>
)
}