Discussions

Hello everyone! I'm trying to integrate the HeyGen Streaming Avatar SDK into my Next.js project, but keep running into a 400 error when attempting to start a session. The browser console shows:

api.heygen.com/v1/streaming.new:1 
Failed to load resource: the server responded with a status of 400 ()

[AvatarSDK] Failed to start session: APIError: API request failed with status 400
    at new APIError (index.esm.js:246:28)
    at ...

In my logs, I can see that the token endpoint (/api/heygen/token) is returning a 200 OK along with a token. However, once the front end tries to actually create the streaming session, it hits a 400. Here’s the relevant part of the logs:

 [Token API] HeyGen response: {
  status: 200,
  statusText: 'OK',
  body: '{"error": null, "data": {"token": "..."}}
}
 [Token API] Got token: eyJ0b2tlbi...

But then the JavaScript console says:

[AvatarSDK] Failed to start session: APIError: API request failed with status 400
[Page] initializeAvatar error: APIError: API request failed with status 400

What I’ve Tried

1. Ensured HEYGEN_API_KEY is set correctly in my .env.local.
2. Double-checked that I’m using the correct endpoint (https://api.heygen.com/v1/streaming.create_token) to retrieve the streaming token.
3. Used a publicly available avatar ID (e.g., '73c84e2b886940099c5793b085150f2f' or 'Santa_Fireplace_Front_public') in createStartAvatar.
4. Reduced quality to AvatarQuality.Low in case of plan restrictions.
5. Printed out the response from my token request to confirm it’s returning valid JSON with a "token" key.

Snippet of My avatarClient.ts

import StreamingAvatar from '@heygen/streaming-avatar';
import { TaskType, StreamingEvents, AvatarQuality } from '@heygen/streaming-avatar';

let avatar: StreamingAvatar | null = null;

export async function startAvatarSession(token: string): Promise<void> {
  try {
    avatar = new StreamingAvatar({ token });

    avatar.on(StreamingEvents.STREAM_READY, (evt: CustomEvent) => {
      console.log('[AvatarSDK] STREAM_READY event:', evt.detail);
    });
    avatar.on(StreamingEvents.STREAM_DISCONNECTED, () => {
      console.warn('[AvatarSDK] stream disconnected');
    });

    // Attempting to create and start the avatar session
    const sessionInfo = await avatar.createStartAvatar({
      avatarName: '73c84e2b886940099c5793b085150f2f', 
      quality: AvatarQuality.Low,
    });
    console.log('[AvatarSDK] Session started. Info:', sessionInfo);
  } catch (err) {
    console.error('[AvatarSDK] Failed to start session:', err);
    throw err;
  }
}

export async function speakText(text: string) {
  if (!avatar) {
    console.warn('[AvatarSDK] speakText called but no avatar session exists');
    return;
  }
  await avatar.speak({ text, taskType: TaskType.REPEAT });
}

Questions / Theories

• Am I using the correct endpoint for generating my token and setting up the streaming session?
• Does the avatarName need to be something specific for my plan or environment?
• Is there a different parameter or field I need to include for the streaming avatar to work properly?

Any insights would be greatly appreciated. Thanks in advance for your help!

Additional Info:

• SDK Version: "@heygen/streaming-avatar": "^2.0.8"
• Framework: Next.js 15.1.3 (app router)
• Node: 18.x
• HeyGen API Key: Placed in process.env.HEYGEN_API_KEY
• Token Endpoint: POST /v1/streaming.create_token (which returns a JSON containing {"data": {"token": ...}})

If you need more details or a full reproduction, let me know!