​
Prerequisites

​
Anam API key

If you don’t have your API key or if you need to create a new one, see Get your API key.

​
Installation

Install the SDK in your project 
npm install @anam-ai/js-sdk

​
Basic Usage

The quickest way to start using the SDK is with a local development setup 
import { unsafe_createClientWithApiKey } from "@anam-ai/js-sdk";

const anamClient = unsafe_createClientWithApiKey("YOUR_API_KEY", {
  name: "Cara",
  avatarId: "30fa96d0-26c4-4e55-94a0-517025942e18", // The avatar ID for Cara
  voiceId: "6bfbe25a-979d-40f3-a92b-5394170af54b", // The voice ID for Cara
  llmId: "0934d97d-0c3a-4f33-91b0-5e136a0ef466",
  systemPrompt:
    "[STYLE] Reply in natural speech without formatting. Add pauses using '...' and very occasionally a disfluency. [PERSONALITY] You are Cara, a helpful assistant.",
});

// Start streaming to video and audio elements
await anamClient.streamToVideoAndAudioElements(
  "video-element-id",
  "audio-element-id"
);
This example uses the unsafe_createClientWithApiKey method. This is not recommended for production use as it exposes your API key. See the Usage in Production guide for secure implementation.

​
DOM Elements

This quickstart example requires two DOM elements to stream to:
  • A video element to play the video stream of your persona
  • An audio element to play the voice stream of your persona
For this example we would include the following in our HTML: 
<video id="video-element-id" autoplay playsinline></video>
<audio id="audio-element-id" autoplay></audio>
autoplay is used to start the stream as soon as the page loads. The playsinline attribute prevents the video from being played in fullscreen mode on mobile devices.

​
Full HTML Example

Below is a full html example using the snippets above.
index.html
<!DOCTYPE html>
<html>
  <video id="anamVideo" autoplay muted></video>
  <audio id="anamAudio" autoplay></audio>
  <script src="https://unpkg.com/@anam-ai/js-sdk@2.0.0/dist/umd/anam.js"></script>
  <script>
    const { unsafe_createClientWithApiKey } = window.anam;
    const anamClient = unsafe_createClientWithApiKey("YOUR_API_KEY", {
      name: "Cara",
      avatarId: "30fa96d0-26c4-4e55-94a0-517025942e18", // The avatar ID for Cara
      voiceId: "6bfbe25a-979d-40f3-a92b-5394170af54b", // The voice ID for Cara
      llmId: "0934d97d-0c3a-4f33-91b0-5e136a0ef466",
      systemPrompt:
        "[STYLE] Reply in natural speech without formatting. Add pauses using '...' and very occasionally a disfluency. [PERSONALITY] You are Cara, a helpful assistant.",
    });
    anamClient.streamToVideoAndAudioElements("anamVideo", "anamAudio");
    anamClient.addListener("VIDEO_PLAY_STARTED", () => {
      anamClient.talk("Hello world!");
    });
  </script>
</html>

​
Next Steps

Usage in Production

Before taking the next steps to release your persona to real users, learn the important considerations for using personas in production.