Skip to main content
New
  • From v3.3.0, the Headed Web SDK can show Patient Summary on the patient profile. Clinicians see a short snippet, then expand it for the full summary. Enable Patient Summary for your organization, keep FHIR data current in CKG, and pass matching encounter.identifier and encounter.practitionerFhirId when you initialize and when you mount. Refer to Patient Summary in Web SDK.
  • The Web SDK is with other Suki products that support ambient workflows. Pass a shared encounter identifier so clinicians can continue the same clinical note across Ambient APIs, Mobile SDK, and Web SDK. Refer to Ambient interoperability.
The Suki Web SDK is a JavaScript and React library that provides pre-built UI components and React hooks to integrate intelligence into your web application. Use the Web SDK when you want to embed Suki’s ambient UI without designing the frontend yourself. Integrate with Suki.js, our core JavaScript/TypeScript SDK. After you initialize the SDK, you can add features like:
  • Ambient note generation
  • Medical transcription
  • Note management
  • Form filling
  • Dictation
  • Medication orders
  • Patient Summary on the patient profile
  • Interoperability with other Suki products
  • Write submitted notes to your EHR

​
Common integration patterns and use cases

The Web SDK provides a pre-built ambient UI for recording, review, editing, and submission in the browser. Your application owns mount configuration, submission handling, and how notes are written back to your EHR. The following examples show common ways to integrate the Web SDK into your web application.

Capture Ambient Notes with Pre-Built UI

Mount the headed Web SDK in your web app so clinicians can record, review, and edit ambient notes in Suki’s UI, then handle note submission in your application.

Edit Notes with Built-In Dictation

Use the Web SDK’s built-in Dictation controls while clinicians review an ambient note so they can correct or add text without leaving the editor.

Capture Problem Context

Pass PBC sections and existing diagnoses in ambientOptions so the note organizes findings around problems and merges EMR diagnoses with the visit discussion.

Capture Medication Orders

Enable LOINC 52471-0, let the provider review orders in the SDK UI, then read orders from the note submission payload and persist them to your EHR after the session completes.

Continue Notes from Another Suki Product

Open an interoperable ambient note in the Web SDK after capture on another Suki product, such as the Mobile SDK or Ambient APIs, so clinicians can review, edit, and submit on desktop.

Show Patient Summary on the Profile

Pass encounter.identifier and encounter.practitionerFhirId when you initialize and when you mount so clinicians can open a pre-visit Patient Summary on the patient profile.

Write Submitted Notes to Your EHR

Listen for note submission callbacks, map section content and optional orders into your charting model, and persist the final documentation in your EHR.

​
Supported platforms

The SDK is supported on the following platforms:

React

The SDK is supported on React.Install the Suki Web SDK for React:

Vanilla JavaScript

The SDK is supported on Vanilla JavaScript.Install the Suki Web SDK for Vanilla JavaScript:

Other Frameworks

The SDK is supported on other frameworks like Vue, Angular, etc.
While it is optimized for React, you can also easily integrate it with vanilla JavaScript or other frameworks.
If you are using @suki-sdk/js or @suki-sdk/react, you can use the Core and Dictation from the package itself. You do not need to install the @suki-sdk/core and @suki-sdk/dictation packages separately.

​
How the Web SDK works

The following diagram illustrates the Web SDK architecture and workflow:

​
Architecture workflow

Client Side (Your Web Application)

  • Your React, JavaScript, or web app that integrates the SDK.
  • Core SDK package that handles authentication, session management, and communication.
  • Pre-built UI for recording, transcription, and note display.

Suki Backend

  • Validates partner credentials (Partner ID and token).
  • Manages audio streaming and processing.
  • Processes audio in real-time and generates structured clinical notes.

Data Flow

  1. Initialize SDK with partner credentials → Authenticate with Suki’s backend.
  2. Mount pre-built UI with encounter data.
  3. User starts recording → SDK streams audio to ambient Service.
  4. AI Engine processes audio and generates notes.
  5. Results return through Suki Backend → UI displays the note and transcript.

​
Web SDK capabilities

Ambient Note Generation

Capture spoken patient encounters and generate structured clinical notes in real time.
Organize medical conversations into the appropriate clinical sections.
Use LOINC codes to segment content into sections such as HPI, Assessment, and Physical Exam.
Run ambient capture in the background during consultations without disrupting the provider workflow.

Medical Transcription

Transcribe clinical conversations with support for specialty-specific terminology, multiple languages, and accents.
Support terminology specific to different medical specialties.
Support multiple languages and accents for medical transcription.

Note Management

Manage clinical notes within your application.
Edit and format AI-generated clinical content with section-level interaction.
View and manage current and historical notes associated with a patient.

Dictation

Use built-in Dictation controls to correct or add text while reviewing an ambient note.
Dictate directly into the note editor without leaving the Suki UI.
Use Dictation with both @suki-sdk/js and @suki-sdk/react.

Form Filling

Capture structured medical form data through the Web SDK.
Let clinicians complete forms through the headed Web SDK experience instead of a free-text-only workflow.
Import Form filling from @suki-sdk/js or @suki-sdk/react without installing a separate Form filling package.

Medication Orders

Generate medication order suggestions during ambient sessions and review them in the built-in Orders section.
Enable medication orders by including LOINC code 52471-0 in ambientOptions.sections.
Read suggested orders from the note submission payload and persist them in your EHR after the session completes.

Patient Summary

Show a pre-visit Patient Summary on the headed patient profile when your organization is enabled and matching FHIR data is in CKG.
Show a short snippet on the patient profile and expand it to view the full summary.
Pass encounter.identifier and encounter.practitionerFhirId when you initialize and when you mount so the profile can show the summary.
The Web SDK owns the Patient Summary UI. Your application does not build summary screens or call the generate, status, or retrieve APIs for this headed workflow.

Problem-Based Charting

Organize ambient notes around patient problems.
Mark a Problem-Based Note section in ambientOptions so findings are grouped by problem.
Pass existing diagnoses from the EMR so the session can merge them with information discussed during the visit.

Ambient Interoperability

Continue the same clinical note across Suki products that support ambient workflows for a shared patient encounter.
Pass a shared encounter identifier so clinicians can start, continue, or re-ambient across Ambient APIs, Mobile SDK, Headless Web SDK, and Web SDK.
Capture on one product and review, edit, or submit on another without restarting the note from scratch.

Minimized Layout

Run ambient capture in a compact, viewport-aligned widget so your application can reclaim screen space.
Continue capturing audio while the UI remains minimized beside the EHR or patient chart.
Listen for layout changes when the UI expands, minimizes, or pauses.

Telehealth Audio Capture

Generate ambient documentation during remote visits by capturing call audio in the browser.
Capture audio from a Chrome tab when the telehealth call runs in the browser.
Capture system audio through the browser share dialog, including desktop call apps such as Zoom or Teams when Share system audio is enabled.

Multilingual Sessions

Run ambient sessions with multilingual support for supported languages.
Configure the session language so transcription and note generation match the visit.
Keep the same headed ambient workflow while supporting multilingual encounters.

Visit and Provider Context

Pass optional visit and provider metadata in ambientOptions to improve note generation for the session.
Include visit type, encounter type, reason for visit, and chief complaint when available.
Include the provider role when mounting or calling setAmbientOptions.

Session Status and Events

Track the ambient session lifecycle in real time so your application can respond to session changes.
Listen for ambient start, pause, resume, cancel, and submit events from the SDK.
Read ambientSessionId and activeAmbientId to follow the active recording and report issues with the correct session context.

Session Recovery

Recover an in-progress ambient session after an unexpected refresh or interruption.
Restore the ambient workflow so clinicians can continue documentation without restarting the visit from scratch.
Keep encounter and recording context aligned after the browser reloads.

Offline Mode

Continue ambient capture when connectivity is limited, then sync when the connection returns.
Keep recording usable during temporary network loss or unstable connections.
Upload captured audio and continue the ambient workflow after connectivity is restored.

Branding and Layout

Customize the headed Web SDK appearance to fit your application shell.
Apply optional theme colors to align the SDK UI with your product branding.

UI Visibility Controls

Show or hide SDK chrome to match your application workflow.
Use the embedded close button or control visibility programmatically from your application.
Configure UI options at mount time to control which elements appear in the headed experience.

Note Submission and EHR Writeback

Handle completed notes in your application and persist documentation in your EHR.
Listen for note submission success so your application receives the final note content.
Map section content and optional orders into your charting model, then write the final documentation to your EHR.

Token Refresh

Keep Web SDK sessions authenticated without requiring clinicians to sign in again mid-day.
The SDK monitors expiration and refreshes the Suki access token in the background while your partnerToken remains valid.
When your EHR issues a new partner token, call setPartnerToken at runtime without a full re-authentication flow.

Dynamic Encounter Switching

Update the active encounter when clinicians move between appointments in your EHR.
Call setEncounter in JavaScript, or update the React encounter prop, when the clinician opens another visit.
Switching the encounter loads the Patient Summary for the new encounter on the patient profile.

​
Key benefits

The web SDK provides the following benefits:
Quickly add Suki’s features using our built-in UI.
Built for accuracy and speed in a web environment.
Let our components handle the Suki UI so your team can focus on your product.

​
Next steps

Refer to our Installation guide to get started with the Suki SDK.
Last modified on August 20, 2026