[Examples] and Nextjs convai demo

examples/conversational-ai-nextjs/convai-demo/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

examples/conversational-ai-nextjs/convai-demo/.gitignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# jetbrains
+.idea

examples/conversational-ai-nextjs/convai-demo/README.md

@@ -0,0 +1,18 @@
+## Conversational AI Demo
+
+Run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+## Learn More
+
+- [Conversational AI Tutorial](https://elevenlabs.io/docs/product/introduction)
+- [Conversational AI SDK](https://elevenlabs.io/docs/libraries/conversational-ai-sdk-js)

examples/conversational-ai-nextjs/convai-demo/app/api/signed-url/route.ts

@@ -0,0 +1,33 @@
+import {NextResponse} from "next/server";
+
+export async function GET() {
+    const agentId = process.env.AGENT_ID
+    const apiKey = process.env.XI_API_KEY
+    if (!agentId) {
+        throw Error('AGENT_ID is not set')
+    }
+    if (!apiKey) {
+        throw Error('XI_API_KEY is not set')
+    }
+    try {
+        const response = await fetch(
+            `https://api.elevenlabs.io/v1/convai/conversation/get_signed_url?agent_id=${agentId}`,
+            {
+                method: 'GET',
+                headers: {
+                    'xi-api-key': apiKey,
+                }
+            }
+        );
+
+        if (!response.ok) {
+            throw new Error('Failed to get signed URL');
+        }
+
+        const data = await response.json();
+        return NextResponse.json({signedUrl: data.signed_url})
+    } catch (error) {
+        console.error('Error:', error);
+        return NextResponse.json({ error: 'Failed to get signed URL' }, { status: 500 });
+    }
+}

examples/conversational-ai-nextjs/convai-demo/app/globals.css

@@ -0,0 +1,138 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    font-family: -apple-system, "system-ui", sans-serif;
+}
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 20 14.3% 4.1%;
+        --card: 0 0% 100%;
+        --card-foreground: 20 14.3% 4.1%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 20 14.3% 4.1%;
+        --primary: 24 9.8% 10%;
+        --primary-foreground: 60 9.1% 97.8%;
+        --secondary: 60 4.8% 95.9%;
+        --secondary-foreground: 24 9.8% 10%;
+        --muted: 60 4.8% 95.9%;
+        --muted-foreground: 25 5.3% 44.7%;
+        --accent: 60 4.8% 95.9%;
+        --accent-foreground: 24 9.8% 10%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 60 9.1% 97.8%;
+        --border: 20 5.9% 90%;
+        --input: 20 5.9% 90%;
+        --ring: 20 14.3% 4.1%;
+        --chart-1: 12 76% 61%;
+        --chart-2: 173 58% 39%;
+        --chart-3: 197 37% 24%;
+        --chart-4: 43 74% 66%;
+        --chart-5: 27 87% 67%;
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 20 14.3% 4.1%;
+        --foreground: 60 9.1% 97.8%;
+        --card: 20 14.3% 4.1%;
+        --card-foreground: 60 9.1% 97.8%;
+        --popover: 20 14.3% 4.1%;
+        --popover-foreground: 60 9.1% 97.8%;
+        --primary: 60 9.1% 97.8%;
+        --primary-foreground: 24 9.8% 10%;
+        --secondary: 12 6.5% 15.1%;
+        --secondary-foreground: 60 9.1% 97.8%;
+        --muted: 12 6.5% 15.1%;
+        --muted-foreground: 24 5.4% 63.9%;
+        --accent: 12 6.5% 15.1%;
+        --accent-foreground: 60 9.1% 97.8%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 60 9.1% 97.8%;
+        --border: 12 6.5% 15.1%;
+        --input: 12 6.5% 15.1%;
+        --ring: 24 5.7% 82.9%;
+        --chart-1: 220 70% 50%;
+        --chart-2: 160 60% 45%;
+        --chart-3: 30 80% 55%;
+        --chart-4: 280 65% 60%;
+        --chart-5: 340 75% 55%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+
+/* Orb Styling */
+.orb {
+    width: 180px;
+    height: 180px;
+    border-radius: 50%;
+    position: relative;
+    overflow: hidden;
+}
+
+.animate-orb {
+    animation: wave 0.4s infinite ease-in-out;
+}
+
+.animate-orb-slow {
+    animation: wave 2s infinite ease-in-out;
+}
+
+.orb-active {
+    background: radial-gradient(circle at center, #c7c7c7, #908e8e, #595959);
+}
+
+.orb-inactive {
+    background: radial-gradient(circle at center,
+    rgba(200, 200, 200, 0.8),
+    rgba(150, 150, 150, 0.6),
+    rgba(100, 100, 100, 0.4));
+}
+
+/* Inner Gradient Layer for Waving Effect */
+.orb::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+
+    border-radius: 50%;
+    animation: wave-motion 6s infinite linear;
+}
+
+/* Keyframes for Waving Animation */
+@keyframes wave {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.05);
+    }
+}
+
+@keyframes wave-motion {
+    0% {
+        transform: translate(0, 0) rotate(0deg);
+    }
+    50% {
+        transform: translate(10px, 10px) rotate(180deg);
+    }
+    100% {
+        transform: translate(0, 0) rotate(360deg);
+    }
+}

examples/conversational-ai-nextjs/convai-demo/app/layout.tsx

@@ -0,0 +1,49 @@
+import type {Metadata} from "next";
+import "./globals.css";
+import {BackgroundWave} from "@/components/background-wave";
+import Link from "next/link";
+import {ElevenLabsLogo, GithubLogo} from "@/components/logos";
+
+export const metadata: Metadata = {
+    title: "ConvAI",
+};
+
+export default function RootLayout({children}: Readonly<{ children: React.ReactNode }>) {
+    return (
+        <html lang="en" className={"h-full w-full"}>
+        <body className={`antialiased w-full h-full lex flex-col`}>
+        <div className="flex flex-col flex-grow w-full items-center justify-center sm:px-4">
+            <nav
+                className={
+                    "sm:fixed w-full top-0 left-0 grid grid-cols-2 py-4 px-8"
+                }
+            >
+                <div className={"flex"}>
+                    <Link href={"/"} prefetch={true}>
+                        <ElevenLabsLogo
+                            className={"h-[15px] w-auto hover:text-gray-500"}
+                        />
+                    </Link>
+                </div>
+
+                <div className={"flex gap-4 justify-end"}>
+                    <Link
+                        href="https://github.com/jonatanvm/convai-demo"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className={"py-0.5"}
+                        aria-label="View source on GitHub"
+                    >
+                        <GithubLogo
+                            className={"w-5 h-5 hover:text-gray-500 text-[#24292f]"}
+                        />
+                    </Link>
+                </div>
+            </nav>
+            {children}
+            <BackgroundWave/>
+        </div>
+        </body>
+        </html>
+    );
+}

examples/conversational-ai-nextjs/convai-demo/app/page.tsx

@@ -0,0 +1,12 @@
+import {ConvAI} from "@/components/ConvAI";
+
+export default function Home() {
+    return (
+        <div
+            className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+            <main className="flex flex-col gap-8 row-start-2 items-center">
+                <ConvAI/>
+            </main>
+        </div>
+    );
+}

examples/conversational-ai-nextjs/convai-demo/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "stone",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

examples/conversational-ai-nextjs/convai-demo/components/Code.tsx

@@ -0,0 +1,5 @@
+import {PropsWithChildren} from "react";
+
+export function Code({children}: PropsWithChildren) {
+    return <span className={'border rounded border-gray-700 bg-gray-100 text-gray-600 py-0.5 px-1'}>{children}</span>
+}