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).
| Package | Use it when |
|---|---|
| @speechineer/react | React: SpeechineerProvider once, then useSpeechToForm / useTextToForm. Start here if you are on React. |
| @speechineer/angular | Angular: provideSpeechineer() in your providers, then injectSpeechToForm / injectTextToForm — state as signals. |
| @speechineer/js | Plain JavaScript or any other framework: createClient(), then client.speechToForm() / client.textToForm() and subscribe to the session state. |
What you implement
- 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 AngularprovideSpeechineer(). - Name the form:
form.source: "workspace"for a form you configured in Speechineer,"inline"to ship the fields from your code. - Call the capability —
useSpeechToForm— and render from its state:valuesholds the latest value of every field (or push them into your form library withonFieldValue). - Wire a button to
start/stopand showisListening.
A complete integration
npm add @speechineer/react// 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
SDK guide
The client, the two capabilities (speech-to-form, text-to-form), workspace vs. inline forms, state and errors — in React, Angular and plain JavaScript.
Authentication and accounts
Unsigned keys for development, signed tokens for production, and managing accounts from your backend.
Errors
The stable codes a call or a running session can report, and what to do about each.
API reference
Every option, callback, and return value — generated from the SDK, one version at a time.