Añade un agente de voz de Papá Noel a tu app React en minutos

Última actualización 21 ene 2026 • 5 minutos de lectura

Crea un agente de voz IA de Papá Noel en tiempo real en tu app React con ElevenLabs. Sigue esta guía paso a paso para montar una experiencia navideña interactiva usando WebRTC y la Agents Platform de ElevenLabs.

Consigue tu clave API

Estas fiestas, añade a Papá Noel a tu app.

Con ElevenLabs Agents Platform y el @elevenlabs/react SDK, puedes añadir un agente de voz de Papá Noel a tu app React en solo unos minutos. En esta guía vamos a:

Crear un agente de Papá Noel en el panel de ElevenLabs
Conectarlo en un componente React usando WebRTC
Añadir un botón sencillo de “Llamar a Papá Noel”

1. Regístrate y abre Agents Platform

Regístrate / inicia sesión en ElevenLabs.
En la barra lateral izquierda, abre el selector de plataforma en la parte superior.
Elige Agents Platform.

Verás una barra lateral con Agents, Knowledge Base, Tools y Voices en la sección “Build”.

2. Crea tu agente de Papá Noel

Ahora vamos a crear un agente que actúe como Papá Noel y hable con su voz.

En la barra lateral, haz clic en Agents.
Haz clic en + Nuevo agente.
Elige Blank Agent para empezar desde cero.

Ponle el nombre: Santa.

Prompt del sistema

En el campo System Prompt, pega lo siguiente:

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.

Primer mensaje

Pon First Message como:

¡Jo, jo, jo! Feliz Navidad, amigo. Dime, ¿cómo te llamas?

Esto es lo que escucharán los usuarios al empezar la llamada.

Voz

En la sección Voice:

Elige “Jerry B. – Santa Claus”
ID de voz: MDLAMJ0jxkpYkjXbmG4t

Ahora Papá Noel realmente sonará como Papá Noel.

Seguridad

En este ejemplo, lo dejaremos abierto:

En Security, asegúrate de que Enable authentication está desactivado.

Para tu primera demo, está bien dejar Enable Authentication desactivado para que cualquiera pueda conectarse al agente sin restricciones. Así el acceso es más rápido y es ideal para prototipos rápidos, hackathones o demos internas.

Sin embargo, en cualquier entorno de producción o aplicación accesible desde fuera, nunca deberías dejar tu agente abierto. En su lugar, usa la Token Endpoint de ElevenLabs para generar tokens de acceso temporales y personalizados para cada sesión de usuario. Así controlas quién puede conectarse, cuánto dura el acceso y qué puede hacer cada usuario. Activar la autenticación protege tu agente de llamadas no autorizadas, abusos o usos fuera de tus límites — y es muy recomendable antes de lanzar en producción.

3. Copia el ID de tu agente

En la parte superior de la página del agente verás un campo Agent ID.

Guarda este valor — lo pegaremos en el componente React más adelante:

1agentId: "<AGENT_ID>"

4. Instala el SDK de React

En tu proyecto React / Next.js, instala el SDK de React de ElevenLabs:

1npm install @elevenlabs/react

Con esto listo, podemos usar el hook useConversation para iniciar y terminar llamadas de voz.

5. Añade el botón "Llamar a Papá Noel"

Crea un nuevo componente, por ejemplo CallSantaButton.tsx, y pega este código:

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

Ahora sustituye "<AGENT_ID>" por el Agent ID real que copiaste del panel.

Después, muestra el botón donde quieras en tu interfaz, por ejemplo:

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. Pruébalo

Ábrelo en tu navegador y haz clic en Start Call:

Tu navegador pedirá permiso para el micrófono.
Se inicia una sesión WebRTC con tu agente de Papá Noel.
Escucharás:

“¡Jo, jo, jo! Feliz Navidad, amigo. Dime, ¿cómo te llamas?”

A partir de ahí, Papá Noel te preguntará tu nombre, tu lista de deseos y qué has hecho este año para estar en la lista de los buenos.

¿Qué más puedes hacer?

Cuando tengas lo básico funcionando, puedes:

Proteger el acceso a Papá Noel con autenticación usando los ajustes de seguridad del agente
Cambiar de idioma pasando la configuración de idioma del usuario y dejando que el prompt lo gestione
Personalizar la interfaz con botones propios, animaciones o una pantalla completa de “Llamar a Papá Noel”

Pero la integración básica es solo:

Un agente en la Agents Platform
Un agentId
Un hook useConversation y un botón

Eso es todo lo que necesitas para llevar la magia de Papá Noel en tiempo real y de forma conversacional a tu app React.

Descubre artículos del equipo de ElevenLabs

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.

Crea con audio con IA de la más alta calidad

Empieza gratis

¿Ya tienes una cuenta? Inicia sesión

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	}