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

# Web SDK Overview

> A collection of JavaScript & React libraries to build web applications on top of Suki Ambient intelligence capabilities with pre-built UI components

<Callout title="Updates" color="orange" icon="bell">
  **New**

  The Web SDK is now <Tooltip tip="Interoperability lets different Suki ambient products contribute to the same clinical note for a patient visit. Pass a shared EMR encounter ID so clinicians can start, continue, or re-ambient across Ambient APIs, Mobile SDK, Headless Web SDK, and Web SDK." cta="Learn more" href="/documentation/concepts/ambient-clinical-notes/ambient-interoperability">interoperable</Tooltip> 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](/web-sdk/guides/ambient-interoperability) for Web SDK setup.
</Callout>

The Suki Web SDK provides **pre-built UI components** and **React hooks** that let you seamlessly integrate <Tooltip tip="Ambient documentation captures clinical conversations and generates notes automatically." cta="View in Glossary" href="/Glossary/a">ambient</Tooltip> intelligence capabilities directly into your web application.

Because this SDK includes all necessary user interface elements, you can quickly embed Suki's ambient intelligence capabilities without having to design the frontend yourself.

To integrate Suki's AI capabilities, use **Suki.js**, our core **JavaScript/TypeScript SDK**. This package provides the essential methods and events for embedding the Suki Web SDK into your application.

With the Suki Web SDK, you can add features like:

* Ambient note generation
* Medical transcription
* Note management
* Form filling
* Dictation
* Medication orders
* 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.

<CardGroup cols={2}>
  <Card title="Capture Ambient Notes with Pre-Built UI" icon="file-medical">
    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.
  </Card>

  <Card title="Edit Notes with Built-In Dictation" icon="microphone">
    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.
  </Card>

  <Card title="Capture Problem Context" icon="list-check">
    Pass PBC sections and existing diagnoses in **`ambientOptions`** so the note organizes findings around problems and merges EMR diagnoses with the visit discussion.
  </Card>

  <Card title="Capture Medication Orders" icon="pills">
    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.
  </Card>

  <Card title="Continue Notes from Another Suki Product" icon="arrows-rotate">
    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.
  </Card>

  <Card title="Write Submitted Notes to Your EHR" icon="upload">
    Listen for note submission callbacks, map section content and optional orders into your charting model, and persist the final documentation in your EHR.
  </Card>
</CardGroup>

## Supported platforms

The SDK is supported on the following platforms:

<CardGroup cols={2}>
  <Card title="React" icon="react">
    The SDK is supported on React.

    Install the Suki Web SDK for React:

    <div className="install-btns-v2">
      <button className="install-btn-v2" data-cmd="npm install @suki-sdk/react">
        <span className="install-btn-v2-label">Install for React</span>

        <span className="install-btn-v2-copy">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />

            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
          </svg>
        </span>

        <span className="install-btn-v2-check"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg> Command Copied!</span>
      </button>
    </div>
  </Card>

  <Card title="Vanilla JavaScript" icon="js">
    The SDK is supported on Vanilla JavaScript.

    Install the Suki Web SDK for Vanilla JavaScript:

    <div className="install-btns-v2">
      <button className="install-btn-v2" data-cmd="npm install @suki-sdk/js">
        <span className="install-btn-v2-label">Install for JavaScript / TypeScript</span>

        <span className="install-btn-v2-copy">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />

            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
          </svg>
        </span>

        <span className="install-btn-v2-check"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg> Command Copied!</span>
      </button>
    </div>
  </Card>
</CardGroup>

<Card title="Other Frameworks" icon="angular">
  The SDK is supported on other frameworks like Vue, Angular, etc.
</Card>

<Info>
  While it is optimized for **React**, you can also easily integrate it with **vanilla JavaScript** or other frameworks.
</Info>

<Note>
  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.
</Note>

## How the Web SDK works

The following diagram illustrates the Web SDK architecture and workflow:

```mermaid actions={false} theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
%%{init: {'theme':'base', 'themeVariables': { 'primaryColor':'#FFE148','primaryTextColor':'#111827','lineColor':'#6B7280','fontSize':'14px','edgeLabelBackground':'#FFFFFF','tertiaryColor':'#F9FAFB','tertiaryTextColor':'#111827','tertiaryBorderColor':'#D1D5DB'}}}%%
graph TB
    subgraph client["Your web application"]
        direction TB
        A["Application code<br/><small>React / JavaScript / Other Frameworks</small>"]
        B["Suki Web SDK<br/><small>@suki-sdk/js or @suki-sdk/react</small>"]
        C["Pre-built UI<br/><small>Recording • Transcription • Notes</small>"]
        A --> B
        B --> C
    end

    subgraph platform["Suki backend"]
        direction TB
        D["Authentication service<br/>"]
        E["Ambient service<br/>"]
        F["AI engine<br/>"]
    end

    B -->|Authenticate| D
    C -->|Stream audio| E
    E -->|Process| F
    F -->|Return results| C

    style client fill:#FFFADE,stroke:#D1D5DB,stroke-width:2px,color:#111827
    style platform fill:#FFF394,stroke:#FFE148,stroke-width:2px,color:#111827
    style A fill:#ffffff,stroke:#9CA3AF,stroke-width:2px,color:#111827
    style B fill:#FFE148,stroke:#111827,stroke-width:3px,color:#111827
    style C fill:#ffffff,stroke:#9CA3AF,stroke-width:2px,color:#111827
    style D fill:#ffffff,stroke:#9CA3AF,stroke-width:2px,color:#111827
    style E fill:#ffffff,stroke:#9CA3AF,stroke-width:2px,color:#111827
    style F fill:#ffffff,stroke:#9CA3AF,stroke-width:2px,color:#111827
```

### Architecture workflow

<Steps>
  <Step title="Client Side (Your Web Application)" icon="user">
    * 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
  </Step>

  <Step title="Suki Backend" icon="server">
    * Validates partner credentials (Partner ID and token)
    * Manages audio streaming and processing
    * Processes audio in real-time and generates structured clinical notes
  </Step>

  <Step title="Data Flow" icon="arrow-right">
    <Callout>
      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
    </Callout>
  </Step>
</Steps>

## Web SDK capabilities

<CardGroup cols={2}>
  <Card title="Ambient Note Generation" icon="file-text">
    The SDK allows you to automatically capture spoken patient encounters and generate structured clinical notes in real time.

    <Accordion title="Context-Aware Processing">
      It uses AI to intelligently organize medical conversations into the correct clinical sections.
    </Accordion>

    <Accordion title="Smart Formatting">
      It uses [LOINC codes](/documentation/concepts/ambient-clinical-notes/note-sections) to segment content into sections like `HPI`, `Assessment`, and `Physical Exam`.
    </Accordion>

    <Accordion title="Background Processing">
      The feature runs passively in the background during consultations so it does not disrupt the provider's workflow.
    </Accordion>
  </Card>

  <Card title="Medical Transcription" icon="microphone">
    Integrate high-accuracy medical transcription that supports specialty-specific terminology and multiple languages and accents.

    <Accordion title="Specialty-Specific Terminology">
      The transcription supports specialty-specific terminology.
    </Accordion>

    <Accordion title="Multiple Languages and Accents">
      The transcription supports multiple languages and accents.
    </Accordion>
  </Card>
</CardGroup>

<Card title="Note Management" icon="file-text">
  The SDK includes features for managing clinical notes within your application.

  <Accordion title="Note Editor">
    A rich-text editor designed specifically for AI-generated clinical content. It supports editing, formatting, and section-level interaction.
  </Accordion>

  <Accordion title="Note Archive">
    A feature that allows users to view and manage both current and historical notes associated with a patient.
  </Accordion>
</Card>

## Key benefits

The web SDK provides the following benefits:

<AccordionGroup>
  <Accordion icon="clock" title="Fast Integration">
    Quickly add Suki's features using our built-in UI.
  </Accordion>

  <Accordion icon="fast-forward" title="Optimized Performance">
    Built for accuracy and speed in a web environment.
  </Accordion>

  <Accordion icon="user" title="Focus on Your Application">
    Let our components handle the Suki UI so your team can focus on your product.
  </Accordion>
</AccordionGroup>

## Next steps

<Icon icon="file-lines" iconType="solid" /> Refer to our [Installation guide](/web-sdk/installation) to get started with the Suki SDK.