The Anam API provides a simple interface for implementing digital AI personas within your web applications. This guide will walk you through the process of setting up a minimal example of an interactive AI persona. By the end, you’ll have a working persona that can have real-time conversations in your web browser.

​
Prerequisites

  • An Anam API key (get one here)
  • A modern web browser with microphone access
  • A local web server (we’ll show you how)

​
Create Your First Persona

1

Create the HTML structure

Create a new file called index.html and add this basic structure:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Cara</title>
</head>
<body>
    <div style="text-align: center; padding: 20px;">
        <h1>Chat with Cara</h1>
        <p>Your AI persona will appear below and start automatically</p>
        <video id="persona-video" autoplay playsinline style="max-width: 100%; border-radius: 8px;"></video>
        <div id="status" style="margin-top: 15px; font-size: 14px; color: #666;">Loading...</div>
    </div>
</body>
</html>
2

Add the JavaScript

Now add the script that will automatically start your persona. Add this <script> tag just before the closing </body> tag:
<script type="module">
    import { createClient } from "https://esm.sh/@anam-ai/js-sdk@latest";

    // Replace with your actual API key
    const API_KEY = "your-api-key-here";

    const videoElement = document.getElementById("persona-video");
    const statusElement = document.getElementById("status");

    async function createSessionToken() {
        const response = await fetch("https://api.anam.ai/v1/auth/session-token", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${API_KEY}`,
            },
            body: JSON.stringify({
                personaConfig: {
                    name: "Cara",
                    avatarId: "30fa96d0-26c4-4e55-94a0-517025942e18",
                    voiceId: "6bfbe25a-979d-40f3-a92b-5394170af54b",
                    llmId: "0934d97d-0c3a-4f33-91b0-5e136a0ef466",
                    systemPrompt: "You are Cara, a helpful and friendly AI assistant. Keep responses conversational and concise.",
                },
            }),
        });

        const data = await response.json();
        return data.sessionToken;
    }

    async function startChat() {
        try {
            statusElement.textContent = "Creating session...";

            const sessionToken = await createSessionToken();
            statusElement.textContent = "Connecting...";

            const anamClient = createClient(sessionToken);
            await anamClient.streamToVideoElement("persona-video");

            statusElement.textContent = "Connected! Start speaking to Cara";

        } catch (error) {
            console.error("Failed to start chat:", error);
            statusElement.textContent = "Failed to connect. Check your API key.";
        }
    }

    // Auto-start when page loads
    startChat();
</script>
3

Add your API key

Replace your-api-key-here with your actual Anam API key in the script.
4

Complete file example

Your final index.html file should look like this:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Cara</title>
</head>
<body>
    <div style="text-align: center; padding: 20px;">
        <h1>Chat with Cara</h1>
        <p>Your AI persona will appear below and start automatically</p>
        <video id="persona-video" autoplay playsinline style="max-width: 100%; border-radius: 8px;"></video>
        <div id="status" style="margin-top: 15px; font-size: 14px; color: #666;">Loading...</div>
    </div>

    <script type="module">
        import { createClient } from "https://esm.sh/@anam-ai/js-sdk@latest";

        // Replace with your actual API key
        const API_KEY = "your-api-key-here";

        const videoElement = document.getElementById("persona-video");
        const statusElement = document.getElementById("status");

        async function createSessionToken() {
            const response = await fetch("https://api.anam.ai/v1/auth/session-token", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    Authorization: `Bearer ${API_KEY}`,
                },
                body: JSON.stringify({
                    personaConfig: {
                        name: "Cara",
                        avatarId: "30fa96d0-26c4-4e55-94a0-517025942e18",
                        voiceId: "6bfbe25a-979d-40f3-a92b-5394170af54b",
                        llmId: "0934d97d-0c3a-4f33-91b0-5e136a0ef466",
                        systemPrompt: "You are Cara, a helpful and friendly AI assistant. Keep responses conversational and concise.",
                    },
                }),
            });

            const data = await response.json();
            return data.sessionToken;
        }

        async function startChat() {
            try {
                statusElement.textContent = "Creating session...";

                const sessionToken = await createSessionToken();
                statusElement.textContent = "Connecting...";

                const anamClient = createClient(sessionToken);
                await anamClient.streamToVideoElement("persona-video");

                statusElement.textContent = "Connected! Start speaking to Cara";

            } catch (error) {
                console.error("Failed to start chat:", error);
                statusElement.textContent = "Failed to connect. Check your API key.";
            }
        }

        // Auto-start when page loads
        startChat();
    </script>
</body>
</html>
5

Start a local server

To serve your html file, you’ll need a local web server. You can use one of the following methods depending on which development tools you have installed.
Node.js
npx http-server -p 8000
Python 3
python -m http.server 8000
Python 2
python -m SimpleHTTPServer 8000
PHP
php -S localhost:8000
6

Open and test

  1. Navigate to http://localhost:8000 in your browser
  2. Allow microphone access when prompted
  3. Cara will appear automatically and you can start talking!
  4. When you’re done, close the browser tab to end the session.

​
What just happened?

  • Obtaining a Session Token: Your API key was exchanged for a temporary session token that enables the persona connection
  • Establishing a WebRTC Stream: The Anam SDK established a real-time video/audio connection to display your persona
  • Voice Interaction: Cara listens to your microphone and responds with natural speech and facial expressions

​
What’s next?

Now that you’ve got Cara up and running, here are some exciting directions to explore:

Customize your persona's appearance and personality

Make your persona truly your own by changing their look, voice, and how they respond

Build more engaging applications

Work through advanced examples that show you how to create richer, more interactive experiences

Respond to conversation events

Learn how to react when your persona starts talking, finishes speaking, or encounters different situations