Dodaj agenta głosowego Świętego Mikołaja do swojej aplikacji React w kilka minut

Ostatnia aktualizacja 18 lut 2026 • 5 minut czytania

Zbuduj agenta głosowego AI Świętego Mikołaja w czasie rzeczywistym w swojej aplikacji React z ElevenLabs. Skorzystaj z tego krótkiego przewodnika krok po kroku, by stworzyć świąteczne, interaktywne doświadczenie głosowe z WebRTC i Agents Platform od ElevenLabs.

Dowiedz się więcej Pobierz klucz API Skontaktuj się z nami

W te święta dodaj Mikołaja do swojej aplikacji.

Z ElevenLabs Platforma Agents i @elevenlabs/react SDK możesz dodać agenta głosowego Mikołaja do swojej aplikacji React w kilka minut. W tym przewodniku:

Stworzysz agenta Mikołaja w panelu ElevenLabs
Połączysz go w komponencie React z użyciem WebRTC
Dodasz prosty przycisk „Zadzwoń do Mikołaja”

1. Zarejestruj się i otwórz Agents Platform

Zarejestruj się / zaloguj do ElevenLabs.
W lewym menu otwórz przełącznik platformy na górze.
Wybierz Platforma Agents.

Powinieneś zobaczyć menu z sekcjami: Agenci, Baza wiedzy, Narzędzia, oraz Głosy w sekcji „Build”.

2. Stwórz swojego agenta Mikołaja

Teraz stworzymy agenta, który zachowuje się jak Mikołaj i mówi głosem Mikołaja.

W menu kliknij Agenci.
Kliknij + Nowy agent.
Wybierz Pusty agent, żeby zacząć od zera.

Nazwij go: Santa.

Prompt systemowy

W polu Prompt systemowy wklej poniższy tekst:

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.

Pierwsza wiadomość

Ustaw Pierwsza wiadomość na:

Ho, ho, ho! Wesołych Świąt, przyjacielu. Jak masz na imię?

To usłyszą użytkownicy na początku rozmowy.

Głos

W sekcji Głos:

Wybierz „Jerry B. – Santa Claus”
ID głosu: MDLAMJ0jxkpYkjXbmG4t

Teraz Mikołaj naprawdę będzie brzmiał jak Mikołaj.

Zabezpieczenia

W tym przykładzie zostawiamy wszystko otwarte:

W sekcji Zabezpieczenia upewnij się, że Włącz uwierzytelnianie jest wyłączone.

Na pierwsze demo możesz spokojnie zostawić Włącz uwierzytelnianie wyłączone, żeby każdy mógł połączyć się z agentem bez ograniczeń. Dzięki temu szybciej przetestujesz rozwiązanie — idealne na szybkie prototypy, hackathony czy prezentacje wewnętrzne.

Ale w przypadku produkcji lub aplikacji dostępnej z zewnątrz nigdy nie zostawiaj agenta otwartego. Zamiast tego użyj w ElevenLabs Endpoint tokena, żeby generować krótkotrwałe, ograniczone tokeny dostępu dla każdej sesji użytkownika. Dzięki temu masz pełną kontrolę, kto się łączy, jak długo ma dostęp i co może zrobić. Włączenie uwierzytelniania chroni agenta przed nieautoryzowanymi połączeniami, nadużyciami czy użyciem poza twoimi limitami — i jest mocno zalecane przed uruchomieniem na produkcji.

3. Skopiuj Agent ID

Na górze strony agenta zobaczysz pole ID agenta.

Zapisz tę wartość — wkleisz ją później do komponentu React:

1agentId: "<AGENT_ID>"

4. Zainstaluj React SDK

W swoim projekcie React / Next.js zainstaluj ElevenLabs React SDK:

1npm install @elevenlabs/react

Teraz możesz użyć hooka useConversation, żeby rozpocząć i zakończyć rozmowę głosową.

5. Dodaj przycisk „Zadzwoń do Mikołaja”

Stwórz nowy komponent, np. CallSantaButton.tsx, i wklej ten kod:

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

Teraz zamień "<AGENT_ID>" na prawdziwy Agent ID, który skopiowałeś z panelu.

Następnie wyświetl przycisk gdzieś w swoim UI, np.:

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

Otwórz aplikację w przeglądarce i kliknij Rozpocznij rozmowę:

Przeglądarka poprosi o zgodę na mikrofon.
Rozpocznie się sesja WebRTC z twoim agentem Mikołajem.
Usłyszysz:

„Ho, ho, ho! Wesołych Świąt, przyjacielu. Jak masz na imię?”

Potem Mikołaj zapyta cię o imię, listę życzeń i co zrobiłeś w tym roku, żeby trafić na Listę Grzecznych.

Co dalej?

Gdy podstawy działają, możesz:

Zabezpieczyć dostęp do Mikołaja przez ustawienia Security agenta
Zmienić język przekazując locale użytkownika i obsługując to w promptach
Dopasować wygląd UI dodając własne przyciski, animacje lub cały ekran „Zadzwoń do Mikołaja”

Ale cała integracja to tylko:

Jeden agent w Platforma Agents
Jeden agentId
Hook useConversation i przycisk

To wszystko, czego potrzebujesz, żeby dodać rozmowy z Mikołajem na żywo do swojej aplikacji React.

Przeglądaj artykuły zespołu ElevenLabs

Developer

Developer

Text to Speech API - Up To 40% Faster Globally

Product

Product

Introducing Experiments in ElevenAgents

The most data-driven way to improve real-world agent performance.

Twórz z najwyższą jakością dźwięku AI

Zacznij za darmo

Masz już konto? Zaloguj się

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	}