By Sagar Shankaran, Founder of CallSphere
SvelteKit 2 + Svelte 5 runes give you reactive voice UI with 30% smaller bundles than React. Wire WebRTC ephemeral keys to OpenAI Realtime for browser-direct voice.
Key takeaways
TL;DR — Svelte 5 runes (
$state,$derived) plus SvelteKit 2 form actions make WebRTC voice agents 30-40% smaller than the React equivalent. OpenAI ephemeral keys make browser-direct WebRTC safe to expose.
A SvelteKit page where a button mounts a WebRTC peer connection to OpenAI Realtime, the audio plays through a hidden <audio> element, and live transcripts stream into a runes-driven UI.
@sveltejs/kit@^2.5, svelte@^5, Vite 5+.OPENAI_API_KEY server-side.flowchart LR
UI[Svelte 5 page] -->|form action| SK[SvelteKit /api/key]
SK -->|POST /v1/realtime/sessions| OA1[OpenAI sessions]
OA1 --> SK --> UI
UI -- WebRTC SDP --> OA2[OpenAI Realtime]
```ts // src/routes/api/key/+server.ts import { OPENAI_API_KEY } from "$env/static/private"; import { json } from "@sveltejs/kit";
export async function POST() {
const r = await fetch("https://api.openai.com/v1/realtime/sessions", {
method: "POST",
headers: { Authorization: Bearer ${OPENAI_API_KEY},
"Content-Type": "application/json" },
body: JSON.stringify({ model: "gpt-realtime", voice: "verse" }),
});
return json(await r.json());
}
```
```svelte
{transcript}
```
Hear it before you finish reading
Talk to a live CallSphere AI voice agent in your browser — 60 seconds, no signup.
Send tool definitions on session.update via dc.send(...). When the model emits response.function_call_arguments.done, run your tool and reply with conversation.item.create.
@sveltejs/adapter-vercel deploys both the SSR routes and /api/key to Vercel functions.
The voice page weighs ~32kb gzipped (vs ~52kb for the React equivalent), thanks to runes' compiled-out reactivity.
$: reactivity doesn't carry over to runes — pick one and stay consistent.bind:this timing: Audio element is null in onMount if you reference it too early.createOffer.CallSphere ships voice UIs across 6 verticals with 37 agents and 90+ tools powered by 115+ DB tables. While the public sites use Next.js, internal admin panels were prototyped in SvelteKit for the smaller bundle. Pricing $149/$499/$1,499, 14-day trial, 22% affiliate.
Svelte 5 stable? Yes — GA October 2024, ~5M weekly downloads by 2026.
SvelteKit 2 + Vite 5? Vite 5+ is required; Vite 6 supported in 2.5+.
SSR for the voice page? Use +page.svelte with ssr = false — WebRTC needs the browser.
Tool streaming? Yes — Realtime data channel emits tool deltas just like JSON events.
Still reading? Stop comparing — try CallSphere live.
CallSphere ships complete AI voice agents per industry — 14 tools for healthcare, 10 agents for real estate, 4 specialists for salons. See how it actually handles a call before you book a demo.
One layer below what Build an AI Voice Agent with SvelteKit + WebRTC + OpenAI Realtime (2026) covers, the practical question every team hits is multi-turn handoffs between specialist agents without losing slot state, sentiment, or escalation context. Treat this as a voice-first system from the first prompt: the agent's persona, its tool surface, and its escalation rules all flow from that single decision. Teams that ship fast tend to instrument the loop end-to-end before they tune any single component, because the bottleneck is rarely where intuition puts it.
A production-grade voice stack at CallSphere stitches Twilio Programmable Voice (PSTN ingress, TwiML, bidirectional Media Streams) to a realtime reasoning layer — typically OpenAI Realtime or ElevenLabs Conversational AI — with sub-second response as a hard SLO. Anything north of one second of perceived silence and callers either repeat themselves or hang up; that single number drives the whole architecture. Server-side VAD with proper barge-in support is non-negotiable, otherwise the agent talks over the caller and the conversation collapses. Streaming TTS with phoneme-aligned interruption keeps the cadence natural even when the user changes their mind mid-sentence. Post-call, every transcript is run through a structured pipeline: sentiment, intent classification, lead score, escalation flag, and a normalized slot extraction (name, callback number, reason, urgency). For healthcare workloads, the BAA-covered storage path, audit logs, encryption-at-rest, and PHI-safe transcript redaction are wired in from day one, not bolted on at compliance review. The end state is a system where every call produces a row of structured data, not just a recording.
What is the fastest path to a voice agent the way Build an AI Voice Agent with SvelteKit + WebRTC + OpenAI Realtime (2026) describes?
Treat the architecture in this post as a starting point and instrument it before you tune it. The metrics that matter most early on are end-to-end latency (target < 1s for voice, < 3s for chat), barge-in correctness, tool-call success rate, and post-conversation lead score distribution. Optimize whatever the data flags as the bottleneck, not whatever feels slowest in your head.
What are the gotchas around voice agent deployments at scale?
The two failure modes that bite hardest are silent context loss across multi-turn handoffs and tool calls that succeed in dev but get rate-limited in production. Both are solvable with a proper agent backplane that pins state to a session ID, retries with backoff, and writes every tool invocation to an audit log you can replay.
What does the CallSphere outbound sales calling product do that a regular dialer does not?
It uses the ElevenLabs "Sarah" voice, runs up to 5 concurrent outbound calls per operator, and ships with a browser-based dialer that transfers warm calls back to a human in one click. Dispositions, transcripts, and lead scores write back to the CRM automatically.
Book a 30-minute working session at calendly.com/sagar-callsphere/new-meeting and bring a real call flow — we will walk it through the live outbound sales dialer at sales.callsphere.tech and show you exactly where the production wiring sits.
Written by
Sagar Shankaran· Founder, CallSphere
Sagar Shankaran is the founder of CallSphere, where he builds production AI voice and chat agents deployed across healthcare, hospitality, real estate, and home services. He writes about agentic AI, LLM engineering, and shipping voice agents that handle real calls in production.
See how AI voice agents work for your industry. Live demo available -- no signup required.
The voice AI market hits $47.5B by 2034. For gyms and PT studios, voice agents now make economic sense for member intake, upsells, and reactivation campaigns.
With the voice AI market at $47.5B by 2034 and OpenAI's realtime release this week, every dealership and service shop should be evaluating voice agents. Here's how.
Spring 2026 AC season starts now. With the voice AI market at $47.5B by 2034, HVAC shops without after-hours voice agents will lose to those that have them.
BrowserStack offers 30,000+ real devices; Sauce Labs ships deep Appium automation. Here is how AI voice agent teams use both for WebRTC mobile QA in 2026.
OpenAI's GPT-Realtime-Translate handles 70 input languages live at $0.034/min. Here is what that means for multilingual restaurant takeout — and how CallSphere ships it.
OpenAI's GPT-Realtime-Translate hits 70 languages at $0.034/min. For dental practices in diverse metros, this changes who picks up the phone — and who books the appointment.
© 2026 CallSphere LLC. All rights reserved.
Watch how CallSphere handles real customer calls, schedules appointments, and processes payments — live.
Try Live DemoBook a DemoCalculate Your ROI