HeyGen Interactive Avatar NextJS Demo

This is a sample project and was bootstrapped using NextJS. Feel free to play around with the existing code and please leave any feedback for the SDK here.

Getting Started FAQ

Setting up the demo

1. Clone this repo

2. Navigate to the repo folder in your terminal

3. Run npm install (assuming you have npm installed. If not, please follow these instructions: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm/)

4. Enter your HeyGen Enterprise API Token or Trial Token in the .env file. Replace HEYGEN_API_KEY with your API key. This will allow the Client app to generate secure Access Tokens with which to create interactive sessions.

   You can retrieve either the API Key or Trial Token by logging in to HeyGen and navigating to this page in your settings: [https://app.heygen.com/settings?nav=API]. NOTE: use the trial token if you don't have an enterprise API token yet.

5. (Optional) If you would like to use the OpenAI features, enter your OpenAI Api Key in the .env file.

6. Run npm run dev

Using the API Key

Every HeyGen user receives 10 free API Credits when they sign up for HeyGen. You can access your HeyGen API Key at https://app.heygen.com/settings?nav=API

To see the different amounts of credits that are consumed by different endpoints of the API, visit the Limits page of the API documentation: https://docs.heygen.com/reference/limits

To add more API credits, subscribe to one of HeyGen's API Plans. Pricing and details can be found at https://www.heygen.com/api-pricing

Starting sessions

NOTE: Make sure you have enter your token into the .env file and run npm run dev.

To start your 'session' with a Interactive Avatar, first click the 'start' button. If your HeyGen API key is entered into the Server's .env file, then you should see our demo Interactive Avatar (Monica!) appear.

After you see Monica appear on the screen, you can enter text into the input labeled 'Repeat', and then hit Enter. The Interactive Avatar will say the text you enter.

If you want to see a different Avatar or try a different voice, you can close the session and enter the IDs and then 'start' the session again. Please see below for information on where to retrieve different Avatar and voice IDs that you can use.

Which Avatars can I use with this project?

By default, there are several Public Avatars that can be used in Interactive Avatar. (AKA Interactive Avatars.) You can find the Avatar IDs for these Public Avatars by navigating to app.heygen.com/interactive-avatar and clicking 'Select Avatar' and copying the avatar id.

In order to use a private Avatar created under your own account in Interactive Avatar, it must be upgraded to be a Interactive Avatar. Only 1. Finetune Instant Avatars and 2. Studio Avatars are able to be upgraded to Interactive Avatars. This upgrade is a one-time fee and can be purchased by navigating to [app.heygen.com/interactive-avatar] and clicking 'Select Avatar'.

Please note that Photo Avatars are not compatible with Interactive Avatar and cannot be used.

Where can I read more about enterprise-level usage of the Interactive Avatar API?

Please read our Interactive Avatar 101 article for more information on pricing and how to increase your concurrent session limit: https://help.heygen.com/en/articles/9182113-interactive-avatar-101-your-ultimate-guide