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 setting up Suki.js in your existing JavaScript or React application, from installation to mounting the SDK UI.
What will you do
- Install the Suki Web SDK package for your framework (JavaScript or React)
- Initialize the SDK by creating a
SukiAuthManager from @suki-sdk/core with your partner token and provider fields
- Mount the SDK UI into your application using the
encounter object.
Using an AI coding tool?Copy the following prompt to add the Suki developer documentation as a skill and MCP server to your tool for better AI-assisted coding during the integration process. Prerequisites
For the rest of this documentation, we assume the following setup is complete:
-
You have received your
partnerId from Suki.
-
Your host URLs are on the Suki allowlist.
-
Your partner configuration in the Suki Platform points to your correct JWKS endpoint.
-
Your JWT token contains the key that you specified as your User identifier field.
Install the Suki SDK package
To begin, install the Suki web SDK package in your project. Choose the appropriate package based on your framework:
You must choose the appropriate package based on your framework. Refer to the Installation guide for more information. pnpm add @suki-sdk/js @suki-sdk/core
pnpm add @suki-sdk/react @suki-sdk/core
Step 1: Initialize the SDK
Initialize the Suki SDK by creating SukiAuthManager from @suki-sdk/core with the following required fields:
partnerId Required - Your partner ID from SukipartnerToken Required - Your partner token from SukiproviderName Required - The full name of the providerproviderOrgId Required - The organization ID of the provider
Then pass this authManager into initialize() in JavaScript or init() in React.
Run initialization once, usually from your app entry point, so your app can sign in to Suki and use Web SDK features.
Import @suki-sdk/core and @suki-sdk/js, create SukiAuthManager with your partner token and provider fields, then call initialize({ authManager }). Do this in your main application file (for example index.js or app.js).import { SukiAuthManager } from "@suki-sdk/core";
import { initialize } from "@suki-sdk/js";
const authManager = 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,
providerName,
providerOrgId,
providerSpecialty,
});
const sdkClient = initialize({
authManager,
});
In Web SDK v3, your app root only needs SukiProvider from @suki-sdk/react (no partner props on the provider). In a child component, create SukiAuthManager from @suki-sdk/core with your partnerId, partnerToken, and provider fields, then call init({ authManager }) from useSuki() when the SDK is not initialized yet. See ComponentA.jsx in the example below.import { SukiProvider } from "@suki-sdk/react";
function App() {
return (
<SukiProvider>
{/* init({ authManager }) runs in a child (ComponentA.jsx), not here */}
<ComponentA />
</SukiProvider>
);
}
Mount the SDK UI
After initializing the web SDK, you can mount the Suki UI into your application using the encounter object. This object provides patient context for ambient documentation and transcription.
If you face any issues while mounting the SDK UI, make sure you are using the correct package and framework.
import { SukiAuthManager } from "@suki-sdk/core";
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 authManager = 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,
providerName,
providerOrgId,
providerSpecialty,
});
const sdkClient = initialize({
authManager,
});
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();
});
import { useEffect, useMemo } from "react";
import { SukiAuthManager } from "@suki-sdk/core";
import { useSuki, SukiAssistant } from "@suki-sdk/react"; // Mount UI: add SukiAssistant
function ComponentA() {
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,
providerName,
providerOrgId,
providerSpecialty,
}),
[],
);
const { init, isInitialized } = useSuki();
// replace this with your actual encounter data
const currentEncounter = { // Mount UI: encounter for SukiAssistant
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",
},
};
useEffect(() => {
if (!isInitialized) {
init({ authManager });
}
}, [init, isInitialized, authManager]);
return ( //Mount UI: SukiAssistant
<SukiAssistant encounter={currentEncounter} />
// rest of your code
);
}
Next steps
Refer to our Ambient documentation guide to learn more about how to use the Suki Web SDK to create your first ambient session.
