> ## 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.

# Basic Usage

> Learn how to integrate the Suki React Web SDK into your application

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**.

```jsx React expandable theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
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: { // [!code ++:14] New in v2.1.2
      values: [
        {
          codes: [
            {
              code: "I10",
              description: "Essential hypertension",
              type: "ICD10",
            },
          ],
          diagnosisNote: "Hypertension",
        },
      ],
    },
    visitType: "ESTABLISHED_PATIENT", // [!code ++:6] 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

<Icon icon="file-lines" iconType="solid" /> Read the [Control visibility](/web-sdk/examples/control-visibility) example to learn how to control the visibility of the SDK.