Dictation SDK Quickstart

import { useMemo, useState } from "react";
import { SukiAuthManager } from "@suki-sdk/core"; // Step 1: Create the auth manager
import { DictationClient } from "@suki-sdk/dictation"; // Step 2: Create the client
import { DictationProvider, Dictation } from "@suki-sdk/dictation-react"; // Step 3: Wrap the tree with DictationProvider

export function NotesWithDictation() {
  const client = useMemo(() => {
    const authManager = new SukiAuthManager({
      partnerId: "YOUR_PARTNER_ID", // replace with your partner ID - required
      partnerToken: "YOUR_PARTNER_TOKEN", // replace with your partner token - required
      environment: "staging", // optional - default is "production"
      loginOnInitialize: true, // optional - default is false
      providerName: "John doe", // optional - default is empty
      providerOrgId: "1234", // optional - default is empty
      providerId: "1234567890", // optional - default is empty
      providerSpecialty: "FAMILY_MEDICINE", // optional - default is empty
    });
    return new DictationClient({ authManager }); // Step 4: Create the client
  }, []); // Step 5: Create the client once and reuse it across fields

  const [notes, setNotes] = useState("");
  const [dictationActive, setDictationActive] = useState(false);

  return (
    <DictationProvider client={client}>
      <textarea
        id="clinical-notes"
        value={notes}
        onChange={(e) => setNotes(e.target.value)}
      />
      <button
        type="button"
        onClick={() => setDictationActive((v) => !v)}
      >
        {dictationActive ? "Stop dictation UI" : "Start dictation"}
      </button>
      {dictationActive && (
        <Dictation
          fieldId="clinical-notes"
          mode="in-field" // required - you must set this as per your use case
          initialText={notes} // optional - you can set this to the initial text of the textarea
          onSubmit={({ text }) => setNotes(text)}
          onCancel={() => setDictationActive(false)}
        />
      )}
    </DictationProvider>
  );
}