> ## Documentation Index
> Fetch the complete documentation index at: https://developer.suki.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Tabs>
  <Tab title="JavaScript">
    ```javascript JavaScript theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
    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);
      },
    });
    ```
  </Tab>

  <Tab title="React">
    ```jsx React theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
    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>
      );
    }
    ```
  </Tab>
</Tabs>

<Note>
  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](/dictation-sdk/react-integration/react) for patterns that match your app.
</Note>

## Next steps

<Icon icon="file-lines" iconType="solid" /> [Configuration](/dictation-sdk/guides/configuration) for the full **`AuthConfig`** and **`ShowOptions`** tables, [field IDs](/dictation-sdk/guides/configuration#field-ids-in-practice), and [Wrapper layout](/dictation-sdk/guides/configuration#wrapper-layout)
<Icon icon="file-lines" iconType="solid" /> [Callbacks](/dictation-sdk/guides/callbacks) for callback behavior and edge cases