Developer
Lägg till en tomteröst-agent i din React-app på några minuter
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.
.webp&w=3840&q=95)
Låt tomten flytta in i din app i jul.
Med ElevenLabs Agentsplattform 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 Agentsplattform.
Du ska nu se en sidomeny med Agenter, Kunskapsbas, Verktyg, och Röster 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å Agenter.
- 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 Systemprompt klistrar du in följande:
| 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. |
Första meddelande
Ställ in Första meddelandet 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 Röst:
- Välj “Jerry B. – Jultomten”
- Röst-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 Säkerhet, se till att Aktivera autentisering är av.
För din första demo går det utmärkt att lämna Aktivera autentisering 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:
| 1 | agentId: "<AGENT_ID>" |
4. Installera React SDK
I ditt React- eller Next.js-projekt, installera ElevenLabs React SDK:
| 1 | npm 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 | |
| 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 |
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:
| 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. 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 Agentsplattform
- 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
Product
Introducing Experiments in ElevenAgents
The most data-driven way to improve real-world agent performance.