From 5dd015702898fa5d3117a3ba77f8025a50e7042b Mon Sep 17 00:00:00 2001 From: Jonatan von Martens Date: Tue, 30 Sep 2025 11:05:34 +0200 Subject: [PATCH 1/4] feat: update nextjs example - Update to new orb component - Improve button interactivity - Update dependencies --- .../nextjs/app/api/signed-url/route.ts | 6 +- .../nextjs/components/Code.tsx | 5 - .../nextjs/components/ConvAI.tsx | 47 +- .../nextjs/components/ui/orb.tsx | 493 ++ .../nextjs/package-lock.json | 7623 +++++++++++++++++ .../conversational-ai/nextjs/package.json | 16 +- 6 files changed, 8159 insertions(+), 31 deletions(-) delete mode 100644 examples/conversational-ai/nextjs/components/Code.tsx create mode 100644 examples/conversational-ai/nextjs/components/ui/orb.tsx create mode 100644 examples/conversational-ai/nextjs/package-lock.json diff --git a/examples/conversational-ai/nextjs/app/api/signed-url/route.ts b/examples/conversational-ai/nextjs/app/api/signed-url/route.ts index 36913146..f387aba8 100644 --- a/examples/conversational-ai/nextjs/app/api/signed-url/route.ts +++ b/examples/conversational-ai/nextjs/app/api/signed-url/route.ts @@ -6,8 +6,12 @@ export async function GET() { if (!agentId) { throw Error("AGENT_ID is not set"); } + const apiKey = process.env.XI_API_KEY; + if (!apiKey) { + throw Error("XI_API_KEY is not set"); + } try { - const client = new ElevenLabsClient(); + const client = new ElevenLabsClient({ apiKey }); const response = await client.conversationalAi.getSignedUrl({ agent_id: agentId, }); diff --git a/examples/conversational-ai/nextjs/components/Code.tsx b/examples/conversational-ai/nextjs/components/Code.tsx deleted file mode 100644 index 54d6bdbb..00000000 --- a/examples/conversational-ai/nextjs/components/Code.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import {PropsWithChildren} from "react"; - -export function Code({children}: PropsWithChildren) { - return {children} -} \ No newline at end of file diff --git a/examples/conversational-ai/nextjs/components/ConvAI.tsx b/examples/conversational-ai/nextjs/components/ConvAI.tsx index e6f0d88c..6b7639c2 100644 --- a/examples/conversational-ai/nextjs/components/ConvAI.tsx +++ b/examples/conversational-ai/nextjs/components/ConvAI.tsx @@ -4,8 +4,9 @@ import { Button } from "@/components/ui/button"; import * as React from "react"; import { useCallback } from "react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; -import { useConversation } from "@11labs/react"; -import { cn } from "@/lib/utils"; +import { useConversation } from "@elevenlabs/react"; +import { Orb } from "@/components/ui/orb"; + async function requestMicrophonePermission() { try { @@ -40,7 +41,7 @@ export function ConvAI() { }, onMessage: message => { console.log(message); - }, + } }); async function startConversation() { @@ -50,20 +51,37 @@ export function ConvAI() { return; } const signedUrl = await getSignedUrl(); - const conversationId = await conversation.startSession({ signedUrl }); + const conversationId = await conversation.startSession({ + signedUrl + }); console.log(conversationId); } + const stopConversation = useCallback(async () => { await conversation.endSession(); }, [conversation]); + + function getAgentState() { + if (conversation.status === "connected" && conversation.isSpeaking) { + return "talking"; + } + if (conversation.status === "connected") { + return "listening"; + } + if (conversation.status === "disconnected") { + return null; + } + return null; + } + return ( -
+
- + {conversation.status === "connected" ? conversation.isSpeaking ? `Agent is speaking` @@ -71,24 +89,15 @@ export function ConvAI() { : "Disconnected"} -
-
+
+