Shadcn/UI

Beyond the Chat Interface While 2025 cemented the chat agent as the default AI interface for platforms like Linear and PostHog, the paradigm is shifting toward voice. Voice is inherently more accessible and enables omnichannel interactions that text cannot touch—think automated phone support or agents joining Zoom calls to verify data in real-time. The challenge for developers isn't starting over, but upgrading the sophisticated agents they've already tuned with RAG and complex tool-calling logic. Prerequisites To follow this guide, you should be comfortable with **JavaScript/TypeScript**, understand **RESTful API** patterns, and have an existing chat agent architecture (like a Node.js backend) that processes text strings and returns responses. Key Libraries & Tools * **ElevenLabs Voice Engine**: The core primitive that handles the speech-to-text (STT) and text-to-speech (TTS) pipeline. * **Scribe**: ElevenLabs' high-accuracy STT model used for transcription. * **V3 Turbo**: The low-latency TTS model optimized for conversational speed. * **Shadcn/UI**: Used for the pre-built, accessible frontend components. Implementing the Server Wrapper The beauty of the ElevenLabs approach is that you don't rewrite your agent logic. You wrap it. The server SDK acts as a proxy, intercepting the audio stream, converting it to text for your existing agent, and then synthesizing the agent's response back into high-quality audio. ```javascript import { VoiceEngineClient } from "@elevenlabs/sdk"; const client = new VoiceEngineClient({ apiKey: process.env.ELEVENLABS_API_KEY }); // Wrap your existing chat logic const voiceAgent = client.voiceEngine.create({ agent: async (textInput) => { // This calls your existing LLM/RAG pipeline const response = await myExistingChatAgent.process(textInput); return response.text; }, voiceId: "pMs7msAnqA7ihSps3teH", sttModel: "scribe-v1" }); ``` Frontend Integration and UI On the client side, integration is even leaner. You can use pre-built components styled with Tailwind CSS and Vercel aesthetics to provide visual feedback for voice activity. ```javascript // In your React/Next.js component import { VoiceWidget } from "@elevenlabs/react-ui"; export default function App() { return <VoiceWidget agentId="your-wrapped-agent-id" />; } ``` Syntax Notes and Best Practices The engine uses **Semantic Break Detection**, which understands context-aware pauses. It knows the difference between a user pausing to think and a user finishing their sentence. When implementing tool calling, keep your logic on the server side; the Voice Engine will proxy these calls through your wrapped agent, maintaining the state of your existing backend without requiring a frontend rewrite. Tips & Gotchas Avoid the trap of rebuilding your RAG pipeline inside the voice engine. By using the **Proxy Paradigm**, you retain your existing evals and prompt engineering. If your agent feels slow, check the **TTS model settings**; switching to a "Turbo" variant often reduces the time-to-first-byte for audio playback, which is critical for making AI feel human.