Use VAPI to make function calls to realtime broadcast endpoint

Author: nfiacco

app/auth/callback/route.ts renamed to app/api/auth/callback/route.ts

@@ -0,0 +1,26 @@
+import { createClient } from "@/utils/supabase/server";
+
+export async function POST(request: Request) {
+  const supabase = createClient();
+  const json = await request.json();
+  const params = json.message.functionCall.parameters;
+  console.log(params);
+
+  supabase.channel(params.channelID).send({
+    type: "broadcast",
+    event: "slide",
+    payload: {
+      slide: params.slide,
+    },
+  });
+
+  return new Response("OK", {
+    status: 200,
+  });
+}
+
+export async function OPTIONS() {
+  return new Response("OK", {
+    status: 200,
+  });
+}

app/api/realtime/broadcast/route.ts

@@ -36,7 +36,7 @@ export default function Login({ searchParams }: { searchParams: { message: strin
       email,
       password,
       options: {
-        emailRedirectTo: `${origin}/auth/callback`,
+        emailRedirectTo: `${origin}/api/auth/callback`,
       },
     });
 

app/login/page.tsx

@@ -8,8 +8,8 @@ export default async function Index() {
         <div className="w-full max-w-4xl flex justify-between items-center p-3 text-sm"></div>
       </nav>
 
-      <div className="animate-in flex-1 flex flex-col gap-20 opacity-0 max-w-4xl px-3">
-        <main className="flex-1 flex flex-col gap-6">
+      <div className="animate-in flex-1 flex flex-col gap-20 opacity-0 w-full max-w-4xl px-3">
+        <main className="flex-1 flex flex-col gap-6 w-full h-full items-center">
           <h2 className="font-bold text-4xl mb-4 text-center">Demo</h2>
           <Demi />
         </main>

app/page.tsx

@@ -15,7 +15,7 @@ export const ActiveCallDetail: React.FC<{
       <div className="flex flex-col items-center justify-center p-4 border border-solid border-[#ddd] rounded-3xl shadow-md w-96 h-48">
         <AssistantSpeechIndicator isSpeaking={assistantIsSpeaking} />
       </div>
-      <div className="flex mt-8 gap-5 justify-center">
+      <div className="flex mt-8 gap-12 justify-center">
         <Button className="rounded-full bg-gray-400 p-3" onClick={onPauseClick}>
           {paused ? <PlayIcon className="h-8" /> : <PauseIcon className="h-8" />}
         </Button>

components/ActiveCallDetail.tsx

@@ -3,11 +3,17 @@
 import { ActiveCallDetail } from "@/components/ActiveCallDetail";
 import { Button } from "@/components/button/Button";
 import { LoadingSpinner } from "@/components/loading/Loading";
-import { AssistantOptions } from "@/utils/vapi/config";
+import { SlideDisplay } from "@/components/slides/Slide";
 import Vapi from "@vapi-ai/web";
 import { useEffect, useState } from "react";
+import { v4 } from "uuid";
 
+const ASSISTANT_ID =
+  process.env.NODE_ENV === "development"
+    ? "e61177f1-25d3-4273-8d5e-649555b9ccb7"
+    : "08d6e6dc-b5ab-4bff-86b9-5126653f56ad";
 const vapi = new Vapi("969bf530-507e-4751-8aec-07b9f8f93020");
+const channelId = v4();
 
 export const Demi: React.FC = () => {
   const [connecting, setConnecting] = useState(false);
@@ -16,6 +22,9 @@ export const Demi: React.FC = () => {
 
   const [assistantIsSpeaking, setAssistantIsSpeaking] = useState(false);
 
+  // TODO: Fetch from server based on URL slug
+  const assistantId = ASSISTANT_ID;
+
   useEffect(() => {
     vapi.on("call-start", () => {
       setConnecting(false);
@@ -39,18 +48,21 @@ export const Demi: React.FC = () => {
       console.error(error);
       setConnecting(false);
     });
-
-    // we only want this to fire on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const startCallInline = () => {
     setConnecting(true);
-    vapi.start(AssistantOptions);
+    vapi.start(assistantId, {
+      variableValues: {
+        channelId: channelId,
+      },
+    });
   };
+
   const endCall = () => {
     vapi.stop();
   };
+
   const pause = () => {
     const audioElements = document.querySelectorAll("audio");
     audioElements.forEach((audio) => {
@@ -60,7 +72,12 @@ export const Demi: React.FC = () => {
     setPaused(true);
     setAssistantIsSpeaking(false);
   };
+
   const unpause = () => {
+    const audioElements = document.querySelectorAll("audio");
+    audioElements.forEach((audio) => {
+      audio.play();
+    });
     vapi.send({
       type: "add-message",
       message: {
@@ -78,7 +95,9 @@ export const Demi: React.FC = () => {
         connecting ? (
           <LoadingSpinner className="mx-auto animate-grow" />
         ) : (
-          <Button onClick={startCallInline}>Start Demo</Button>
+          <Button className="w-40" onClick={startCallInline}>
+            Start Demo
+          </Button>
         )
       ) : (
         <ActiveCallDetail
@@ -88,6 +107,7 @@ export const Demi: React.FC = () => {
           paused={paused}
         />
       )}
+      <SlideDisplay channelID={channelId} />
     </>
   );
 };

components/Demi.tsx

@@ -0,0 +1,36 @@
+"use client";
+import { createClient } from "@/utils/supabase/client";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+
+type Slide = {
+  src: string;
+  alt: string;
+};
+
+export const SlideDisplay: React.FC<{ channelID: string }> = ({ channelID }) => {
+  const [slide, setSlide] = useState<Slide>();
+
+  useEffect(() => {
+    const supabase = createClient();
+    supabase
+      .channel(channelID)
+      .on("broadcast", { event: "slide" }, (message) => {
+        setSlide(message.payload.slide);
+      })
+      .subscribe((status) => {
+        console.log(status);
+        console.log(channelID);
+      });
+  }, [channelID]);
+
+  if (!slide) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-1 relative max-w-screen-sm w-full max-h-[480px] h-full">
+      <Image src={slide.src} alt={slide.alt} width={640} height={360} />
+    </div>
+  );
+};

components/slides/Slide.tsx

@@ -1,4 +1,15 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "via.placeholder.com",
+        port: "",
+        pathname: "/**",
+      },
+    ],
+  },
+};
 
 module.exports = nextConfig;

next.config.js

@@ -21,12 +21,14 @@
     "react-dom": "18.2.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "3.4.1",
-    "typescript": "5.3.3"
+    "typescript": "5.3.3",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@types/node": "20.11.5",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
+    "@types/uuid": "^9.0.8",
     "encoding": "^0.1.13",
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.3"