SpeechineerDocs

Developer guide

Start here

Speechineer fills forms from speech. Your app records the microphone, the user talks, and finished field values arrive one by one — you write them into the form state you already have. No form rewrite: keep your markup, your validation, and your submit.

Pick your package

One package per framework. They take the same options and report the same session state; only the binding differs (a hook, an inject function, or a plain session).

PackageUse it when
@speechineer/reactReact: SpeechineerProvider once, then useSpeechToForm / useTextToForm. Start here if you are on React.
@speechineer/angularAngular: provideSpeechineer() in your providers, then injectSpeechToForm / injectTextToForm — state as signals.
@speechineer/jsPlain JavaScript or any other framework: createClient(), then client.speechToForm() / client.textToForm() and subscribe to the session state.

What you implement

  1. Install the package and create the client once — your workspace's API key plus the end user's account for development, a token your server signs for production (authentication). In React that is the SpeechineerProvider, in Angular provideSpeechineer().
  2. Name the form: form.source: "workspace" for a form you configured in Speechineer, "inline" to ship the fields from your code.
  3. Call the capability — useSpeechToForm — and render from its state: values holds the latest value of every field (or push them into your form library with onFieldValue).
  4. Wire a button to start / stop and show isListening.

A complete integration

sh
npm add @speechineer/react
tsx
// main.tsx — once: your workspace's API key (development) or a token your server signs (production)
import { SpeechineerProvider } from "@speechineer/react";

<SpeechineerProvider apiKey={import.meta.env.VITE_SPEECHINEER_KEY} account={{ key: currentUser.id }}>
  <App />
</SpeechineerProvider>

// IntakeForm.tsx — the form you configured in Speechineer, filled by voice
import { useSpeechToForm } from "@speechineer/react";

export function IntakeForm() {
  const { start, stop, isListening, values } = useSpeechToForm({
    form: { source: "workspace", key: "patient-intake", version: "1", language: "en" },
    onFieldValue: (fieldId, value) => setFieldValue(fieldId, value), // optional — values are state too
  });

  return (
    <button type="button" onClick={isListening ? stop : () => void start()}>
      {isListening ? "Stop" : "Speak"}
    </button>
  );
}

That is the whole loop. Everything else is choosing the other capability (text to form), hardening the authentication, or reacting to errors.

Next