```tsx React theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
// Web SDK Ambient session tutorial (React)
// Copy this file into a React app, replace YOUR_* placeholders, then render
.
// 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 (
);
}
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
Initializing Suki Web SDK...
;
}
// 7) Mount the hosted Ambient UI for this encounter.
return (
);
}
export default App;
```