Merge pull request #60 from HeyGen-Official/update-avatar-sdk

update streaming avatar sdk to 2.0.10, optional api url env

.env

@@ -1 +1,2 @@
-HEYGEN_API_KEY=your Heygen API key
+HEYGEN_API_KEY="your Heygen API key"
+NEXT_PUBLIC_BASE_API_URL=https://api.heygen.com

app/api/get-access-token/route.ts

@@ -5,18 +5,16 @@ export async function POST() {
     if (!HEYGEN_API_KEY) {
       throw new Error("API key is missing from .env");
     }
+    const baseApiUrl = process.env.NEXT_PUBLIC_BASE_API_URL;
 
-    const res = await fetch(
-      "https://api.heygen.com/v1/streaming.create_token",
-      {
-        method: "POST",
-        headers: {
-          "x-api-key": HEYGEN_API_KEY,
-        },
+    const res = await fetch(`${baseApiUrl}/v1/streaming.create_token`, {
+      method: "POST",
+      headers: {
+        "x-api-key": HEYGEN_API_KEY,
       },
-    );
-    const data = await res.json();
+    });
 
+    const data = await res.json();
     return new Response(data.data.token, {
       status: 200,
     });

components/InteractiveAvatar.tsx

@@ -2,7 +2,10 @@ import type { StartAvatarResponse } from "@heygen/streaming-avatar";
 
 import StreamingAvatar, {
   AvatarQuality,
-  StreamingEvents, TaskMode, TaskType, VoiceEmotion,
+  StreamingEvents,
+  TaskMode,
+  TaskType,
+  VoiceEmotion,
 } from "@heygen/streaming-avatar";
 import {
   Button,
@@ -23,7 +26,7 @@ import { useMemoizedFn, usePrevious } from "ahooks";
 
 import InteractiveAvatarTextInput from "./InteractiveAvatarTextInput";
 
-import {AVATARS, STT_LANGUAGE_LIST} from "@/app/lib/constants";
+import { AVATARS, STT_LANGUAGE_LIST } from "@/app/lib/constants";
 
 export default function InteractiveAvatar() {
   const [isLoadingSession, setIsLoadingSession] = useState(false);
@@ -32,7 +35,7 @@ export default function InteractiveAvatar() {
   const [debug, setDebug] = useState<string>();
   const [knowledgeId, setKnowledgeId] = useState<string>("");
   const [avatarId, setAvatarId] = useState<string>("");
-  const [language, setLanguage] = useState<string>('en');
+  const [language, setLanguage] = useState<string>("en");
 
   const [data, setData] = useState<StartAvatarResponse>();
   const [text, setText] = useState<string>("");
@@ -41,6 +44,10 @@ export default function InteractiveAvatar() {
   const [chatMode, setChatMode] = useState("text_mode");
   const [isUserTalking, setIsUserTalking] = useState(false);
 
+  function baseApiUrl() {
+    return process.env.NEXT_PUBLIC_BASE_API_URL;
+  }
+
   async function fetchAccessToken() {
     try {
       const response = await fetch("/api/get-access-token", {
@@ -64,6 +71,7 @@ export default function InteractiveAvatar() {
 
     avatar.current = new StreamingAvatar({
       token: newToken,
+      basePath: baseApiUrl(),
     });
     avatar.current.on(StreamingEvents.AVATAR_START_TALKING, (e) => {
       console.log("Avatar started talking", e);
@@ -109,7 +117,7 @@ export default function InteractiveAvatar() {
       setData(res);
       // default to voice mode
       await avatar.current?.startVoiceChat({
-        useSilencePrompt: false
+        useSilencePrompt: false,
       });
       setChatMode("voice_mode");
     } catch (error) {
@@ -126,9 +134,11 @@ export default function InteractiveAvatar() {
       return;
     }
     // speak({ text: text, task_type: TaskType.REPEAT })
-    await avatar.current.speak({ text: text, taskType: TaskType.REPEAT, taskMode: TaskMode.SYNC }).catch((e) => {
-      setDebug(e.message);
-    });
+    await avatar.current
+      .speak({ text: text, taskType: TaskType.REPEAT, taskMode: TaskMode.SYNC })
+      .catch((e) => {
+        setDebug(e.message);
+      });
     setIsLoadingRepeat(false);
   }
   async function handleInterrupt() {
@@ -137,11 +147,9 @@ export default function InteractiveAvatar() {
 
       return;
     }
-    await avatar.current
-      .interrupt()
-      .catch((e) => {
-        setDebug(e.message);
-      });
+    await avatar.current.interrupt().catch((e) => {
+      setDebug(e.message);
+    });
   }
   async function endSession() {
     await avatar.current?.stopAvatar();
@@ -267,9 +275,7 @@ export default function InteractiveAvatar() {
                   }}
                 >
                   {STT_LANGUAGE_LIST.map((lang) => (
-                    <SelectItem key={lang.key}>
-                      {lang.label}
-                    </SelectItem>
+                    <SelectItem key={lang.key}>{lang.label}</SelectItem>
                   ))}
                 </Select>
               </div>

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@ai-sdk/openai": "^0.0.34",
-    "@heygen/streaming-avatar": "^2.0.9",
+    "@heygen/streaming-avatar": "^2.0.10",
     "@nextui-org/button": "2.0.34",
     "@nextui-org/chip": "^2.0.32",
     "@nextui-org/code": "2.0.29",

pnpm-lock.yaml

@@ -9,8 +9,8 @@ dependencies:
     specifier: ^0.0.34
     version: 0.0.34(zod@3.23.8)
   '@heygen/streaming-avatar':
-    specifier: ^2.0.9
-    version: 2.0.9
+    specifier: ^2.0.10
+    version: 2.0.10
   '@nextui-org/button':
     specifier: 2.0.34
     version: 2.0.34(@nextui-org/system@2.2.1)(@nextui-org/theme@2.2.5)(framer-motion@11.1.1)(react-dom@18.3.1)(react@18.3.1)
@@ -715,8 +715,8 @@ packages:
       tslib: 2.8.1
     dev: false
 
-  /@heygen/streaming-avatar@2.0.9:
-    resolution: {integrity: sha512-9DgUDpXpDbBdD/mU92luSd5FKE433kSVpdLW0uCROlGGcSTdhuaZp4715Z4rgH4wjk9JKoDfUHU2CHs4gb65Lg==}
+  /@heygen/streaming-avatar@2.0.10:
+    resolution: {integrity: sha512-GpLLGGSj+sc8PxrrT9pkmHaN2P8zFoFH4bm0+iIOB+zlfpda9RjQer0gPEe+7AiBlCi83wnCY+KXdPQsrUDRPg==}
     dependencies:
       livekit-client: 2.7.5
       protobufjs: 7.4.0