Agents Platform Stories
Revolut selects ElevenLabs Agents to bolster customer support
Reducing time to ticket resolution by 8x with multilingual conversational agents.
サンタのボイスエージェントをReactアプリに数分で追加
ElevenLabsを使って、ReactアプリにリアルタイムのサンタクロースAIボイスエージェントを作成しましょう。WebRTCとElevenLabs Agents Platformを使った、楽しくインタラクティブなホリデーボイス体験を手早く作るステップバイステップガイドです。
.webp&w=3840&q=95)
このホリデーシーズン、アプリにサンタを追加しませんか？
ElevenLabsのAgents Platformと@elevenlabs/react SDKを使えば、サンタクロースのボイスエージェントをReactアプリに数分で追加できます。このガイドでは以下を行います：
- ElevenLabsダッシュボードでサンタエージェントを作成
- WebRTCを使ってReactコンポーネントに組み込み
- シンプルな「サンタに電話」ボタンを追加
1. サインアップしてAgents Platformを開く
- サインアップ／ログインしてElevenLabsにアクセスします。
- 左サイドバーで、プラットフォーム切り替えを上部で開きます。
- 「Agents Platform.
」を選択します。サイドバーにAgents, Knowledge Base, Tools、Voicesなど「Build」セクションが表示されます。
2. サンタエージェントを作成
次に、サンタのように振る舞い、サンタの声で話すエージェントを作成します。
- サイドバーでAgents.
- をクリック+ New Agent.
- をクリックBlank Agentを選択して新規作成します。
名前を「Santa」にします。
システムプロンプト
「System Prompt」欄に、次の内容を貼り付けます：
| 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. |
最初のメッセージ
「First Message」を以下に設定します：
ホッホッホー！メリークリスマス、友よ。あなたの名前を教えてくれるかな？
これは通話開始時にユーザーが聞くメッセージです。
ボイス
「Voice」セクションで：
- 「Jerry B. – Santa Claus」
- ボイスID：
MDLAMJ0jxkpYkjXbmG4t
これでサンタが実際にサンタのような声になります。
セキュリティ
この例では、オープンな設定にします：
- 「Security」で、認証を有効化がオフ.
になっていることを確認してください。最初のデモでは、Enable Authenticationをオフのままにしておけば、誰でも制限なくエージェントに接続できます。これによりオンボーディングが早くなり、プロトタイプやハッカソン、社内デモに最適です。
ただし、本番環境や外部公開アプリの場合は、絶対にエージェントをオープンのままにしないでください。代わりにElevenLabsのToken Endpointを使い、各ユーザーセッションごとに有効期限付きのスコープ付きアクセストークンを発行しましょう。これにより、誰が接続できるか、アクセス期間、ユーザーの操作範囲を完全に管理できます。認証を有効にすることで、不正な通話や悪用、意図しない利用からエージェントを守れます。公開前には必ず有効化をおすすめします。
3. エージェントIDを取得
エージェントページ上部にAgent ID欄があります。
この値を控えておき、後ほどReactコンポーネントに貼り付けます：
| 1 | agentId: "<AGENT_ID>" |
4. React SDKをインストール
React／Next.jsプロジェクトでElevenLabs React SDKをインストールします：
| 1 | npm install @elevenlabs/react |
これで、useConversationフックを使って音声通話を開始・終了できます。
5. 「サンタに電話」ボタンを追加
新しいコンポーネント（例：CallSantaButton.tsx）を作成し、次のコードを貼り付けます：
| 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 |
次に、「置き換え」 "<AGENT_ID>"を、ダッシュボードでコピーした実際のエージェントIDに変更します。
その後、UIのどこかにボタンを表示します。例：
| 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. 試してみる
ブラウザで開き、Start Call:
- をクリックします。ブラウザが.
- マイクの許可
- を求めます。
SantaエージェントとのWebRTCセッションが始まります。
次のメッセージが聞こえます：
「ホッホッホー！メリークリスマス、友よ。あなたの名前を教えてくれるかな？」
ここからサンタが名前やほしいものリスト、今年良い子だったことなどを質問します。
- 次にできること基本が動いたら、以下も試せます：
- 認証でサンタへのアクセスを制限（エージェントのセキュリティ設定を利用）
- 言語切り替え（ユーザーのロケールを渡してプロンプトで対応）
UIのカスタマイズ
- （オリジナルボタンやアニメーション、「サンタに電話」専用画面など）でも、コアの連携はとてもシンプルです：
- Agents Platformで1つのエージェント
1つの - agentId
useConversationフックとボタン
これだけで、リアルタイムで会話できるサンタの魔法をReactアプリに追加できます。
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.