This guide walks you through setting up Suki.js in your existing JavaScript or React application, from installation to mounting the SDK UI. Install the Suki SDK package in your project. Choose the appropriate package based on your framework: 
pnpm add @suki-sdk/js
For detailed setup instructions, refer to the Installation guide

​
Initialize the SDK

Initialize the Suki SDK in your application by providing your partner ID, partner token, provider name, and provider organization ID. This step is crucial as it sets up the connection between your application and the Suki Platform. Initialization should be done once, typically in your app’s entry point. This authenticates your app and prepares it to use Suki features.
Import the SDK and call the initialize function with your API key. This should be done in your main application file (e.g., index.js or app.js)
main.js
import { initialize } from "@suki-sdk/js";

const sdkClient = initialize({
  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
});

​
Mount the SDK UI

After initializing the SDK, you can mount the Suki UI into your application using an encounter object. This object provides patient context for ambient documentation and transcription.
main.js
import { initialize } from "@suki-sdk/js";

// replace this with your actual encounter data
const encounterDetails = {
  identifier: "6ec3920f-b0b1-499d-a4e9-889bf788e5ab",
  patient: {
    identifier: "905c2521-25eb-4324-9978-724636df3436",
    name: {
      use: "official",
      family: "Doe",
      given: ["John"],
      suffix: ["MD"],
    },
    birthDate: "1990-01-01",
    gender: "Male",
  },
};

const sdkClient = initialize({
  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
});

const unsubscribeInit = sdkClient.on("init:change", (isInitialized) => {
  if (isInitialized) {
    sdkClient.mount({
      rootElement: document.getElementById("suki-root"), // The root element to mount the SDK into
      encounter: encounterDetails,
    });
  }
});

// unsubscribe from the init event when no longer needed
window.addEventListener("beforeunload", () => {
  unsubscribeInit();
});

​
Next Steps

Create your first ambient session

Debug errors