.webp&w=3840&q=95)
Company
.webp&w=3840&q=95)
ElevenLabs partners with the UK Government on voice AI safety research
UK AI Security Institute researchers will explore the implications of AI voice technology
.webp&w=3840&q=95)
銅像を撮影し、そこに描かれている人物を特定。その後、各キャラクターが時代に合った個性的な声でリアルタイムに会話できます。
これが、ElevenLabsのボイスデザインとエージェントAPIを使って実現できることです。この記事では、コンピュータビジョンと音声生成を組み合わせて、公共のモニュメントをインタラクティブな体験に変えるモバイルウェブアプリのアーキテクチャを紹介します。ここで紹介する内容は、下記のAPIやコードサンプルを使って再現できます。
チュートリアルを飛ばして、一発で作成
下記のアプリ全体は、たった1つのプロンプトから作成され、 カーソル の空のNextJSプロジェクトでClaude Opus 4.5（high）を使って一発生成に成功しました。すぐに自分で作りたい場合は、これをエディタに貼り付けてください：
| 1 | We need to make an app that: |
| 2 | - is optimised for mobile |
| 3 | - allows the user to take a picture (of a statue, picture, monument, etc) that includes one or more people |
| 4 | - uses an OpenAI LLM api call to identify the statue/monument/picture, characters within it, the location, and name |
| 5 | - allows the user to check it's correct, and then do either a deep research or a standard search to get information about the characters and the statue's history, and it's current location |
| 6 | - then create an ElevenLabs agent (allowing multiple voices), that the user can then talk to as though they're talking to the characters in the statue. Each character should use voice designer api to create a matching voice. |
| 7 | The purpose is to be fun and educational. |
| 8 | |
| 9 | https://elevenlabs.io/docs/eleven-api/guides/cookbooks/voices/voice-design |
| 10 | https://elevenlabs.io/docs/eleven-agents/quickstart |
| 11 | https://elevenlabs.io/docs/api-reference/agents/create |
また、ElevenLabsエージェントスキル を使うこともできます。これらはドキュメントをもとにしており、さらに良い結果が得られる場合もあります。
この記事の残りでは、このプロンプトがどのようなものを生み出すかを詳しく解説します。
仕組み
このパイプラインは5つのステージがあります：
- 画像を撮影
- アートワークと登場人物を特定（OpenAI）
- 歴史を調査（OpenAI）
- 各キャラクターの個性的な声を生成（ElevenAPI）
- WebRTCでリアルタイム音声会話を開始（ElevenAgents）
ビジョンで銅像を特定
ユーザーが銅像を撮影すると、その画像はOpenAIのビジョン対応モデルに送信されます。システムプロンプトで、アートワーク名、場所、アーティスト、日付、そして各キャラクターの詳細な声の説明を抽出します。システムプロンプトには、期待されるJSON出力形式も含まれています：
| 1 | { |
| 2 | "statueName": "string - name of the statue, monument, or artwork", |
| 3 | "location": "string - where it is located (city, country)", |
| 4 | "artist": "string - the creator of the artwork", |
| 5 | "year": "string - year completed or unveiled", |
| 6 | "description": "string - brief description of the artwork and its historical significance", |
| 7 | "characters": [ |
| 8 | { |
| 9 | "name": "string - character name", |
| 10 | "description": "string - who this person was and their historical significance", |
| 11 | "era": "string - time period they lived in", |
| 12 | "voiceDescription": "string - detailed voice description for Voice Design API (include audio quality marker, age, gender, vocal qualities, accent, pacing, and personality)" |
| 13 | } |
| 14 | ] |
| 15 | } |
| 1 | const response = await openai.chat.completions.create({ |
| 2 | model: "gpt-5.2", |
| 3 | response_format: { type: "json_object" }, |
| 4 | messages: [ |
| 5 | { role: "system", content: SYSTEM_PROMPT }, |
| 6 | { |
| 7 | role: "user", |
| 8 | content: [ |
| 9 | { |
| 10 | type: "text", |
| 11 | text: "Identify this statue/monument/artwork and all characters depicted.", |
| 12 | }, |
| 13 | { |
| 14 | type: "image_url", |
| 15 | image_url: { |
| 16 | url: `data:image/jpeg;base64,${base64Data}`, |
| 17 | detail: "high", |
| 18 | }, |
| 19 | }, |
| 20 | ], |
| 21 | }, |
| 22 | ], |
| 23 | max_completion_tokens: 2500, |
| 24 | }); |
ロンドンのウェストミンスター橋にあるブーディカ像の写真の場合、レスポンスはこのようになります：
| 1 | { |
| 2 | "statueName": "Boudica and Her Daughters", |
| 3 | "location": "Westminster Bridge, London, UK", |
| 4 | "artist": "Thomas Thornycroft", |
| 5 | "year": "1902", |
| 6 | "description": "Bronze statue depicting Queen Boudica riding a war chariot with her two daughters, commemorating her uprising against Roman occupation of Britain.", |
| 7 | "characters": [ |
| 8 | { |
| 9 | "name": "Boudica", |
| 10 | "description": "Queen of the Iceni tribe who led an uprising against Roman occupation", |
| 11 | "era": "Ancient Britain, 60-61 AD", |
| 12 | "voiceDescription": "Perfect audio quality. A powerful woman in her 30s with a deep, resonant voice and a thick Celtic British accent. Her tone is commanding and fierce, with a booming quality that projects authority. She speaks at a measured, deliberate pace with passionate intensity." |
| 13 | }, |
| 14 | // Other characters in the statue |
| 15 | ] |
| 16 | } |
効果的な声の説明を書くコツ
声の説明の質が、そのまま生成される声の質に直結します。 ボイスデザインのプロンプトガイド で詳しく解説していますが、重要なポイントは：音質の指標（「完璧な音質。」）、年齢や性別、トーンや音色（深い、響きのある、しゃがれたなど）、正確なアクセント（「厚いケルト系イギリス訛り」など）、話す速さです。より具体的なプロンプトほど正確な結果が得られます。「60代で乾いたユーモアを持つ疲れたニューヨーカー」の方が、「年配の女性の声」よりもずっと良い結果になります。
ガイドからのポイント：アクセントの強さを表現する際は「strong」より「thick」を使う、曖昧な「foreign」などは避ける、架空や歴史上のキャラクターには実在のアクセントを参考に提案できる（例：「厚いイギリス訛りで威厳のある古代ケルトの女王」など）。
ボイスデザインでキャラクターの声を作成
ボイスデザインAPI は、テキストの説明から新しい合成音声を生成します。声のサンプルやクローンは不要なので、音声資料が存在しない歴史上の人物にも最適です。
手順は2ステップです。
プレビューを生成
| 1 | const { previews } = await elevenlabs.textToVoice.design({ |
| 2 | modelId: "eleven_multilingual_ttv_v2", |
| 3 | voiceDescription: character.voiceDescription, |
| 4 | text: sampleText, |
| 5 | }); |
テキストパラメータが重要です。50語以上のキャラクターに合った長めのサンプルテキストを使うと、より安定した結果になります。セリフはキャラクターに合わせて用意しましょう。 ボイスデザインのプロンプトガイド でさらに詳しく解説しています。
声を保存
プレビューが生成されたら、1つ選んで本番用の声を作成します：
| 1 | const voice = await elevenlabs.textToVoice.create({ |
| 2 | voiceName: `StatueScanner - ${character.name}`, |
| 3 | voiceDescription: character.voiceDescription, |
| 4 | generatedVoiceId: previews[0].generatedVoiceId, |
| 5 | }); |
複数キャラクターの銅像の場合、声の生成は並行して行われます。5人分の声も1人分とほぼ同じ時間で作成できます：
| 1 | const results = await Promise.all( |
| 2 | characters.map((character) => createVoiceForCharacter(character)) |
| 3 | ); |
マルチボイスElevenLabs Agentの構築
声ができたら、次は ElevenLabsエージェント を設定し、リアルタイムでキャラクターごとに声を切り替えられるようにします。
| 1 | const agent = await elevenlabs.conversationalAi.agents.create({ |
| 2 | name: `Statue Scanner - ${statueName}`, |
| 3 | tags: ["statue-scanner"], |
| 4 | conversationConfig: { |
| 5 | agent: { |
| 6 | firstMessage, |
| 7 | language: "en", |
| 8 | prompt: { |
| 9 | prompt: systemPrompt, |
| 10 | temperature: 0.7, |
| 11 | }, |
| 12 | }, |
| 13 | tts: { |
| 14 | voiceId: primaryCharacter.voiceId, |
| 15 | modelId: "eleven_v3", |
| 16 | supportedVoices: otherCharacters.map((c) => ({ |
| 17 | voiceId: c.voiceId, |
| 18 | label: c.name, |
| 19 | description: c.voiceDescription, |
| 20 | })), |
| 21 | }, |
| 22 | turn: { |
| 23 | turnTimeout: 10, |
| 24 | }, |
| 25 | conversation: { |
| 26 | maxDurationSeconds: 600, |
| 27 | }, |
| 28 | }, |
| 29 | }); |
マルチボイス切り替え
supportedVoices配列で、エージェントが利用できる声を指定します。Agentsプラットフォームは声の切り替えを自動で処理します。LLMの応答で話者が変わった場合、TTSエンジンがその部分を正しい声に割り当てます。
グループ会話のプロンプト設計
複数キャラクターが本当のグループのように感じられるには、単なる順番のQ&Aではなく、意図的なプロンプト設計が必要です：
| 1 | const multiCharacterRules = ` |
| 2 | MULTI-CHARACTER DYNAMICS: |
| 3 | You are playing ALL ${characters.length} characters simultaneously. |
| 4 | Make this feel like a group conversation, not an interview. |
| 5 | |
| 6 | - Characters should interrupt each other: |
| 7 | "Actually, if I may -" / "Wait, I must say -" |
| 8 | |
| 9 | - React to what others say: |
| 10 | "Well said." / "I disagree with that..." / "Always so modest..." |
| 11 | |
| 12 | - Have side conversations: |
| 13 | "Do you remember when -" / "Tell them about the time you -" |
| 14 | |
| 15 | The goal is for users to feel like they are witnessing a real exchange |
| 16 | between people who happen to include them. |
| 17 | `; |
WebRTCによるリアルタイム音声
最後はクライアント側の接続です。ElevenLabs AgentsはWebRTCに対応しており、低遅延の音声会話が可能です。WebSocketベースの接続よりも明らかに速く、自然な会話のやりとりに重要です。
サーバー側：会話トークンを取得
| 1 | const { token } = await client.conversationalAi.conversations.getWebrtcToken({ |
| 2 | agentId, |
| 3 | }); |
クライアント側：セッションを開始
| 1 | import { useConversation } from "@elevenlabs/react"; |
| 2 | |
| 3 | const conversation = useConversation({ |
| 4 | onConnect: () => setIsSessionActive(true), |
| 5 | onDisconnect: () => setIsSessionActive(false), |
| 6 | onMessage: (message) => { |
| 7 | if (message.source === "ai") { |
| 8 | setMessages((prev) => [...prev, { role: "agent", text: message.message }]); |
| 9 | } |
| 10 | }, |
| 11 | }); |
| 12 | |
| 13 | await conversation.startSession({ |
| 14 | agentId, |
| 15 | conversationToken: token, |
| 16 | connectionType: "webrtc", |
| 17 | }); |
useConversationフックが音声のキャプチャ、ストリーミング、音声アクティビティ検出、再生を処理します。
ウェブ検索で調査を深める
会話を始める前にもっと歴史的な背景を知りたいユーザー向けに、OpenAIのウェブ検索ツールを使った強化リサーチモードを追加できます：
| 1 | const response = await openai.responses.create({ |
| 2 | model: "gpt-5.2", |
| 3 | instructions: RESEARCH_SYSTEM_PROMPT, |
| 4 | tools: [{ type: "web_search_preview" }], |
| 5 | input: `Research ${identification.statueName}. Search for current information |
| 6 | including location, visiting hours, and recent news about the artwork.`, |
| 7 | }); |
学んだこと
このプロジェクトは、テキスト・リサーチ・ビジョン・オーディオなど異なるAIモダリティを組み合わせることで、デジタルと現実世界をつなぐ体験が作れることを示しています。マルチモーダルエージェントには、教育・仕事・エンタメなど、まだまだ未開拓の可能性がたくさんあります。もっと多くの方に挑戦してほしいです。
今すぐ作り始めよう
このプロジェクトで使ったAPI（ ボイスデザイン、 ElevenAgents、OpenAI）はすべて今すぐ利用できます。
ElevenLabsチームによる記事をもっと見る
Developer
How to use Agent Skils
Agent Skills are one of the highest-leverage ways to use LLMs. They provide the appropriate context for the task you want to accomplish in a repeatable manner.