​
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
  brainType: "ANAM_LLAMA_v3_3_70B_V1",
  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
        brainType: "ANAM_LLAMA_v3_3_70B_V1",
        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.

Was this page helpful?