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