Add a Santa Voice Agent to Your React App in Minutes

Last updated Feb 18, 2026 • 5 minutes reading time

Build a real-time Santa Claus AI voice agent in your React app using ElevenLabs. Follow this quick step-by-step guide to create a festive, fully interactive holiday voice experience with WebRTC and the ElevenLabs Agents Platform.

Learn More Get API Key Contact Sales

This holiday season, add Santa to your app.

With ElevenLabs Agents Platform and the @elevenlabs/react SDK, you can drop a Santa Claus voice agent into your React app in just a few minutes. In this guide we’ll:

Create a Santa Agent in the ElevenLabs dashboard
Wire it up in a React component using WebRTC
Add a simple “Call Santa” button

Sign up / log in to ElevenLabs.
In the left sidebar, open the platform switcher at the top.
Choose Agents Platform.

You should see a sidebar, with Agents, Knowledge Base, Tools, and Voices under the “Build” section.

2. Create your Santa Agent

Next we’ll create an agent that behaves like Santa and speaks with a Santa voice.

In the sidebar, click Agents.
Click + New Agent.
Choose Blank Agent to start from scratch.

Name it: Santa.

System prompt

In the System Prompt field, paste the following:

1You are a helpful assistant. You are Santa Claus, a jolly, warm, and humorous character from the North Pole. Christmas is just around the corner, and you love reminding everyone of the festive season with your hearty "Ho, ho, ho!" You are deeply in love with Mrs. Claus, often mentioning her incredible cookies.
2
3When speaking to someone, keep your answers short and magical—just one festive sentence. Make it your top priority to ask for their name to check your naughty or nice list. Once you have their name, immediately ask about their wish-list, as it's crucial for your preparations. Always be warm and gentle.
4
5Once their name and wish-list are covered, guide the conversation toward learning more about what they've done throughout the year and why they believe they deserve to be on Santa's Nice List. Use this opportunity to celebrate their kindness or achievements, reinforcing the importance of spreading goodness and holiday cheer. You also love asking about their plans for the holidays and showing genuine interest in their answers. Compliment them if you know they've done something kind or helpful recently, reinforcing the importance of spreading goodness.
6
7Talk about your favorite gifts you've delivered or share quick, magical details about life at the North Pole, like mischievous elves or your reindeer team. Sprinkle in lighthearted jokes about your endless to-do list or how you struggle to resist cookies left out for you on Christmas Eve. Always express how much you love seeing people happy during the holidays and how their smiles make all your efforts worthwhile.
8
9If the user makes a request involving inappropriate, harmful, or dangerous items such as weapons or items that go against the spirit of Christmas. Politely remind the user to make kind and festive wishes instead.
10
11End every conversation with a warm farewell, suggesting you must return to your holiday preparations to ensure everyone gets their gifts on time. Wish them a Merry Christmas and encourage them to spread kindness and holiday cheer. Stay cheerful, engaging, and full of festive energy, spreading Christmas magic through humor, warmth, and storytelling.
12
13Be sure to maintain the conversation in the user's selected language.

First message

Set First Message to:

Ho, ho, ho! Merry Christmas, my friend. Tell me, what is your name?

This is what users will hear when the call starts.

Voice

In the Voice section:

Choose “Jerry B. – Santa Claus”
Voice ID: MDLAMJ0jxkpYkjXbmG4t

Now Santa will actually sound like Santa.

Security

For this example, we’ll keep it open:

Under Security, make sure Enable authentication is off.

For your first demo, it’s perfectly fine to leave Enable Authentication turned off so anyone can connect to the Agent without restrictions. This makes onboarding faster and is ideal for quick prototypes, hackathon projects, or internal showcases.

However, for any production or externally accessible application, you should never leave your Agent open. Instead, use the ElevenLabs Token Endpoint to generate short-lived, scoped access tokens for each user session. This ensures you maintain full control over who can connect, how long access lasts, and what actions the user is allowed to take. Enabling authentication protects your Agent from unauthorized calls, abuse, or usage outside your intended limits — and is strongly recommended before going live.

3. Grab your Agent ID

At the top of the Agent page, you’ll see an Agent ID field.

Make note of this value — we’ll paste it into our React component in a later step:

1agentId: "<AGENT_ID>"

4. Install the React SDK

In your React / Next.js project, install the ElevenLabs React SDK:

1npm install @elevenlabs/react

With that in place, we can use the useConversation hook to start and stop voice calls.

5. Add the "Call Santa" button

Create a new component, e.g. CallSantaButton.tsx, and paste this code:

1"use client";
2
3import { useConversation } from "@elevenlabs/react";
4import { useCallback, useState } from "react";
5
6export function CallButton() {
const [hasPermission, setHasPermission] = useState(false);
const [permissionError, setPermissionError] = useState<string | null>(null);
9
const conversation = useConversation();
11
const requestMicrophonePermission = useCallback(async () => {
  try {
    await navigator.mediaDevices.getUserMedia({ audio: true });
    setHasPermission(true);
    setPermissionError(null);
    return true;
  } catch {
    setPermissionError("Microphone access is required");
    return false;
  }
}, []);
23
const startCall = useCallback(async () => {
  const permitted = hasPermission || (await requestMicrophonePermission());
  if (!permitted) return;
27
  try {
    await conversation.startSession({
      agentId: "<AGENT_ID>",
      connectionType: "webrtc",
    });
  } catch (error) {
    console.error("Failed to start conversation:", error);
  }
}, [conversation, hasPermission, requestMicrophonePermission]);
37
const endCall = useCallback(async () => {
  await conversation.endSession();
}, [conversation]);
41
const isConnected = conversation.status === "connected";
43
return (
  <div className="flex flex-col items-center gap-4">
    <button
      onClick={isConnected ? endCall : startCall}
      className={`px-6 py-3 rounded-lg text-white font-medium ${
        isConnected
          ? "bg-red-600 hover:bg-red-700"
          : "bg-green-600 hover:bg-green-700"
      }`}
    >
      {isConnected ? "End Call" : "Start Call"}
    </button>
56
    {isConnected && (
      <p className="text-sm text-gray-600">
        {conversation.isSpeaking ? "Agent speaking..." : "Listening..."}
      </p>
    )}
62
    {permissionError && (
      <p className="text-sm text-red-500">{permissionError}</p>
    )}
  </div>
);
68}
69

Now replace "<AGENT_ID>" with the actual Agent ID you copied from the dashboard.

Then render the button somewhere in your UI, for example:

1import { CallButton } from "./CallSantaButton";
2
3export default function HomePage() {
return (
  <main className="min-h-screen flex flex-col items-center justify-center gap-6">
    <h1 className="text-3xl font-bold text-center">
      Call Santa 🎅
    </h1>
    <p className="text-gray-600">
      Press the button and talk to Santa in real time.
    </p>
    <CallButton />
  </main>
);
15}

6. Try it out

Open it in your browser and click Start Call:

Your browser will ask for microphone permission.
A WebRTC session starts with your Santa Agent.
You’ll hear:

“Ho, ho, ho! Merry Christmas, my friend. Tell me, what is your name?”

From there, Santa will ask for your name, wishlist, and what you’ve done this year to stay on the Nice List.

Where to go next

Once the basics work, you can:

Gate Santa behind auth using the Agent’s Security settings
Switch languages by passing user locale and letting the prompt handle it
Skin the UI with custom buttons, animations, or a full “Call Santa” screen

But the core integration is just:

One Agent in the Agents Platform
One agentId
A useConversation hook and a button

That’s all you need to bring real-time, conversational Santa magic into your React app.

Explore articles by the ElevenLabs team

Developer

Developer

Text to Speech API - Up To 40% Faster Globally

Product