Configuration Examples

JavaScript and React code samples for SukiAuthManager AuthConfig and DictationClient ShowOptions

The code snippets below show JavaScript and React integrations to configure the SukiAuthManager and DictationClient. Replace placeholder values with your partner credentials and DOM nodes.

JavaScript

JavaScript

import { SukiAuthManager } from "@suki-sdk/core";
import { DictationClient } from "@suki-sdk/dictation";

const authManager = new SukiAuthManager({
  partnerId: "YOUR_PARTNER_ID", // Required
  partnerToken: "YOUR_PARTNER_TOKEN", // Required
  environment: "staging", // Optional
  loginOnInitialize: true, // Optional
  providerName: "John doe", // Optional
  providerOrgId: "1234", // Optional
  providerId: "1234567890", // Optional
  providerSpecialty: "FAMILY_MEDICINE", // Optional
});

const dictationClient = new DictationClient({ authManager }); 

await dictationClient.show({
  mode: "in-field",
  fieldId: "clinical-notes",
  rootElement: document.getElementById("clinical-notes-field-root-element-id"),
  initialText: "",
  onSubmit: ({ fieldId, text }) => {
    const el = document.getElementById(fieldId);
    if (el) el.value = text;
  },
  onCancel: ({ fieldId }) => {
    console.log("Cancelled", fieldId);
  },
  onDraft: ({ fieldId, text }) => {
    // Optional: e.g. user left without submit; persist draft in your app if needed
    console.log("Draft", fieldId, text);
  },
});

React

React

import { SukiAuthManager } from "@suki-sdk/core";
import { DictationClient } from "@suki-sdk/dictation";
import { DictationProvider, Dictation } from "@suki-sdk/dictation-react";

const authManager = new SukiAuthManager({
  partnerId: "YOUR_PARTNER_ID", // Required
  partnerToken: "YOUR_PARTNER_TOKEN", // Required
  environment: "staging", // Optional
  loginOnInitialize: true, // Optional
  providerName: "John doe", // Optional
  providerOrgId: "1234", // Optional
  providerId: "1234567890", // Optional
  providerSpecialty: "FAMILY_MEDICINE", // Optional
});

const client = new DictationClient({ authManager });

export function NotesWithDictation() {
  return (
    <DictationProvider client={client}>
      <Dictation
        mode="in-field"
        fieldId="clinical-notes"
        rootElement={document.getElementById("dictation-root")}
        initialText=""
        onSubmit={({ fieldId, text }) => {
          console.log(fieldId, text);
        }}
        onCancel={({ fieldId }) => {
          console.log("Cancelled", fieldId);
        }}
        onDraft={({ fieldId, text }) => {
          // Optional: e.g. user left without submit; persist draft in your app if needed
          console.log("Draft", fieldId, text);
        }}
      />
    </DictationProvider>
  );
}

In a real React app, obtain rootElement with useRef and a useEffect (or render the wrapper in the same tree) so you do not call document.getElementById during SSR. See React integration for patterns that match your app.

Next steps

Configuration

Field ids

Wrapper layout

Callbacks - Callback behavior and edge cases.