Updated code

README.md

@@ -11,7 +11,7 @@ Install deps and build the UI:
 mv env.example .env.development.local
 yarn 
 yarn run build
-
+yarn dev
 ```
 
 Navigate to https://localhost:5173
@@ -24,7 +24,11 @@ Name of your bot e.g. "Simple Chatbot" (shown in HTML and intro)
 
 `VITE_SERVER_URL`
 
-A server URL to trigger when starting a session (e.g. a Pipecat bot_runner) that instantiates a new agent at the specified room URL.  Note: If this is not set, the app will assume you will manually start your bot at the same room URL (and show a warning on the config screen in dev mode.)
+A server URL to trigger when starting a session (e.g. your Cerebrium function) that instantiates a new agent at the specified room URL.  Note: If this is not set, the app will assume you will manually start your bot at the same room URL (and show a warning on the config screen in dev mode.)
+
+`VITE_SERVER_AUTH`
+
+The JWT token that authenticates your request to your cerebrium endpoint
 
 `VITE_MANUAL_ROOM_ENTRY`
 

env.example

@@ -1,5 +1,6 @@
 VITE_APP_TITLE=Simple Chatbot
 VITE_SERVER_URL=... #optional: if serving frontend externally from backend, or requesting agent from API
+VITE_SERVER_AUTH
 VITE_MANUAL_ROOM_ENTRY=... #optional: require user to specify a room URL to join 
 VITE_OPEN_MIC= # Can the user speak freely, or do they need to wait their turn? 
 VITE_USER_VIDEO= #Does the app require the user's webcam?

src/App.tsx

@@ -35,6 +35,7 @@ const status_text = {
 
 // Server URL (ensure trailing slash)
 let serverUrl = import.meta.env.VITE_SERVER_URL;
+let serverAuth = import.meta.env.VITE_SERVER_AUTH;
 if (serverUrl && !serverUrl.endsWith("/")) serverUrl += "/";
 
 // Auto room creation (requires server URL)
@@ -43,7 +44,7 @@ const autoRoomCreation = import.meta.env.VITE_MANUAL_ROOM_ENTRY ? false : true;
 // Query string for room URL
 const roomQs = new URLSearchParams(window.location.search).get("room_url");
 const checkRoomUrl = (url: string | null): boolean =>
-  !!(url && /^(https?:\/\/[^.]+(\.staging)?\.daily\.co\/[^/]+)$/.test(url));
+  !!(url && /^(https?:\/\/[^.]+\.daily\.co\/[^/]+)$/.test(url));
 
 // Show config options
 const showConfigOptions = import.meta.env.VITE_SHOW_CONFIG;
@@ -84,8 +85,22 @@ export default function App() {
       setState("requesting_agent");
 
       try {
-        data = await fetch_start_agent(roomUrl, serverUrl);
-
+        data = await fetch_start_agent(`${serverUrl}create_room`, serverAuth);
+        if (data && !data.errror) {
+          fetch(`${serverUrl}main`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${serverAuth}`
+            },
+            body: JSON.stringify({
+              room_url: data.result.url,
+              token: data.result.token
+            })
+          }).catch((e) => {
+            console.error(`Failed to make request to ${serverUrl}/main: ${e}`);
+          });
+        }
         if (data.error) {
           setError(data.detail);
           setState("error");
@@ -103,8 +118,8 @@ export default function App() {
 
     try {
       await daily.join({
-        url: data?.room_url || roomUrl,
-        token: data?.token || "",
+        url: data.result.url || roomUrl,
+        token: data.result.token || "",
         videoSource: false,
         startAudioOff: startAudioOff,
       });

src/actions.ts

@@ -1,13 +1,15 @@
 export const fetch_start_agent = async (
-  roomUrl: string | null,
-  serverUrl: string
+  serverUrl: string,
+  serverAuth: string | null
 ) => {
+  console.log(serverUrl)
   const req = await fetch(`${serverUrl}`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
+      "Authorization": `Bearer ${serverAuth}`
     },
-    body: JSON.stringify({ room_url: roomUrl }),
+    body: JSON.stringify({}),
   });
 
   const data = await req.json();