Live-Testen auf dieser Seite
Beide Voice-Agenten sind jetzt am Ende dieser Seite in einer eigenen Live-Demo-Sektion direkt zum Ausprobieren eingebettet! Scrolle einfach ganz nach unten, um die beiden Widgets auszuprobieren.
Die Voice AI Pipeline
Ein flüssiges Gespräch erfordert Latenzen unter 800 Millisekunden, um natürlich zu wirken. Traditionelle HTTP-APIs scheitern hieran. Moderne KI-Telefonagenten nutzen stattdessen ein hochintegriertes System aus drei Kernkomponenten über einen permanent geöffneten Streaming-Kanal (STT, LLM-Reasoning, TTS):
Der 4-Stufen-Entwicklungsplan
Um die Sprach-Agenten einsatzbereit zu machen, wurde ein klarer 4-Stufen-Plan verfolgt. Die Bots wurden direkt auf den Plattformen von ElevenLabs und Vapi konfiguriert, mit unserer lokalen Wissensbasis versorgt, per API-Keys abgesichert und schließlich hier im Frontend integriert:
-
🛠️ Stufe 1: Generieren des Bots (Bot Creation)
Der Sprach-Agent wird im jeweiligen Provider-Dashboard (ElevenLabs Conversational AI bzw. Vapi Dashboard) erstellt. Hier werden die Stimme (Voice-ID), das grundlegende Verhalten (System Prompt) sowie Parameter wie Temperatur und maximale Gesprächsdauer konfiguriert. -
📂 Stufe 2: Versorgen mit Datenbasis (Knowledge Source)
Damit die KI über echtes Fachwissen zu Thomas' Projekten verfügt, wird unsere detaillierte Homepage-Struktur im Markdown-Format (doc/chatbot datenbasis.md) als Wissensquelle (Retriever / Files-Integration) hochgeladen. Der Bot zieht sich bei Fragen diese Fakten in Echtzeit heran. -
🔑 Stufe 3: Erstellen der API Keys (Authentication)
Zur sicheren Verbindung des Clients mit dem Provider werden die Public API Keys und die spezifischen Assistant- bzw. Agenten-IDs generiert und im Code hinterlegt. -
💻 Stufe 4: Einbinden in die Homepage (Frontend Integration)
Laden der offiziellen Web-SDKs über CDN-Skripte und die optische Integration über HTML-Komponenten. Das Design wurde mittels Custom CSS und Dynamic DOM-Placement vollständig an den edlen Glassmorphismus der Homepage angepasst.
(Dashboard)"] --> B["2. Datenbasis (.md)
hochladen"] B --> C["3. API-Keys &
IDs auslesen"] C --> D["4. Homepage-Einbau
(HTML/JS-SDK)"] style A fill:#0f172a,stroke:#06b6d4,stroke-width:2px; style B fill:#0f172a,stroke:#06b6d4,stroke-width:2px; style C fill:#0f172a,stroke:#06b6d4,stroke-width:2px; style D fill:#0f172a,stroke:#06b6d4,stroke-width:2px;
Latenzreduktion & WebRTC
Um Verzögerungen im Netzverkehr zu minimieren, wird statt HTTP/REST eine bidirektionale Verbindung über WebSockets oder WebRTC (Web Real-Time Communication) genutzt. Die Audiodaten werden komprimiert und in winzigen Paketen kontinuierlich gestreamt. Das LLM fängt bereits an zu antworten, während die TTS-Komponente die ersten Silben generiert (Audio-Streaming). Dadurch sinkt die Reaktionszeit der KI auf ein nahezu menschliches Niveau von ca. 500–700ms.
System-Architektur
Die Sequenz der Datenströme veranschaulicht, wie die Latenz durch flüssiges Streaming minimiert wird:
Vergleich: Zwei unterschiedliche Voice-Projekte
Obwohl beide Sprach-Assistenten die gleiche Wissensbasis nutzen, handelt es sich um zwei getrennte Showcase-Projekte mit unterschiedlichen Architekturschwerpunkten:
Projekt A: ElevenLabs ConvAI
**Fokus:** Extrem realistische Web-Interaktion. ElevenLabs glänzt durch eine marktführende Stimmsynthese (TTS) mit authentischer Betonung, Emotionen und lebensechten Atemgeräuschen. Der Client bindet das SDK über ein natives HTML Custom Element direkt in der Webseite ein.
<elevenlabs-convai agent-id="..."> </elevenlabs-convai>
Projekt B: Vapi Telefon-Infrastruktur
**Fokus:** Nahtlose Telefonie- und Web-Integration. Vapi fungiert als vollwertiger Voice-Router, der per SIP/PSTN direkt an das Telefonnetz angebunden werden kann. Verwendet eine hybride Pipeline aus **Deepgram Nova 2** (STT), **Claude 3.5 Haiku** (LLM) und ElevenLabs (TTS).
vapiSDK.run({
apiKey: "...",
assistant: "..."
});
Live-Quasselstunde: Teste die Roboter direkt!
ElevenLabs Web-Stimme
Quatsche direkt im Browser mit der hyperrealistischen, emotionsgeladenen KI-Stimme von ElevenLabs.
Vapi Telefon-Gehirn
Teste hier die Vapi-Pipeline (mit Claude 3.5 Haiku & Deepgram). Sie kann sogar an echte Telefonnummern angebunden werden!
Fazit
Die Kombination aus modernen WebRTC-Streaming-Protokollen und schnellen LLMs macht Voice AI heute praxistauglich. Mit Latenzen unter einer Sekunde fühlt sich das Gespräch flüssig und menschlich an. Die Verlagerung in den Blogbereich sorgt für eine ruhige Startseite, bietet interessierten Lesern hier aber das volle interaktive Erlebnis.