Skip to main content

Documentation Index

Fetch the complete documentation index at: https://developer.suki.ai/llms.txt

Use this file to discover all available pages before exploring further.

Overview

This guide walks you through the basic usage of the Suki React Web SDK in your application.

Code example for React Web SDK

This example below covers the complete setup, including the root provider, dynamic props, UI customization, and event handling.
React
import { useEffect, useMemo } from "react";
import { SukiAuthManager } from "@suki-sdk/core";
import { SukiAssistant, SukiProvider, useSuki } from "@suki-sdk/react";

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

function App() {
  const authManager = useMemo(
    () =>
      new SukiAuthManager({
        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
        environment: "production",
        loginOnInitialize: true,
        providerId: "1234567890", // Replace with the provider's ID
        providerName: "John doe", // Replace with the full name of the provider
        providerOrgId: "1234", // Replace with the provider's organization ID
        providerSpecialty: "FAMILY_MEDICINE", // Replace with the provider's specialty
      }),
    [],
  );

  const { init, isInitialized } = useSuki();

  useEffect(() => {
    if (!isInitialized) {
      init({ authManager });
    }
  }, [init, isInitialized, authManager]);

  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: "ICD10",
            },
          ],
          diagnosisNote: "Hypertension",
        },
      ],
    },
    visitType: "ESTABLISHED_PATIENT", // New in v2.2.0
    encounterType: "AMBULATORY",
    providerRole: "PRIMARY/ATTENDING",
    reasonForVisit: "Follow-up for hypertension",
    chiefComplaint: "Headache",
  };

  return (
    <SukiAssistant
      encounter={encounter}
      onNoteSubmit={handleNoteSubmit}
      ambientOptions={ambientOptions}
    />
  );
}

Next steps

Read the Control visibility example to learn how to control the visibility of the SDK.
Last modified on April 20, 2026