Lägg till en tomteröst-agent i din React-app på några minuter

Senast uppdaterad 21 jan. 2026 • 5 minuter lästid

Bygg en AI-tomte som pratar i realtid i din React-app med ElevenLabs. Följ den här snabba steg-för-steg-guiden för att skapa en festlig och interaktiv julupplevelse med WebRTC och ElevenLabs Agents Platform.

Hämta API-nyckel

Låt tomten flytta in i din app i jul.

Med ElevenLabs Agents Platform och @elevenlabs/react SDK kan du lägga till en tomteröst-agent i din React-app på bara några minuter. I den här guiden kommer vi att:

Skapa en tomte-agent i ElevenLabs dashboard
Koppla ihop den i en React-komponent med WebRTC
Lägga till en enkel “Ring tomten”-knapp

1. Skapa konto och öppna Agents Platform

Registrera dig / logga in på ElevenLabs.
I vänstermenyn, öppna plattformsväljaren högst upp.
Välj Agents Platform.

Du ska nu se en sidomeny med Agents, Knowledge Base, Tools, och Voices under avsnittet “Build”.

2. Skapa din tomte-agent

Nu skapar vi en agent som beter sig som tomten och pratar med tomteröst.

I sidomenyn, klicka på Agents.
Klicka på + Ny agent.
Välj Tom agent för att börja från början.

Döp den till: Tomten.

Systemprompt

I fältet System Prompt klistrar du in följande:

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.

Första meddelande

Ställ in First Message till:

Ho, ho, ho! God jul, min vän. Vad heter du?

Det här är vad användarna hör när samtalet startar.

Röst

I avsnittet Voice:

Välj “Jerry B. – Santa Claus”
Voice ID: MDLAMJ0jxkpYkjXbmG4t

Nu kommer tomten faktiskt att låta som tomten.

Säkerhet

I det här exemplet låter vi det vara öppet:

Under Security, se till att Aktivera autentisering är av.

För din första demo går det utmärkt att lämna Enable Authentication avstängt så att vem som helst kan ansluta till agenten utan begränsningar. Det gör det snabbare att komma igång och passar bra för snabba prototyper, hackathons eller interna demo.

Men för alla produktion eller publika applikationer ska du aldrig lämna din agent öppen. Använd istället ElevenLabs Token Endpoint för att skapa tillfälliga, begränsade access tokens för varje användarsession. Då har du full kontroll över vem som kan ansluta, hur länge och vad användaren får göra. Att aktivera autentisering skyddar din agent mot obehöriga samtal, missbruk eller användning utanför dina gränser — och rekommenderas starkt innan du går live.

3. Hämta din Agent ID

Högst upp på agent-sidan ser du ett fält för Agent ID.

Spara det här värdet — vi klistrar in det i vår React-komponent senare:

1agentId: "<AGENT_ID>"

4. Installera React SDK

I ditt React- eller Next.js-projekt, installera ElevenLabs React SDK:

1npm install @elevenlabs/react

Nu kan vi använda useConversation-hooken för att starta och stoppa röstsamtal.

5. Lägg till knappen "Ring tomten"

Skapa en ny komponent, t.ex. CallSantaButton.tsx, och klistra in den här koden:

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

Nu ska du ersätta "<AGENT_ID>" med det faktiska Agent ID du kopierade från dashboarden.

Rendera sedan knappen någonstans i din UI, till exempel:

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

Öppna i webbläsaren och klicka på Starta samtal:

Din webbläsare kommer att be om mikrofontillstånd.
En WebRTC-session startar med din tomte-agent.
Du hör:

“Ho, ho, ho! God jul, min vän. Vad heter du?”

Därefter frågar tomten efter ditt namn, önskelista och vad du gjort i år för att hamna på snälla-listan.

Vad du kan göra härnäst

När grunderna fungerar kan du:

Skydda tomten med inloggning via agentens säkerhetsinställningar
Byta språk genom att skicka användarens språk och låta prompten hantera det
Anpassa UI:t med egna knappar, animationer eller en hel “Ring tomten”-skärm

Men själva integrationen är bara:

En agent i Agents Platform
Ett agentId
En useConversation-hook och en knapp

Det är allt du behöver för att få in riktig, samtalsbaserad tomtemagi i din React-app.

Utforska artiklar av ElevenLabs-teamet

Agents Platform Stories

Agents Platform Stories

Revolut selects ElevenLabs Agents to bolster customer support

Reducing time to ticket resolution by 8x with multilingual conversational agents.

API Platform Stories

API Platform Stories

Yampa is scaling high-intensity outbound voice intelligence with ElevenLabs

Yampa leverages ElevenLabs Flash V2.5 to scale human-like outbound voice agents with ultra-low latency and massive concurrency.

Skapa ljud och röster som imponerar med de bästa AI-verktygen

Kom igång gratis

Har du redan ett konto? Logga in

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.

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

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	}