Ajoutez un agent vocal du Père Noël à votre application React en quelques minutes

Dernière mise à jour 21 janv. 2026 • 5 minutes de lecture

Créez un agent vocal IA du Père Noël en temps réel dans votre application React avec ElevenLabs. Suivez ce guide rapide étape par étape pour offrir une expérience vocale festive et interactive grâce à WebRTC et à la plateforme Agents d’ElevenLabs.

Obtenir une clé API

Pour les fêtes, ajoutez le Père Noël à votre application.

Avec ElevenLabs Agents Platform et le SDK @elevenlabs/react, vous pouvez intégrer un agent vocal du Père Noël dans votre application React en quelques minutes. Dans ce guide, nous allons :

Créer un agent Père Noël dans le tableau de bord ElevenLabs
Le connecter dans un composant React avec WebRTC
Ajouter un bouton simple “Appeler le Père Noël”

1. Inscrivez-vous et ouvrez la plateforme Agents

Inscrivez-vous / connectez-vous à ElevenLabs.
Dans la barre latérale à gauche, ouvrez le sélecteur de plateforme en haut.
Sélectionnez Agents Platform.

Vous devriez voir une barre latérale avec Agents, Knowledge Base, Outils, et Voices dans la section « Build ».

2. Créez votre agent Père Noël

Ensuite, nous allons créer un agent qui se comporte comme le Père Noël et parle avec sa voix.

Dans la barre latérale, cliquez sur Agents.
Cliquez sur + Nouvel agent.
Sélectionnez Agent vierge pour partir de zéro.

Nommez-le : Père Noël.

Invite système

Dans le champ System Prompt , collez ce qui suit :

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.

Premier message

Définissez Premier message sur :

Ho, ho, ho ! Joyeux Noël, mon ami. Dis-moi, comment tu t’appelles ?

C’est ce que les utilisateurs entendront au début de l’appel.

Voix

Dans la section Voice :

Sélectionnez « Jerry B. – Santa Claus »
ID de la voix : MDLAMJ0jxkpYkjXbmG4t

Maintenant, le Père Noël va vraiment sonner comme le Père Noël.

Sécurité

Pour cet exemple, nous allons laisser l’accès ouvert :

Dans Sécurité , vérifiez que Activer l’authentification est désactivé.

Pour une première démo, il est tout à fait possible de laisser Activer l’authentification désactivé pour que tout le monde puisse se connecter à l’agent sans restriction. Cela accélère la prise en main et c’est idéal pour des prototypes rapides, des hackathons ou des démonstrations internes.

En revanche, pour toute application en production ou accessible à l’extérieur, vous ne devez jamais laisser votre agent ouvert. Utilisez plutôt le Token Endpoint d’ElevenLabs pour générer des jetons d’accès temporaires et limités pour chaque session utilisateur. Cela vous permet de garder le contrôle sur qui se connecte, combien de temps l’accès dure et ce que l’utilisateur peut faire. Activer l’authentification protège votre agent contre les appels non autorisés, les abus ou une utilisation hors de vos limites prévues — c’est fortement recommandé avant toute mise en ligne.

3. Récupérez l’ID de votre agent

En haut de la page de l’agent, vous verrez un champ Agent ID.

Notez cette valeur — nous la collerons dans notre composant React à l’étape suivante :

1agentId: "<AGENT_ID>"

4. Installez le SDK React

Dans votre projet React / Next.js, installez le SDK React ElevenLabs :

1npm install @elevenlabs/react

Avec ça en place, nous pouvons utiliser le hook useConversation pour démarrer et arrêter les appels vocaux.

5. Ajoutez le bouton « Appeler le Père Noël »

Créez un nouveau composant, par exemple CallSantaButton.tsx, et collez ce code :

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

Ensuite, remplacez "<AGENT_ID>" par l’ID réel de l’agent que vous avez copié depuis le tableau de bord.

Puis affichez le bouton où vous voulez dans votre interface, par exemple :

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

Ouvrez dans votre navigateur et cliquez sur Démarrer l’appel:

Votre navigateur va demander l’autorisation du micro.
Une session WebRTC démarre avec votre agent Père Noël.
Vous entendrez :

« Ho, ho, ho ! Joyeux Noël, mon ami. Dis-moi, comment tu t’appelles ? »

Ensuite, le Père Noël vous demandera votre prénom, votre liste de souhaits et ce que vous avez fait cette année pour rester sur la liste des gentils.

Où aller ensuite

Une fois que tout fonctionne, vous pouvez :

Protéger l’accès au Père Noël via les paramètres de sécurité de l’agent
Changer de langue en passant la langue de l’utilisateur et en laissant l’invite s’en charger
Personnaliser l’interface avec des boutons, animations ou un écran « Appeler le Père Noël » complet

Mais l’intégration de base, c’est simplement :

Un agent dans la Agents Platform
Un agentId
Un hook useConversation et un bouton

C’est tout ce qu’il vous faut pour ajouter la magie du Père Noël en temps réel dans votre application React.

Découvrez les articles de l'équipe ElevenLabs

Company

Eleven Album on a multicoloured background

Company

Introducing The Eleven Album

A landmark musical release created in collaboration with world-class artists and powered by Eleven Music.

API Platform Stories

API Platform Stories

Mindset Health personalizes digital therapeutics with ElevenLabs

Scaling evidence-based voice solutions for gut-brain health

Créez avec l'audio AI de la plus haute qualité.

Se lancer gratuitement

Vous avez déjà un compte ? Se connecter

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	}