> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vmonster.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Build your AI Avatar Application in less than 10 minutes

## 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.

<Info>
  **Prerequisites**

  * `npm` or `yarn` package manager
  * [VMONSTER API key](https://app.vmonster.io/api-key)
</Info>

## Installation

Install the VMONSTER SDK in your client application.

<CodeGroup>
  ```bash npm theme={null}
  npm install vmonster-streaming-js 
  ```

  ```bash yarn theme={null}
  yarn add vmonster-streaming-js
  ```
</CodeGroup>

## Environment Variables

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

```text .env theme={null}
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](https://app.vmonster.io/profiles).

```javascript theme={null}
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");
  // [Optional] Set the session duration in seconds. Default is 3600 seconds (1 hour) if not specified.
  formData.append("max_duration_s", 300);

  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.

```javascript theme={null}
const { stream_id, token, session_id } = await fetchRoomConfig();
const room = new VmonsterRoom({
  serverUrl: "https://api.vmonster.io/v1",
});

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](https://app.vmonster.io/profiles).

## Try Demo

<Card title="Demo" icon="window" iconType="regular" href="/pages/demo">
  Learn how to use the VMONSTER SDK by demo.
</Card>