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

# Form Filling SDK Configuration Examples

> JavaScript and React code samples for SukiAuthManager and FormFillingClient session setup

The following examples in this guide show how to configure `SukiAuthManager` and `FormFillingClient` in JavaScript and React.

Before you begin, obtain your `form_template_ids` from your Suki support team. These are the `template_id` UUIDs enabled for your account. For the list of supported template types, refer to [Form filling templates](/documentation/concepts/form-filling/form-filling-templates).

## What each step does

<Steps>
  <Step title="Authenticate">
    Create `SukiAuthManager` with your `partnerId`, `partnerToken`, and `environment`. The SDK signs in before the Form filling interface can open.
  </Step>

  <Step title="Create the Client">
    Pass the auth manager to `new FormFillingClient({ authManager })`. Create this once per page and reuse it for every session. Optionally add `onError` to log configuration or runtime errors.
  </Step>

  <Step title="Open a Session">
    Call `client.start()` or render `<FormFilling>` with `form_template_ids` and `onSubmit`. Pass your encounter ID as `correlation_id` so results map to the right patient record. In JavaScript, also pass `rootElement` and give that container explicit height.
  </Step>
</Steps>

<Tabs>
  <Tab title="JavaScript">
    ```html HTML theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
    <div id="suki-form-container" style="width:100%;height:600px;"></div>
    <button type="button" id="fill-forms-btn">Fill Forms with Suki</button>
    ```

    ```javascript JavaScript expandable theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
    import { SukiAuthManager } from "@suki-sdk/core";
    import { FormFillingClient } from "@suki-sdk/form-filling";

    const authManager = new SukiAuthManager({
      partnerId: "YOUR_PARTNER_ID", // Required
      partnerToken: "YOUR_PARTNER_TOKEN", // Required
      environment: "staging", // Optional
      loginOnInitialize: true,
      autoRegister: false, // optional (default true); when true, provider fields below are often required
      providerId: "YOUR_PROVIDER_ID", // Optional
      providerName: "Dr. Jane Smith", // Optional
    });

    const client = new FormFillingClient({
      authManager,
      onError: (err) => console.error(err.code, err.reason, err.message),
    });

    document.getElementById("fill-forms-btn").addEventListener("click", async () => {
      await client.start({
        rootElement: document.getElementById("suki-form-container"),
        form_template_ids: ["YOUR_TEMPLATE_ID"],
        correlation_id: "c3d4e5f6-a7b8-9012-cdef-123456789012",
        onReady: () => console.log("Form UI ready"),
        onSubmit: (result) => console.log(result.structured_data.generated_values),
        onCancel: () => console.log("Cancelled"),
      });
    });
    ```
  </Tab>

  <Tab title="React">
    ```jsx React expandable theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
    import { useMemo, useState } from "react";
    import { SukiAuthManager } from "@suki-sdk/core";
    import { FormFillingClient, FormFillingProvider, FormFilling } from "@suki-sdk/form-filling-react";

    export function FormFillingExample() {
      const client = useMemo(() => {
        const authManager = new SukiAuthManager({
          partnerId: "YOUR_PARTNER_ID", // Required
          partnerToken: "YOUR_PARTNER_TOKEN", // Required
          environment: "staging", // Optional
          loginOnInitialize: true,
          autoRegister: false, // optional (default true); when true, providerName and providerOrgId are often required
        });
        return new FormFillingClient({ authManager });
      }, []);

      const [open, setOpen] = useState(false);

      return (
        <FormFillingProvider client={client}>
          <button type="button" onClick={() => setOpen(true)} disabled={open}>
            Fill Forms with Suki
          </button>
          {open && (
            <FormFilling
              form_template_ids={["YOUR_TEMPLATE_ID"]}
              correlation_id="c3d4e5f6-a7b8-9012-cdef-123456789012"
              onSubmit={() => setOpen(false)}
              onCancel={() => setOpen(false)}
            />
          )}
        </FormFillingProvider>
      );
    }
    ```
  </Tab>
</Tabs>

<Tip>
  * In React, create **`FormFillingClient`** inside **`useMemo`** so you do not build a new client on every render. Mount **`<FormFilling>`** only while Form filling should be visible.

  * Always implement **`onSubmit`**. It runs when structured JSON is ready after processing, not when the clinician taps **submit**.
</Tip>

## Next steps

<Icon icon="file-lines" iconType="solid" /> [Configuration](/form-filling-sdk/guides/configuration) for the full **`start()`** and **`<FormFilling>`** field reference

<Icon icon="file-lines" iconType="solid" /> [Quickstart](/form-filling-sdk/quickstart) for a full walkthrough

<Icon icon="file-lines" iconType="solid" /> [Basic usage example](/form-filling-sdk/examples/basic-usage) for session status UI with **`useFormFilling()`**