Agents Platform Stories
Revolut selects ElevenLabs Agents to bolster customer support
Reducing time to ticket resolution by 8x with multilingual conversational agents.
Fügen Sie Ihrer React-App in wenigen Minuten einen Santa-Stimmenagenten hinzu
Erstellen Sie einen Echtzeit-KI-Stimmenagenten als Weihnachtsmann in Ihrer React-App mit ElevenLabs. Folgen Sie dieser kurzen Schritt-für-Schritt-Anleitung, um ein festliches, interaktives Sprach-Erlebnis mit WebRTC und der ElevenLabs Agents Platform zu integrieren.
.webp&w=3840&q=95)
Bringen Sie in dieser Weihnachtszeit Santa in Ihre App.
Mit ElevenLabs Agents Platform und dem @elevenlabs/react SDK können Sie in wenigen Minuten einen Santa-Stimmenagenten in Ihre React-App integrieren. In dieser Anleitung werden wir:
- Einen Santa-Agenten im ElevenLabs-Dashboard erstellen
- In einer React-Komponente mit WebRTC verbinden
- Einen einfachen „Santa anrufen“-Button hinzufügen
1. Registrieren und Agents Platform öffnen
- Registrieren / Anmelden bei ElevenLabs.
- Öffnen Sie in der linken Seitenleiste den Plattform-Umschalter oben.
- Wählen Sie Agents Platform.
Sie sehen nun eine Seitenleiste mit Agents, Knowledge Base, Tools und Voices im Bereich „Build“.
2. Santa-Agenten erstellen
Jetzt erstellen wir einen Agenten, der sich wie Santa verhält und mit Santa-Stimme spricht.
- Klicken Sie in der Seitenleiste auf Agents.
- Klicken Sie auf + Neuer Agent.
- Wählen Sie Leerer Agent, um von Grund auf zu starten.
Nennen Sie ihn: Santa.
System-Prompt
Im Feld System Prompt fügen Sie Folgendes ein:
| 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. |
Erste Nachricht
Setzen Sie Erste Nachricht auf:
Ho, ho, ho! Frohe Weihnachten, mein Freund. Wie ist Ihr Name?
Das hören Nutzer, wenn der Anruf startet.
Stimme
Im Bereich Voice:
- Wählen Sie „Jerry B. – Santa Claus“
- Voice ID:
MDLAMJ0jxkpYkjXbmG4t
Jetzt klingt Santa tatsächlich wie Santa.
Sicherheit
Für dieses Beispiel lassen wir es offen:
- Unter Sicherheit stellen Sie sicher, dass Authentifizierung aktivieren aus.
Für Ihr erstes Demo ist es völlig in Ordnung, Authentifizierung aktivieren deaktiviert zu lassen, damit jeder ohne Einschränkung eine Verbindung zum Agenten herstellen kann. Das beschleunigt das Onboarding und eignet sich ideal für schnelle Prototypen, Hackathons oder interne Präsentationen.
Für jede Produktivumgebung oder öffentlich zugängliche Anwendung sollten Sie niemals Ihren Agenten offen lassen. Nutzen Sie stattdessen den ElevenLabs Token Endpoint, um für jede Sitzung kurzlebige, eingeschränkte Zugriffstoken zu generieren. So behalten Sie die volle Kontrolle darüber, wer sich verbindet, wie lange der Zugriff gilt und welche Aktionen erlaubt sind. Die Aktivierung der Authentifizierung schützt Ihren Agenten vor unbefugten Anrufen, Missbrauch oder Nutzung außerhalb Ihrer Vorgaben – und wird vor dem Live-Gang dringend empfohlen.
3. Agent-ID kopieren
Oben auf der Agent-Seite finden Sie das Feld Agent ID.
Notieren Sie diesen Wert – wir fügen ihn später in unsere React-Komponente ein:
| 1 | agentId: "<AGENT_ID>" |
4. React SDK installieren
Installieren Sie das ElevenLabs React SDK in Ihrem React- oder Next.js-Projekt:
| 1 | npm install @elevenlabs/react |
Damit können wir den useConversation-Hook nutzen, um Sprach-Anrufe zu starten und zu beenden.
5. „Santa anrufen“-Button hinzufügen
Erstellen Sie eine neue Komponente, z. B. CallSantaButton.tsx, und fügen Sie diesen Code ein:
| 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 |
Jetzt ersetzen Sie "<AGENT_ID>" durch die Agent-ID, die Sie aus dem Dashboard kopiert haben.
Rendern Sie dann den Button an einer beliebigen Stelle in Ihrem UI, zum Beispiel:
| 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. Testen
Öffnen Sie die App im Browser und klicken Sie auf Anruf starten:
- Ihr Browser fragt nach Mikrofonberechtigung.
- Eine WebRTC-Sitzung mit Ihrem Santa-Agenten startet.
- Sie hören:
„Ho, ho, ho! Frohe Weihnachten, mein Freund. Wie ist Ihr Name?“
Santa fragt dann nach Ihrem Namen, Ihrer Wunschliste und was Sie dieses Jahr getan haben, um auf der Guten-Liste zu bleiben.
Wie geht es weiter?
Wenn die Grundlagen funktionieren, können Sie:
- Santa mit Authentifizierung absichern über die Sicherheitseinstellungen des Agenten
- Sprache wechseln indem Sie die Nutzer-Lokalisierung übergeben und das Prompt anpassen
- UI anpassen mit eigenen Buttons, Animationen oder einem vollständigen „Santa anrufen“-Screen
Die Kernintegration besteht nur aus:
- Ein Agent in der Agents Platform
- Eine
agentId - Ein
useConversation-Hook und ein Button
Mehr brauchen Sie nicht, um Echtzeit-Gespräche mit Santa in Ihre React-App zu bringen.
Entdecken Sie Artikel des ElevenLabs-Teams
API Platform Stories
.webp&w=3840&q=95)
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.