@speechineer/react

Speechineer for React. Wrap your app in SpeechineerProvider once (your API key, or a token your server signs), then call one hook per capability: useSpeechToForm to fill a form by voice, useTextToForm to fill it from text. Each hook gives you the session state as plain values (values, transcript, isListening, error, …) and the controls (start, stop, end / extract). The client, the form definition, the callbacks, and the state types are shared by every package and documented once in the Core reference.

Setup

The provider: give it your credentials (or a client you created) and every hook below it uses the same client.

SpeechineerProviderProps

What the provider takes: either a client you created yourself, or the client options (apiKey / token, account, baseUrl) — the provider creates the client for you and keeps it for as long as the options stay the same.

Extends

• ClientOptions

Properties

SpeechineerProvider()

function SpeechineerProvider(__namedParameters): Element;

Wrap your app (or the part of it that talks to Speechineer) once. Every hook below it uses the same client.

Parameters

Returns

Element

Example

import { SpeechineerProvider } from "@speechineer/react";

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

useSpeechineer()

function useSpeechineer(): SpeechineerClient;

The client the nearest SpeechineerProvider created — for the rare case where you want to create a session yourself (client.speechToForm(...)) instead of using a hook.

Returns

SpeechineerClient

Capability: Speech to form

Fill a form by voice: values stream into values (and onFieldValue) as the user speaks; add transcript: true to also receive the spoken text.

UseSpeechToFormOptions

The options of useSpeechToForm: the session options every framework shares, plus an optional client to use instead of the provider's.

Extends

• SpeechToFormOptions

Properties

UseSpeechToFormResult

What useSpeechToForm returns: the session state spread out for rendering (values, transcript, isListening, isConnecting, isEnding, error, sessionId, status, connections), the controls, and the full state object for when you want to compare by reference.

Extends

• SessionState

Properties

useSpeechToForm()

function useSpeechToForm(options): UseSpeechToFormResult;

Fill a form by voice. The session is created once per component and released when the component goes away; the callbacks you pass are always the latest ones. transcript and form.source are fixed for the component's lifetime; the rest of form (key, version, language) is read each time a session starts, so a change applies to the next session after end(). To change everything at once, render a new component (for example with a key).

Parameters

Returns

UseSpeechToFormResult

Example

import { useSpeechToForm, FormField } from "@speechineer/react";

const fields = [
  FormField.text("patientName", "Extract the patient full name"),
  FormField.integer("age", "Extract the age in years"),
];

function TalkToForm() {
  const { start, stop, isListening, values } = useSpeechToForm({
    form: { source: "inline", key: "patient-intake", version: "1", language: "en", fields },
  });
  return (
    <>
      <button type="button" onClick={isListening ? stop : () => void start()}>
        {isListening ? "Stop" : "Talk"}
      </button>
      <input value={String(values.patientName ?? "")} readOnly />
    </>
  );
}

Capability: Text to form

No recording at all — turn text the user typed or pasted into field values, as often as you like.

UseTextToFormOptions

The options of useTextToForm: the session options every framework shares, plus an optional client to use instead of the provider's.

Extends

• TextToFormOptions

Properties

UseTextToFormResult

What useTextToForm returns: the session state spread out for rendering, the controls, isExtracting while a call is in flight, and the full state object.

Extends

• SessionState

Properties

useTextToForm()

function useTextToForm(options): UseTextToFormResult;

Extract field values from text the user typed or pasted. extract opens the session on first use and merges every result into values. form.source is fixed for the component's lifetime; the rest of form is read each time a session starts, so a change applies to the next session after end().

Parameters

Returns

UseTextToFormResult

Example

const { extract, values, isExtracting } = useTextToForm({
  form: { source: "workspace", key: "patient-intake", version: "1", language: "en" },
});
await extract("Patient Jane Doe, born 1990-03-28.");