.webp&w=3840&q=95)
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.
Sprechen Sie mit einer Statue: Entwicklung einer multimodalen App mit ElevenAgents
.webp&w=3840&q=95)
Fotografieren Sie eine Statue. Identifizieren Sie die dargestellten Figuren. Führen Sie dann ein Echtzeit-Gespräch mit ihnen – jede Figur spricht mit einer eigenen, zeittypischen Stimme.
Das können Sie mit den Voice Design- und Agent-APIs von ElevenLabs entwickeln. In diesem Beitrag zeigen wir die Architektur einer mobilen Web-App, die Computer Vision mit Sprachgenerierung kombiniert, um öffentliche Denkmäler in interaktive Erlebnisse zu verwandeln. Alles ist mit den untenstehenden APIs und Codebeispielen umsetzbar.
Tutorial überspringen – alles in einem Prompt bauen
Die gesamte App unten wurde aus einem einzigen Prompt erstellt und erfolgreich getestet in Cursor mit Claude Opus 4.5 (high) aus einem leeren NextJS-Projekt. Wenn Sie direkt loslegen möchten, fügen Sie Folgendes in Ihren Editor ein:
| 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 |
Sie können auch dieElevenLabs Agenten-Fähigkeiten nutzen, anstatt direkt auf die Dokumentation zuzugreifen. Diese basieren auf der Dokumentation und liefern oft noch bessere Ergebnisse.
Im Folgenden erklären wir, was dieser Prompt erzeugt.
So funktioniert es
Die Pipeline besteht aus fünf Schritten:
- Bild aufnehmen
- Kunstwerk und Figuren identifizieren (OpenAI)
- Historische Hintergründe recherchieren (OpenAI)
- Individuelle Stimmen für jede Figur generieren (ElevenAPI)
- Echtzeit-Sprachgespräch über WebRTC starten (ElevenAgents)
Die Statue per Vision identifizieren
Wenn ein Nutzer eine Statue fotografiert, wird das Bild an ein OpenAI-Modell mit Vision-Fähigkeit gesendet. Ein strukturierter System-Prompt extrahiert den Namen des Kunstwerks, Standort, Künstler, Datum und – entscheidend – eine detaillierte Stimm-Beschreibung für jede Figur. Der System-Prompt enthält das erwartete JSON-Ausgabeformat:
| 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 | }); |
Für ein Foto der Boudica-Statue auf der Westminster Bridge in London sieht die Antwort so aus:
| 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 | } |
Effektive Stimm-Beschreibungen verfassen
Die Qualität der Stimm-Beschreibung bestimmt direkt die Qualität der generierten Stimme. Der Voice Design Prompting Guide erklärt dies im Detail. Wichtige Attribute sind: Marker für Audioqualität („Perfekte Audioqualität.“), Alter und Geschlecht, Ton/Timbre (tief, resonant, rau), ein präziser Akzent („starker keltisch-britischer Akzent“ statt nur „britisch“) und Sprechtempo. Je genauer die Beschreibung, desto besser das Ergebnis – „eine müde New Yorkerin in ihren 60ern mit trockenem Humor“ liefert immer bessere Resultate als „eine ältere weibliche Stimme“.
Einige Hinweise aus dem Guide: Verwenden Sie „stark“ statt „kräftig“ für die Akzentbeschreibung, vermeiden Sie vage Begriffe wie „fremd“ und schlagen Sie bei fiktiven oder historischen Figuren reale Akzente als Inspiration vor (z. B. „eine keltische Königin mit starkem britischen Akzent, würdevoll und bestimmend“).
Charakterstimmen mit Voice Design erstellen
DieVoice Design API erzeugt neue synthetische Stimmen aus Textbeschreibungen – ohne Sprachproben oder Klonen. Das ist ideal für historische Persönlichkeiten, von denen keine Originalaufnahmen existieren.
Der Prozess besteht aus zwei Schritten.
Vorschau generieren
| 1 | const { previews } = await elevenlabs.textToVoice.design({ |
| 2 | modelId: "eleven_multilingual_ttv_v2", |
| 3 | voiceDescription: character.voiceDescription, |
| 4 | text: sampleText, |
| 5 | }); |
Der Textparameter ist entscheidend. Längere, charaktergerechte Beispieltexte (50+ Wörter) liefern stabilere Ergebnisse – passen Sie den Text an die Figur an, statt eine allgemeine Begrüßung zu verwenden. Der Voice Design Prompting Guide geht darauf ausführlich ein.
Stimme speichern
Sobald Vorschauen generiert sind, wählen Sie eine aus und erstellen eine permanente Stimme:
| 1 | const voice = await elevenlabs.textToVoice.create({ |
| 2 | voiceName: `StatueScanner - ${character.name}`, |
| 3 | voiceDescription: character.voiceDescription, |
| 4 | generatedVoiceId: previews[0].generatedVoiceId, |
| 5 | }); |
Bei Statuen mit mehreren Figuren läuft die Stimmenerstellung parallel. Die Stimmen von fünf Figuren werden in etwa der gleichen Zeit generiert wie eine:
| 1 | const results = await Promise.all( |
| 2 | characters.map((character) => createVoiceForCharacter(character)) |
| 3 | ); |
Einen ElevenLabs Agent mit mehreren Stimmen bauen
Sind die Stimmen erstellt, folgt die Konfiguration einesElevenLabs Agent, der in Echtzeit zwischen den Charakterstimmen wechseln kann.
| 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 | }); |
Mehrstimmiges Umschalten
Das supportedVoices-Array gibt dem Agent an, welche Stimmen verfügbar sind. Die Agents-Plattform übernimmt das Umschalten automatisch – erkennt das LLM, dass eine andere Figur spricht, leitet die TTS-Engine diesen Abschnitt an die richtige Stimme weiter.
Prompt-Design für Gruppengespräche
Damit mehrere Figuren wie eine echte Gruppe wirken – und nicht wie eine Abfolge von Fragen und Antworten – ist gezieltes Prompt-Design nötig:
| 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 | `; |
Echtzeit-Sprachübertragung mit WebRTC
Der letzte Schritt ist die Client-Verbindung. ElevenLabs Agents unterstützen WebRTC für latenzarme Sprachgespräche – deutlich schneller als WebSocket-basierte Verbindungen, was für einen natürlichen Gesprächsfluss entscheidend ist.
Server: Konversationstoken abrufen
| 1 | const { token } = await client.conversationalAi.conversations.getWebrtcToken({ |
| 2 | agentId, |
| 3 | }); |
Client: Sitzung starten
| 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 | }); |
Der useConversation-Hook übernimmt Audioaufnahme, Streaming, Spracherkennung und Wiedergabe.
Mehr Recherche-Tiefe durch Websuche
Für Nutzer, die vor dem Gespräch mehr historischen Kontext wünschen, kann ein erweiterter Recherchemodus mit dem Websuche-Tool von OpenAI integriert werden:
| 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 | }); |
Was wir gelernt haben
Dieses Projekt zeigt: Durch die Kombination verschiedener KI-Modalitäten – Text, Recherche, Vision und Audio – entstehen Erlebnisse, die digitale und reale Welt verbinden. In multimodalen Agents steckt viel ungenutztes Potenzial, das wir gerne für Bildung, Arbeit und Unterhaltung weiter erforscht sehen würden.
Jetzt starten
Die in diesem Projekt verwendeten APIs –Voice Design,ElevenAgents und OpenAI – sind alle bereits verfügbar.
Entdecken Sie Artikel des ElevenLabs-Teams
Product
Introducing ElevenAgents for Support
From SOPs to production-ready support agents in minutes.