Build a Web SDK Ambient Session

// Web SDK Ambient session tutorial (React)
// Copy this file into a React app, replace YOUR_* placeholders, then render <App />.
// Flow: SukiProvider → SukiAuthManager → init → SukiAssistant (encounter + LOINC sections)

import { useEffect, useMemo } from "react";
import { SukiAuthManager } from "@suki-sdk/core";
import { SukiProvider, useSuki, SukiAssistant } from "@suki-sdk/react";

// 1) Wrap once at the root. Call init() in a child under SukiProvider, not on the provider itself.
function App() {
  return (
    <SukiProvider>
      <AmbientEncounterPage />
    </SukiProvider>
  );
}

function AmbientEncounterPage() {
  // 2) One long-lived auth manager. Recreating it every render breaks login state.
  const authManager = useMemo(
    () =>
      new SukiAuthManager({
        partnerId: "YOUR_PARTNER_ID", // Required: from partner onboarding
        partnerToken: "YOUR_PARTNER_TOKEN", // Required: keep off public clients in production
        providerName: "Dr. Jane Smith", // Example only — replace with the provider's full name
        providerOrgId: "YOUR_ORG_ID", // Required — replace with your org ID
        environment: "staging", // Example — use "production" only when ready
        loginOnInitialize: true, // Sign in as soon as the manager is created
      }),
    [],
  );

  const { init, isInitialized } = useSuki();

  // 3) Encounter + patient context. Identifiers must be at most 36 characters.
  const encounter = useMemo(
    () => ({
      identifier: "6ec3920f-b0b1-499d-a4e9-889bf788e5ab", // Example only — replace with your encounter ID (max 36 chars)
      patient: {
        identifier: "905c2521-25eb-4324-9978-724636df3436", // Example only — replace with your patient ID (max 36 chars)
        name: {
          use: "official", // Example name fields — replace with real patient name data
          family: "Doe",
          given: ["John"],
          suffix: [], // Required by Patient.name even when empty
        },
        birthDate: "1990-01-01", // Example only — YYYY-MM-DD
        gender: "MALE", // Example — must be "MALE" | "FEMALE" | "UNKNOWN"
      },
    }),
    [],
  );

  // 4) Note sections (LOINC). Required for ambient note generation.
  //    See Note sections: Assessment and Plan is 51847-2 (not 51848-0 Assessment alone).
  const ambientOptions = useMemo(
    () => ({
      sections: [
        { loinc: "51847-2" }, // Example section set — Assessment and Plan
        { loinc: "10164-2" }, // History of Present Illness
        { loinc: "10187-3" }, // Review of Systems — pick LOINCs that match your note
      ],
    }),
    [],
  );

  // 5) Initialize the SDK once when the provider tree is ready.
  useEffect(() => {
    if (!isInitialized) {
      init({ authManager });
    }
  }, [init, isInitialized, authManager]);

  // 6) Optional: receive sectioned note content when the clinician submits.
  const handleNoteSubmit = (data) => {
    console.log("Note submitted:", data.noteId, data.encounterId);
    data.contents.forEach((section) => {
      console.log(`${section.title}: ${section.content}`);
    });
  };

  if (!isInitialized) {
    return <p>Initializing Suki Web SDK...</p>;
  }

  // 7) Mount the hosted Ambient UI for this encounter.
  return (
    <SukiAssistant
      encounter={encounter}
      ambientOptions={ambientOptions}
      onNoteSubmit={handleNoteSubmit}
    />
  );
}

export default App;