.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.
Porozmawiaj z posągiem: jak stworzyć wielomodalną aplikację z ElevenAgents
.webp&w=3840&q=95)
Zrób zdjęcie posągu. Rozpoznaj postacie. Potem porozmawiaj z nimi na żywo – każda mówi innym, pasującym do epoki głosem.
To możesz zbudować z Voice Design i Agent API od ElevenLabs. W tym wpisie pokazujemy, jak działa aplikacja mobilna, która łączy computer vision z generowaniem głosu, by zamienić pomniki w interaktywne doświadczenia. Wszystko możesz powtórzyć dzięki poniższym API i przykładom kodu.
Pomiń tutorial – zbuduj to jednym promptem
Cała aplikacja poniżej powstała z jednego prompta, przetestowana i działa od razu w Kursor z Claude Opus 4.5 (high) na pustym projekcie NextJS. Jeśli chcesz od razu zbudować własną wersję, wklej to do swojego edytora:
| 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 |
Możesz też użyć Umiejętności ElevenLabs Agent zamiast linkować do dokumentacji. Są oparte na dokumentacji i często dają jeszcze lepsze efekty.
Dalej w tym wpisie rozkładamy na części to, co robi ten prompt.
Jak to działa
Całość składa się z pięciu etapów:
- Zrób zdjęcie
- Rozpoznaj dzieło i postacie (OpenAI)
- Zbadaj historię (OpenAI)
- Wygeneruj unikalne głosy dla każdej postaci (ElevenAPI)
- Rozpocznij rozmowę głosową na żywo przez WebRTC (ElevenAgents)
Rozpoznawanie posągu przez wizję
Gdy użytkownik robi zdjęcie posągu, obraz trafia do modelu OpenAI z obsługą wizji. Specjalny prompt systemowy wyciąga nazwę dzieła, lokalizację, autora, datę i – co ważne – szczegółowy opis głosu każdej postaci. Prompt zawiera oczekiwany format wyjścia w 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 | }); |
Dla zdjęcia posągu Boudiki na Westminster Bridge w Londynie odpowiedź wygląda tak:
| 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 | } |
Jak pisać dobre opisy głosu
Jakość opisu głosu bezpośrednio wpływa na jakość wygenerowanego głosu. Przewodnik po promptach Voice Design opisuje to dokładnie, ale najważniejsze cechy to: znacznik jakości dźwięku („Perfekcyjna jakość audio.”), wiek i płeć, ton/barwa (głęboki, rezonujący, chropowaty), dokładny akcent („mocny celtycki brytyjski” zamiast po prostu „brytyjski”) i tempo mowy. Im bardziej szczegółowy prompt, tym lepszy efekt – „zmęczona nowojorczyni po sześćdziesiątce z suchym poczuciem humoru” zawsze będzie lepsze niż „starszy kobiecy głos”.
Kilka rzeczy z przewodnika: używaj „mocny” zamiast „silny” przy opisie akcentu, unikaj ogólników typu „obcy”, a dla postaci fikcyjnych lub historycznych możesz podać realny akcent jako inspirację (np. „starożytna celtycka królowa z mocnym brytyjskim akcentem, dostojna i stanowcza”).
Tworzenie głosów postaci w Voice Design
Voice Design API generuje nowe syntetyczne głosy na podstawie opisu tekstowego – nie potrzebujesz próbek ani klonowania głosu. To świetne rozwiązanie dla postaci historycznych, których nagrań nie ma.
Proces składa się z dwóch kroków.
Wygeneruj podglądy
| 1 | const { previews } = await elevenlabs.textToVoice.design({ |
| 2 | modelId: "eleven_multilingual_ttv_v2", |
| 3 | voiceDescription: character.voiceDescription, |
| 4 | text: sampleText, |
| 5 | }); |
Parametr tekstowy ma znaczenie. Dłuższy, pasujący do postaci tekst (50+ słów) daje stabilniejsze efekty – dopasuj wypowiedź do postaci, nie używaj ogólnych powitań. Przewodnik po promptach Voice Design opisuje to szerzej.
Zapisz głos
Gdy masz podglądy, wybierz jeden i utwórz stały głos:
| 1 | const voice = await elevenlabs.textToVoice.create({ |
| 2 | voiceName: `StatueScanner - ${character.name}`, |
| 3 | voiceDescription: character.voiceDescription, |
| 4 | generatedVoiceId: previews[0].generatedVoiceId, |
| 5 | }); |
Przy kilku postaciach głosy generują się równolegle. Pięć głosów powstaje w podobnym czasie co jeden:
| 1 | const results = await Promise.all( |
| 2 | characters.map((character) => createVoiceForCharacter(character)) |
| 3 | ); |
Budowanie agenta ElevenLabs z wieloma głosami
Gdy masz już głosy, kolejny krok to konfiguracjaAgent ElevenLabs, który potrafi przełączać się między głosami postaci na żywo.
| 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 | }); |
Przełączanie głosów
Tablica supportedVoices mówi agentowi, które głosy są dostępne. Platforma Agents sama przełącza głosy – jeśli LLM wskaże, że mówi inna postać, silnik TTS przekieruje tę część do właściwego głosu.
Projektowanie promptów do rozmów grupowych
By kilka postaci brzmiało jak prawdziwa grupa, a nie tylko odpowiadało po kolei, trzeba dobrze zaprojektować prompt:
| 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 | `; |
Rozmowa na żywo przez WebRTC
Na końcu jest połączenie z klientem. ElevenLabs Agents obsługują WebRTC, więc rozmowy głosowe są bardzo szybkie – dużo szybciej niż przez WebSocket, co ma znaczenie przy naturalnej wymianie zdań.
Po stronie serwera: pobierz token rozmowy
| 1 | const { token } = await client.conversationalAi.conversations.getWebrtcToken({ |
| 2 | agentId, |
| 3 | }); |
Po stronie klienta: rozpocznij sesję
| 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 | }); |
Hook useConversation obsługuje nagrywanie, streaming, wykrywanie aktywności głosowej i odtwarzanie.
Więcej wiedzy dzięki wyszukiwarce
Jeśli użytkownik chce więcej kontekstu historycznego przed rozmową, możesz dodać tryb rozszerzonych badań z narzędziem wyszukiwania 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 | }); |
Czego się nauczyliśmy
Ten projekt pokazuje, że łącząc różne możliwości AI – tekst, badania, wizję i audio – można tworzyć doświadczenia łączące świat cyfrowy i rzeczywisty. W multi-modalnych agentach jest jeszcze mnóstwo nieodkrytego potencjału – chcemy, żeby więcej osób to sprawdziło w edukacji, pracy i zabawie.
Zacznij budować
API użyte w tym projekcie –Voice Design,ElevenAgents i OpenAI – są dostępne już teraz.
Przeglądaj artykuły zespołu ElevenLabs
Product
Introducing ElevenAgents for Support
From SOPs to production-ready support agents in minutes.