We Built an Open-Source Browser Speech Widget for Any Textarea

We wanted a dead-simple way for anyone to add DictatorFlow voice input to an existing web product without rewriting their frontend. So we built a standalone browser widget that mounts beside a textarea, opens a polished speech modal, and inserts the transcript straight back into the page.

The Smallest Possible Integration

The core flow is intentionally tiny: load one script, point it at a field, and you get a microphone button plus a transcription modal.

<script src="https://dictatorflow.com/embed/dictatorflow-stt.js"></script>
<textarea id="notes"></textarea>

<script>
  window.DictatorFlowSTT.mount(document.getElementById("notes"), {
    endpoint: "/api/dictation",
    title: "Dictate your notes"
  });
</script>

Why We Open-Sourced It

The browser widget is not meant to lock people into a proprietary frontend. It is the opposite. We want teams to embed voice input wherever it makes sense: support forms, CRM notes, clinical intake, field reports, bug trackers, internal tools, and AI chat boxes.

The source is now structured inside this repo for extraction and publication under the lee101 account. The browser asset lives at /embed/dictatorflow-stt.js, and the packaging docs, examples, and backend proxy bindings live under open-source/browser-widget/.

Backend Bindings Included

We also added starter proxy examples for teams that do not want browser clients talking to DictatorFlow directly. There are ready-to-adapt bindings for Python and Go, plus browser examples for plain HTML and React.

Where to Start

If you want the full API surface, start with the browser widget docs. If you just want to test the raw asset, load /embed/dictatorflow-stt.js directly.