Skip to main content
Advanced configuration options allow you to customize the Suki Assistant SDK to better fit your application’s needs. This includes setting up ambient options, UI customization, and handling events.
import { SukiAssistant, SukiProvider, useSuki } from "@suki-sdk/react";

const encounters = [
  {
    identifier: "6ec3920f-b0b1-499d-a4e9-889bf788e5ab",
    patient: {
      identifier: "905c2521-25eb-4324-9978-724636df3436",
      name: {
        use: "usual",
        family: "Smith",
        given: ["John"],
        suffix: [],
      },
      birthDate: "1980-01-15",
      gender: "male",
    },
  },
  {
    identifier: "qsc2393g-b0b1-499d-a4e9-983cq125g5op",
    patient: {
      identifier: "25eb905-1232-082132-aw12320do4r",
      name: {
        use: "usual",
        family: "Johnson",
        given: ["Sarah", "Marie"],
        suffix: ["MD"],
      },
      birthDate: "1985-03-20",
      gender: "female",
    },
  },
];

function Root() {
  return (
    <SukiProvider>
      <App />
    </SukiProvider>
  );
}

function App() {
  const { init } = useSuki();
  const [encounter, setEncounter] = useState(encounters[0]);

  useEffect(() => {
    init({
      partnerId: "f80c8db8-a4d0-4b75-8d63-56c82b5413f0", // Replace with your actual partner ID
      partnerToken:
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30", // Replace with your actual partner token
      providerName: "John doe", // Replace with the full name of the provider
      providerOrgId: "1234", // Replace with the provider's organization ID
      theme: {
        primary: "#0066cc",
        background: "#ffffff",
      },
    });
  }, [init]);

  const ambientOptions = {
    sections: [
      {
        loinc: "51847-2", // Assessment and Plan
        isPBNSection: true,
      },
      {
        loinc: "10164-2", // History of Present Illness
      },
      {
        loinc: "10187-3", // Review of Systems
      },
    ],
  };

  return (
    <>
      <button onClick={() => setEncounter(encounters[0])}>
        Load Encounter 1
      </button>
      <button onClick={() => setEncounter(encounters[1])}>
        Load Encounter 2
      </button>
      <AdvancedSDKComponent
        encounter={encounter}
        ambientOptions={ambientOptions}
      />
    </>
  );
}

function AdvancedSDKComponent({ encounter, ambientOptions }) {
  const [isVisible, setIsVisible] = useState(true);

  const uiOptions = {
    showCloseButton: true,
    showStartAmbientButton: true,
    showCreateEmptyNoteButton: false,
    sectionEditing: {
      enableDictation: true,
      enableCopy: false,
    },
  };

  const handleNoteSubmit = (data) => {
    console.log("Note submitted successfully:", data.noteId);
    // Process note contents
    data.contents.forEach((section) => {
      console.log(`${section.title}: ${section.content}`);
    });
  };

  const handleClose = () => {
    setIsVisible(false);
    console.log("SDK closed by user");
  };

  if (!isVisible) {
    return <div>SDK has been closed</div>;
  }

  return (
    <SukiAssistant
      encounter={encounter}
      uiOptions={uiOptions}
      ambientOptions={ambientOptions}
      onNoteSubmit={handleNoteSubmit}
      onClose={handleClose}
    />
  );
}
I