​
Overview

This quickstart guide will walk you through the process of setting up, authenticating, and implementing a real-time AI Avatar application. By the end of this guide, you’ll have a Interactive AI Avatar that you can interact with.

Prerequisites

​
Installation

Install the VMONSTER SDK in your client application.

npm install vmonster-streaming-js

​
Environment Variables

Create a file named .env and add your VMONSTER API key. For production environment, add your API key to the server side.

.env
VMONSTER_API_KEY=your_api_key

​
Create New Stream

Create a new stream by setting your API key, AI Avatar ID, and language. You can explore various AI Avatars at https://app.vmonster.io/profiles.

const fetchNewStream = async () => {
  const formData = new FormData();
  // Enter the ID of the AI Avatar you want to use.
  formData.append("aiavatar_id", "b9065cba-07ba-4720-8686-69dfca10a94c");
  // Enter the language. The accent and speech pattern will vary based on the language.
  formData.append("language", "en");

  const response = await fetch("https://api.vmonster.io/v1/streams", {
    method: "POST",
    headers: {
      "x-api-key": process.env.VMONSTER_API_KEY,
    },
    body: formData,
  });
  const data = await response.json();
  return data;
};

In a production environment, call the above code from the backend. If you call it from the client side, the API key may be exposed.

​
Join Room

Use the created stream information to join a room.

const { stream_id, token, session_id } = await fetchRoomConfig();
const room = new VmonsterRoom({
  serverUrl: "https://api.vmonster.ai/v1/streaming",
});

room.join({
  sessionId: session_id,
  streamId: stream_id,
  token: token,
});

// When joined to a room, add the AI Avatar's video.
// It will be appended to the element with the ID "aiavatar-video-parent" or to the body.
room.on("joined", () => {
  room.addVideo({
    width: "400px",
    borderRadius: "10px",
  });
});

​
Explore Various AI Avatars

You can explore various AI Avatars at https://app.vmonster.io/profiles.

​
Try Demo

Demo

Learn how to use the VMONSTER SDK by demo.

​
Overview

This quickstart guide will walk you through the process of setting up, authenticating, and implementing a real-time AI Avatar application. By the end of this guide, you’ll have a Interactive AI Avatar that you can interact with.

Prerequisites

​
Installation

Install the VMONSTER SDK in your client application.

npm install vmonster-streaming-js

​
Environment Variables

Create a file named .env and add your VMONSTER API key. For production environment, add your API key to the server side.

.env
VMONSTER_API_KEY=your_api_key

​
Create New Stream

Create a new stream by setting your API key, AI Avatar ID, and language. You can explore various AI Avatars at https://app.vmonster.io/profiles.

const fetchNewStream = async () => {
  const formData = new FormData();
  // Enter the ID of the AI Avatar you want to use.
  formData.append("aiavatar_id", "b9065cba-07ba-4720-8686-69dfca10a94c");
  // Enter the language. The accent and speech pattern will vary based on the language.
  formData.append("language", "en");

  const response = await fetch("https://api.vmonster.io/v1/streams", {
    method: "POST",
    headers: {
      "x-api-key": process.env.VMONSTER_API_KEY,
    },
    body: formData,
  });
  const data = await response.json();
  return data;
};

In a production environment, call the above code from the backend. If you call it from the client side, the API key may be exposed.

​
Join Room

Use the created stream information to join a room.

const { stream_id, token, session_id } = await fetchRoomConfig();
const room = new VmonsterRoom({
  serverUrl: "https://api.vmonster.ai/v1/streaming",
});

room.join({
  sessionId: session_id,
  streamId: stream_id,
  token: token,
});

// When joined to a room, add the AI Avatar's video.
// It will be appended to the element with the ID "aiavatar-video-parent" or to the body.
room.on("joined", () => {
  room.addVideo({
    width: "400px",
    borderRadius: "10px",
  });
});

​
Explore Various AI Avatars

You can explore various AI Avatars at https://app.vmonster.io/profiles.

​
Try Demo

Demo

Learn how to use the VMONSTER SDK by demo.