Creative Platform Stories
ElevenLabs and FL Studio partner to advance AI-powered workflows for music producers
Exploring how AI audio can support the creative process
Add a Santa Voice Agent to Your React App in Minutes
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.
.webp&w=3840&q=95)
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
- Agents Platform
- Add a simple “Call Santa” button
1. Sign up and open the Agents Platform
- 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
2. Skapa din Tomte-agent
- In the sidebar, click Agents.
- Click + New Agent.
- Choose Blank Agent to start from scratch.
Name it: Santa.
Namnge
SystempromptSystem Prompt field, paste the following:
| 1 | You 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 | |
| 3 | When 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 | |
| 5 | Once 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 | |
| 7 | Talk 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 | |
| 9 | If 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 | |
| 11 | End 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 | |
| 13 | Be sure to maintain the conversation in the user's selected language. |
First message
Första meddelandetFirst Message to:
Ställ in
Ho, ho, ho! God jul, min vän. Berätta, vad heter du?
Voice
RöstVoice section:
- Choose “Jerry B. – Santa Claus”
- Voice ID:
MDLAMJ0jxkpYkjXbmG4t
Now Santa will actually sound like Santa.
Security
Säkerhet
- 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.
För din första demo är det helt okej att lämna Aktivera Autentisering avstängd så att vem som helst kan ansluta till agenten utan begränsningar. Detta gör onboarding snabbare och är idealiskt för snabba prototyper, hackathon-projekt eller interna presentationer.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
3. Hämta ditt Agent IDAgent ID field.
Högst upp på agentsidan ser du ett fält för
| 1 | agentId: "<AGENT_ID>" |
4. Install the React SDK
4. Installera React SDK
| 1 | npm 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
5. Lägg till "Ring Tomten"-knappenCallSantaButton.tsx, and paste this code:
| 1 | "use client"; |
| 2 | |
| 3 | import { useConversation } from "@elevenlabs/react"; |
| 4 | import { useCallback, useState } from "react"; |
| 5 | |
| 6 | export function CallButton() { |
| 7 | const [hasPermission, setHasPermission] = useState(false); |
| 8 | const [permissionError, setPermissionError] = useState<string | null>(null); |
| 9 | |
| 10 | const conversation = useConversation(); |
| 11 | |
| 12 | const requestMicrophonePermission = useCallback(async () => { |
| 13 | try { |
| 14 | await navigator.mediaDevices.getUserMedia({ audio: true }); |
| 15 | setHasPermission(true); |
| 16 | setPermissionError(null); |
| 17 | return true; |
| 18 | } catch { |
| 19 | setPermissionError("Microphone access is required"); |
| 20 | return false; |
| 21 | } |
| 22 | }, []); |
| 23 | |
| 24 | const startCall = useCallback(async () => { |
| 25 | const permitted = hasPermission || (await requestMicrophonePermission()); |
| 26 | if (!permitted) return; |
| 27 | |
| 28 | try { |
| 29 | await conversation.startSession({ |
| 30 | agentId: "<AGENT_ID>", |
| 31 | connectionType: "webrtc", |
| 32 | }); |
| 33 | } catch (error) { |
| 34 | console.error("Failed to start conversation:", error); |
| 35 | } |
| 36 | }, [conversation, hasPermission, requestMicrophonePermission]); |
| 37 | |
| 38 | const endCall = useCallback(async () => { |
| 39 | await conversation.endSession(); |
| 40 | }, [conversation]); |
| 41 | |
| 42 | const isConnected = conversation.status === "connected"; |
| 43 | |
| 44 | return ( |
| 45 | <div className="flex flex-col items-center gap-4"> |
| 46 | <button |
| 47 | onClick={isConnected ? endCall : startCall} |
| 48 | className={`px-6 py-3 rounded-lg text-white font-medium ${ |
| 49 | isConnected |
| 50 | ? "bg-red-600 hover:bg-red-700" |
| 51 | : "bg-green-600 hover:bg-green-700" |
| 52 | }`} |
| 53 | > |
| 54 | {isConnected ? "End Call" : "Start Call"} |
| 55 | </button> |
| 56 | |
| 57 | {isConnected && ( |
| 58 | <p className="text-sm text-gray-600"> |
| 59 | {conversation.isSpeaking ? "Agent speaking..." : "Listening..."} |
| 60 | </p> |
| 61 | )} |
| 62 | |
| 63 | {permissionError && ( |
| 64 | <p className="text-sm text-red-500">{permissionError}</p> |
| 65 | )} |
| 66 | </div> |
| 67 | ); |
| 68 | } |
| 69 |
Now replace "<AGENT_ID>" with the actual Agent ID you copied from the dashboard.
Nu
| 1 | import { CallButton } from "./CallSantaButton"; |
| 2 | |
| 3 | export default function HomePage() { |
| 4 | return ( |
| 5 | <main className="min-h-screen flex flex-col items-center justify-center gap-6"> |
| 6 | <h1 className="text-3xl font-bold text-center"> |
| 7 | Call Santa 🎅 |
| 8 | </h1> |
| 9 | <p className="text-gray-600"> |
| 10 | Press the button and talk to Santa in real time. |
| 11 | </p> |
| 12 | <CallButton /> |
| 13 | </main> |
| 14 | ); |
| 15 | } |
6. Try it out
6. Prova detStart 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
Vad du kan göra härnäst
- 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
useConversationhook and a button
That’s all you need to bring real-time, conversational Santa magic into your React app.
Utforska artiklar av ElevenLabs-teamet
Impact
United Nations hosts launch of ethical AI approach to survivor testimony
With support from the ElevenLabs Impact Program, Generative AI for Good launched "Hearing Their Voices" at the United Nations in Geneva, helping survivors of conflict-related sexual violence share their stories safely.