Skip to content

Local Voice Chat Codebase Dossier

Purpose

This dossier explains local-voice-chat (WebVoice Studio), a Vite/React application that keeps speech recognition, language-model inference, tool execution, and speech synthesis in the browser. The report is based on repository inspection on 2026-07-10.

Read first

  1. Product and system overview
  2. Agentic AI architecture
  3. Frontend deep dive
  4. Unique engineering highlights
  5. Interview preparation

Executive summary

WebVoice Studio is a static, client-only voice workbench. The UI coordinates a microphone audio worklet, a Silero-VAD/STT worker, several browser LLM backends, and Supertonic/Piper TTS providers. Models are loaded on demand and cached by browser storage layers; no application server or API key is required.

The most distinctive design is the runtime adapter boundary in src/lib/llm-runtime.ts: custom WebGPU kernels, Transformers.js, and WebLLM expose a common streaming interface. The voice agent then adds bounded tool rounds, sentence-level TTS streaming, interruption/barge-in, and explicit model unload paths.

System map

flowchart TD
  classDef default fill:#1e293b,stroke:#38bdf8,stroke-width:2px,color:#f8fafc
  classDef highlight fill:#065f46,stroke:#34d399,stroke-width:2px,color:#f0fdf4
  classDef warning fill:#78350f,stroke:#fbbf24,stroke-width:2px,color:#fffbeb
  User["User"]:::highlight --> UI["React studios"]
  UI --> Mic["AudioWorklet + microphone"]
  Mic --> Worker["STT/VAD worker"]
  Worker --> Runtime["LLM runtime adapters"]
  Runtime --> TTS["Supertonic or Piper"]
  Runtime --> UI
  TTS --> Audio["Browser audio playback"]
  Runtime --> Tools["Bounded local tools"]
  linkStyle default stroke:#64748b,stroke-width:2px

The application is a frontend-only pipeline; persistence is limited to browser preferences, model caches, and transient message audio URLs.

Top things to know

  • React 19 and Vite provide the application shell; there is no backend.
  • STT runs in public/stt-worker-esm.js, separated from UI rendering.
  • Microphone frames pass through public/vad-processor.js before reaching the worker.
  • LLM engines are selected by model metadata and loaded lazily.
  • Streaming events distinguish answer text, thinking, tool calls, tool results, and completion.
  • TTS can synthesize complete text or sentence chunks while the LLM is still generating.
  • Barge-in aborts generation and stops playback when configured.
  • Local tools are intentionally small: calculator and current time.
  • localStorage, IndexedDB/cache APIs, OPFS, and object URLs form the client persistence boundary.
  • Cross-origin isolation headers enable multi-threaded ONNX WASM.

Coverage

Chapter Focus
00 Evidence and confidence
01 Product and workflows
02 Agent, tools, and streaming
03 Backend boundary and runtime services
04 React UI and state
05 Browser data and artifacts
06 Build and deployment
07 Privacy and safety boundaries
08 Tests and quality signals
09 Distinctive engineering
10 Interview scripts and questions
11 Gaps and next steps

Preview

make -C projects/local-voice-chat build
make -C projects/local-voice-chat consolidate

The repository itself is run with pnpm install, pnpm dev, and pnpm build.