Skip to main content
Encounter data contains patient and provider information. You pass it to the SukiAssistant component to pre-populate the React Web SDK. Identifiers:
  • patient.identifier is required and must be at most 36 characters ().
  • encounter.identifier is optional; if you set it, use the same 36-character limit ().
Dynamic encounter: You can update the encounter prop after the component loads. When you pass new encounter data, the Web SDK updates it automatically for note generation.

Code example for React Web SDK

The example below demonstrates how to change encounter data using React state:
import { SukiAssistant, SukiProvider, useSuki } from "@suki-sdk/react";

function DynamicEncounterComponent() {
  const [currentEncounter, setCurrentEncounter] = useState(initialEncounter); // Replace with your initial encounter data

  const switchToNewPatient = () => {
    const newEncounter = {
      identifier: "6ec3920f-b0b1-499d-a4e9-889bf788e5ab", // max 36 characters
      patient: {
        identifier: "905c2521-25eb-4324-9978-724636df3436", // max 36 characters
        name: {
          use: "usual",
          family: "Wilson",
          given: ["Emma"],
          suffix: [],
        },
        birthDate: "1992-07-10",
        gender: "female",
      },
    };

    setCurrentEncounter(newEncounter);
  };

  return (
    <SukiProvider>
      <div>
        <button onClick={switchToNewPatient}>Switch to New Patient</button>

        <SukiAssistant
          encounter={currentEncounter}
          // rest of the props
        />
      </div>
    </SukiProvider>
  );
}

Next steps

Refer to Ambient events to learn more about how to track and manage ambient interactions in the web SDK.
Last modified on May 22, 2026