कॉन्टेंट पर जाएं
लॉग इन करेंसाइन अप करें
ब्लॉगडेवलपर

अपने React ऐप में मिनटों में Santa वॉइस एजेंट जोड़ें

ElevenLabs की मदद से अपने React ऐप में रियल-टाइम Santa Claus AI वॉइस एजेंट बनाएं। इस आसान स्टेप-बाय-स्टेप गाइड को फॉलो करें और WebRTC व ElevenLabs Agents Platform के साथ एक मज़ेदार, पूरी तरह इंटरैक्टिव हॉलिडे वॉइस एक्सपीरियंस तैयार करें।

Agent Snippet
API Key प्राप्त करें

इस हॉलिडे सीज़न, अपने ऐप में Santa जोड़ें।

ElevenLabs के साथ Agents Platform और @elevenlabs/react SDK की मदद से आप कुछ ही मिनटों में अपने React ऐप में Santa Claus वॉइस एजेंट जोड़ सकते हैं। इस गाइड में हम:

  1. ElevenLabs डैशबोर्ड में Santa एजेंट बनाएंगे
  2. React कंपोनेंट में WebRTC के साथ इसे जोड़ेंगे
  3. एक सिंपल “Call Santa” बटन जोड़ेंगे

1. साइन अप करें और Agents Platform खोलें

  1. साइन अप / लॉग इन करें ElevenLabs पर।
  2. लेफ्ट साइडबार में ऊपर platform switcher खोलें।
  3. चुनें Agents Platform.

अब आपको साइडबार में दिखेगा, जिसमें Agents, Knowledge Base, Tools, और Voices “Build” सेक्शन के तहत मिलेंगे।

2. अपना Santa एजेंट बनाएं

अब हम एक ऐसा एजेंट बनाएंगे जो Santa की तरह व्यवहार करे और Santa की आवाज़ में बोले।

  1. साइडबार में क्लिक करें Agents.
  2. क्लिक करें + New Agent.
  3. चुनें Blank Agent ताकि शुरुआत से बना सकें।

नाम दें: Santa.

System prompt

अब System Prompt फील्ड में नीचे दिया गया टेक्स्ट पेस्ट करें:

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

अब First Message सेट करें:

हो, हो, हो! मेरी क्रिसमस, मेरे दोस्त। बताओ, तुम्हारा नाम क्या है?

कॉल शुरू होते ही यूज़र को यही सुनाई देगा।

Voice

अब Voice सेक्शन में:

  • चुनें “Jerry B. – Santa Claus”
  • Voice ID: MDLAMJ0jxkpYkjXbmG4t

अब Santa सच में आवाज़ में Santa जैसा लगेगा।

सुरक्षा

इस उदाहरण के लिए, हम इसे ओपन रखेंगे:

  • सुरक्षा के तहत देखें कि Enable authentication बंद.

पहले डेमो के लिए, Enable Authentication बंद रखना ठीक है ताकि कोई भी बिना रोक-टोक एजेंट से कनेक्ट कर सके। इससे ऑनबोर्डिंग तेज़ होती है और यह क्विक प्रोटोटाइप, हैकाथॉन प्रोजेक्ट या इंटरनल डेमो के लिए बढ़िया है।

लेकिन अगर आप production या बाहर से एक्सेस होने वाले ऐप बना रहे हैं, तो आपको कभी भी अपना एजेंट ओपन नहीं छोड़ना चाहिए। इसके बजाय ElevenLabs का Token Endpoint इस्तेमाल करें ताकि हर यूज़र सेशन के लिए शॉर्ट-लिव्ड, स्कोप्ड एक्सेस टोकन बना सकें। इससे आप कंट्रोल कर सकते हैं कि कौन कनेक्ट कर सकता है, कितनी देर के लिए और यूज़र क्या कर सकता है। ऑथेंटिकेशन ऑन करने से आपका एजेंट अनऑथराइज़्ड कॉल, मिसयूज़ या लिमिट से बाहर यूज़ से बचा रहता है — और लाइव जाने से पहले इसे ऑन करना ज़रूरी है।

3. अपना Agent ID लें

Agent पेज के टॉप पर आपको एक Agent ID फील्ड दिखेगा।

इस वैल्यू को नोट कर लें — इसे हम आगे React कंपोनेंट में डालेंगे:

1agentId: "<AGENT_ID>"

4. React SDK इंस्टॉल करें

अपने React / Next.js प्रोजेक्ट में ElevenLabs React SDK इंस्टॉल करें:

1npm install @elevenlabs/react

अब हम useConversation हुक का इस्तेमाल करके वॉइस कॉल शुरू और बंद कर सकते हैं।

5. "Call Santa" बटन जोड़ें

एक नया कंपोनेंट बनाएं, जैसे CallSantaButton.tsx, और यह कोड पेस्ट करें:

1"use client";
2
3import { useConversation } from "@elevenlabs/react";
4import { useCallback, useState } from "react";
5
6export 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

अब बदलें "<AGENT_ID>" को उस असली Agent ID से, जो आपने डैशबोर्ड से कॉपी की थी।

फिर अपने UI में कहीं भी बटन रेंडर करें, जैसे:

1import { CallButton } from "./CallSantaButton";
2
3export 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. आज़माएं

ब्राउज़र में खोलें और क्लिक करें Start Call:

  1. आपका ब्राउज़र माइक्रोफोन परमिशन.
  2. मांगेगा और आपके Santa एजेंट के साथ WebRTC सेशन शुरू होगा।
  3. आप सुनेंगे:

    “हो, हो, हो! मेरी क्रिसमस, मेरे दोस्त। बताओ, तुम्हारा नाम क्या है?”

इसके बाद, Santa आपसे नाम, विशलिस्ट और पूछेगा कि आपने इस साल Nice List में रहने के लिए क्या किया।

अब आगे क्या करें

जब बेसिक काम करने लगे, तो आप ये कर सकते हैं:

  • Agent की Security सेटिंग्स में Santa को ऑथ के पीछे रखें
  • यूज़र की भाषा सेट करके प्रॉम्प्ट से भाषा बदलें
  • UI को कस्टम बटन, एनिमेशन या पूरी “Call Santa” स्क्रीन के साथ कस्टमाइज़ करें

लेकिन कोर इंटीग्रेशन बस इतना है:

  • Agents Platform में एक एजेंट
  • एक agentId
  • एक useConversation हुक और एक बटन

बस इतना ही चाहिए रियल-टाइम, कन्वर्सेशनल Santa मैजिक अपने React ऐप में लाने के लिए।

ElevenLabs टीम के लेखों को देखें

ElevenLabs

उच्चतम गुणवत्ता वाले AI ऑडियो के साथ बनाएं

मुफ़्त में आज़माएं

क्या आपके पास पहले से अकाउंट है? लॉग इन करें