Overview
This guide shows you how to get started with the Suki React SDK in your application.Code Example
This example below covers the complete setup, including the root provider, dynamic props, UI customization, and event handling.React
Copy
Ask AI
import { SukiAssistant, SukiProvider, useSuki } from "@suki-sdk/react";
function Root() {
return (
<SukiProvider>
<App />
</SukiProvider>
);
}
function App() {
const { init } = useSuki();
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
});
}, [init]);
const encounter = {
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",
},
};
return <MySDKComponent encounter={encounter} />;
}
function MySDKComponent({ encounter }) {
const handleNoteSubmit = (data) => {
console.log("Note submitted:", data.noteId);
data.contents.forEach((section) => {
console.log(`Section: ${section.title} - ${section.content}`);
});
};
const ambientOptions = {
sections: [
{
loinc: "51847-2", // Assessment and Plan
isPBNSection: true,
},
{
loinc: "10164-2", // History of Present Illness
},
{
loinc: "10187-3", // Review of Systems
},
],
diagnoses: { // New in v2.1.2
values: [
{
codes: [
{
code: "I10",
description: "Essential hypertension",
type: "ICD-10",
},
],
diagnosis_note: "Hypertension",
},
],
},
};
return (
<SukiAssistant
encounter={encounter}
onNoteSubmit={handleNoteSubmit}
ambientOptions={ambientOptions}
/>
);
}