Every time I needed voice input in a React app, I ended up wiring it from scratch (via agent). Web Speech API setup, browser inconsistencies, a relay server for the phone-to-desktop connection, later QR pairing, Chrome killing recognition mid-sentence, partial vs. final transcript logic. A day of annoying plumbing before you get to the actual feature.
There was never a ready-made solution for this. So I built one. Install it, add three files, and you have voice input that works — without the day of debugging browser quirks.
is a static SPA you can use as-is if you don't want to build your own frontend — it's open source, no data passes through it, and no audio or text is stored or logged.
How it works
- Your desktop app shows a QR code
- User scans it with their phone
- Phone runs speech-to-text locally (Web Speech API, no key needed)
- Only the transcribed text gets relayed to the desktop
- The desktop app streams the transcript directly into whichever input field currently has focus
Audio never leaves the phone. Your server never sees or stores any audio data. It only relays text.
The architecture
Phone (STT) Your Server Desktop Browser
+-----------+ text only +--------------+ SSE +--------------+
| Web Speech| ---------> | Relay | -----> | useVoicefield|
| API | POST /txt | (in-memory | stream | () hook |
| (browser) | | sessions) | | |
+-----------+ +--------------+ +--------------+
^ ^ |
| QR scan | creates session |
+-------------------------+-----------------------+
The phone and desktop find each other through cryptographic pairing — a 256-bit secret is embedded in the QR code, and the phone gets a 384-bit session token after pairing. Sessions live in memory with a 30-minute sliding TTL. No database needed.
Speech recognition defaults to the browser's built-in Web Speech API, which means zero API keys to get started. If you need better accuracy or more languages, you can plug in
Docs: voicefield.dev
If you build something with it, I'd genuinely love to hear about it.
SOCIAL SHARE CARD GENERATOR