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

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

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

## Key features

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