Scrim UI

Voice Assistant TemplatePro

Realtime speech over WebRTC with barge-in that actually retracts playback, a live waveform, a transcript store — and a simulated backend so it runs with zero credentials.

Next.js 16React 19OpenAI RealtimeTailwind v4TypeScript
state: idle

Voice Assistant

Realtime, full-duplex, interruptible

Off

Press to start.

The transcript appears here as you talk.
Click to talk

A scripted replay of one call — the waveform, transcript, push-to-talk and call controls above are the real components the template ships, mounted here, but no microphone is open and there is no session behind this page. The beat worth watching is the interruption: the assistant’s bubble snaps back to the words that were actually played, because that is what barge-in with playback-time truncation does. The template you download wires this to a realtime session over WebRTC.

Every file in it

The full file list, with line counts — nothing is hidden about what you are getting, only the contents are.

22 files, 1,867 lines

Every file below is real and readable once you have Pro — downloaded as a zip, installed with one shadcn command, or read here in the browser. $49 once, for this and every other Pro item.

.env.example

Built on these components

All free, all documented on their own pages. The template is what wires them together.

Voice Input

A microphone button that expands into a recording panel — live waveform, a running transcript, and cancel or send.

Voice Waveform

An animated audio waveform — distinct bar motion for listening, recording, and the assistant speaking back.

Voice Conversation

A voice conversation as it happens — who is speaking, the live transcript, and replay for any individual turn.

Voice Call Controls

The chrome around a live voice call — an unmistakable mute toggle, a running call timer, and an end button that's always one tap away.

Running it

  1. Download the zip and unpack it, or install it with the shadcn command above — either way the app lands in its own directory. Then npm install.
  2. Add an AI_GATEWAY_API_KEY to .env.local — one key reaches every model the template uses.
  3. npm run dev. To use a provider directly instead, install its package and change one line in the chat route.