Agents Platform Stories
Revolut selects ElevenLabs Agents to bolster customer support
Reducing time to ticket resolution by 8x with multilingual conversational agents.
Adicione um Agente de Voz do Papai Noel ao seu app React em minutos
Crie um agente de voz IA do Papai Noel em tempo real no seu app React usando a ElevenLabs. Siga este guia rápido e passo a passo para criar uma experiência de voz festiva e totalmente interativa com WebRTC e a Agents Platform da ElevenLabs.
.webp&w=3840&q=95)
Neste fim de ano, coloque o Papai Noel no seu app.
Com a ElevenLabs Agents Platform e o @elevenlabs/react SDK, você pode adicionar um agente de voz do Papai Noel ao seu app React em poucos minutos. Neste guia, vamos:
- Criar um Agente do Papai Noel no painel da ElevenLabs
- Conectar em um componente React usando WebRTC
- Adicionar um botão simples de “Ligar para o Papai Noel”
1. Cadastre-se e abra a Agents Platform
- Cadastre-se / faça login na ElevenLabs.
- Na barra lateral à esquerda, abra o seletor de plataforma no topo.
- Escolha Agents Platform.
Você verá uma barra lateral com Agents, Knowledge Base, Tools e Voices na seção “Build”.
2. Crie seu Agente do Papai Noel
Agora vamos criar um agente que se comporta como o Papai Noel e fala com a voz dele.
- Na barra lateral, clique em Agents.
- Clique em + Novo Agente.
- Escolha Agente em branco para começar do zero.
Dê o nome: Papai Noel.
Prompt do sistema
No campo System Prompt, cole o seguinte:
| 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. |
Primeira mensagem
Defina First Message como:
Ho, ho, ho! Feliz Natal, meu amigo. Me diga, qual é o seu nome?
É isso que os usuários vão ouvir quando a chamada começar.
Voz
Na seção Voice:
- Escolha “Jerry B. – Santa Claus”
- ID da voz:
MDLAMJ0jxkpYkjXbmG4t
Agora o Papai Noel vai realmente soar como o Papai Noel.
Segurança
Neste exemplo, vamos deixar aberto:
- Em Security, confira se Habilitar autenticação está desligado.
Para seu primeiro teste, não tem problema deixar Enable Authentication desligado, assim qualquer pessoa pode se conectar ao Agente sem restrições. Isso agiliza o uso inicial e é ideal para protótipos rápidos, hackathons ou demonstrações internas.
Mas para qualquer aplicação em produção ou acessível externamente, você nunca deve deixar seu Agente aberto. Use o Token Endpoint da ElevenLabs para gerar tokens de acesso temporários e específicos para cada sessão de usuário. Assim, você mantém controle total sobre quem pode acessar, por quanto tempo e o que cada usuário pode fazer. Habilitar autenticação protege seu Agente contra acessos não autorizados, abusos ou uso fora do esperado — e é altamente recomendado antes de colocar em produção.
3. Pegue o ID do seu Agente
No topo da página do Agente, você verá o campo Agent ID.
Anote esse valor — vamos colar no componente React mais adiante:
| 1 | agentId: "<AGENT_ID>" |
4. Instale o React SDK
No seu projeto React / Next.js, instale o React SDK da ElevenLabs:
| 1 | npm install @elevenlabs/react |
Com isso pronto, podemos usar o hook useConversation para iniciar e encerrar chamadas de voz.
5. Adicione o botão "Ligar para o Papai Noel"
Crie um novo componente, por exemplo CallSantaButton.tsx, e cole este código:
| 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 |
Agora substitua "<AGENT_ID>" pelo Agent ID que você copiou do painel.
Depois, coloque o botão em algum lugar da sua interface, por exemplo:
| 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. Teste
Abra no navegador e clique em Iniciar chamada:
- Seu navegador vai pedir permissão para o microfone.
- Uma sessão WebRTC começa com seu Agente do Papai Noel.
- Você vai ouvir:
“Ho, ho, ho! Feliz Natal, meu amigo. Me diga, qual é o seu nome?”
A partir daí, o Papai Noel vai perguntar seu nome, sua lista de desejos e o que você fez este ano para ficar na Lista dos Bonzinhos.
O que fazer depois
Quando tudo estiver funcionando, você pode:
- Proteger o Papai Noel com autenticação usando as configurações de segurança do Agente
- Trocar o idioma passando o idioma do usuário e deixando o prompt lidar com isso
- Personalizar a interface com botões, animações ou até uma tela completa de “Ligar para o Papai Noel”
Mas a integração principal é só:
- Um Agente na Agents Platform
- Um
agentId - Um hook
useConversatione um botão
É só isso que você precisa para trazer a magia do Papai Noel em tempo real e de forma conversacional para seu app React.
Explore artigos da equipe ElevenLabs
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.