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

# Suki Web SDK

> Embed Suki's ambient intelligence capabilities in your web app with pre-built UI components

The Suki Web SDK lets you add Suki's clinical experiences to your JavaScript or React application using pre-built UI components. Instead of building the clinician-facing experience yourself, you embed the SDK and integrate it with your application's existing workflow.

Your application initializes the SDK, provides authentication and context, and responds to events and callbacks. The SDK provides the Suki UI and workflow, while your application controls what happens before and after the workflow, including handling the resulting data and writing it back to your EHR when applicable.

<Callout icon="handshake" color="orange">
  **Are you a Suki partner?**

  To use any Suki API or SDK, you must be a Suki partner. Contact the partnership team to begin the onboarding process. They help you set up your authentication system and get started with the Suki APIs and SDKs.

  <div style={{ marginTop: '0.75rem' }}>
    <a className="doc-guide-btn partner-contact-cta" href="https://www.suki.ai/suki-partners/" target="_blank" rel="noopener noreferrer">
      Contact Partnership Team
    </a>
  </div>
</Callout>

## Get started

Confirm requirements, install the SDK, authenticate, and run your first Ambient session.

<Columns cols={3}>
  <Card title="Introduction" icon="book" href="/web-sdk/overview" arrow={true}>
    <p>Learn how the Web SDK works and when to use it in your application</p>
  </Card>

  <Card title="Prerequisites" icon="list-check" href="/web-sdk/prerequisites" arrow={true}>
    <p>Confirm Partner credentials, browser support, and setup requirements before you install</p>
  </Card>

  <Card title="Install the SDK" icon="download" href="/web-sdk/installation" arrow={true}>
    <p>Install the JavaScript or React package and add the SDK to your application</p>
  </Card>

  <Card title="Authenticate" icon="key" href="/web-sdk/authentication" arrow={true}>
    <p>Learn how Partner Tokens and provider identity work in the Web SDK</p>
  </Card>

  <Card title="Run Your First Session" icon="rocket" href="/web-sdk/quickstart" arrow={true}>
    <p>Initialize, mount, and run an Ambient session end to end</p>
  </Card>
</Columns>

## Choose a workflow

Choose the clinician workflow you want to add first. Use Ambient to capture visits. Add Dictation or Form filling when your application needs those flows.

<Columns cols={3}>
  <Card title="Ambient" icon="file-medical" href="/web-sdk/guides/ambient" arrow={true}>
    <p>Learn how Ambient sessions capture conversations and generate clinical notes</p>
  </Card>

  <Card title="Dictation" icon="microphone" href="/web-sdk/dictation-overview" arrow={true}>
    <p>Use built-in Dictation while clinicians create or edit notes</p>
  </Card>

  <Card title="Form Filling" icon="file-pen" href="/web-sdk/form-filling-overview" arrow={true}>
    <p>Capture structured medical form data with Form filling in the Web SDK</p>
  </Card>
</Columns>

## Build and customize

After your workflow is running, wire the session lifecycle, handle note submission, and adapt the UI to your application.

<Columns cols={3}>
  <Card title="Create Session" icon="play" href="/web-sdk/guides/ambient-implementation" arrow={true}>
    <p>Create an Ambient session, start recording, and pass encounter context</p>
  </Card>

  <Card title="Session Status and Events" icon="clock" href="/web-sdk/guides/ambient-session-status" arrow={true}>
    <p>Track session lifecycle, status, and events during an Ambient session</p>
  </Card>

  <Card title="Note Management" icon="file-lines" href="/web-sdk/guides/note-management" arrow={true}>
    <p>Review, edit, and submit notes, then write content back to your EHR</p>
  </Card>

  <Card title="Dictation for JavaScript" icon="js" href="/web-sdk/guides/dictation-javascript" arrow={true}>
    <p>Add Dictation to a JavaScript Web SDK integration</p>
  </Card>

  <Card title="Dictation for React" icon="react" href="/web-sdk/guides/dictation-react" arrow={true}>
    <p>Add Dictation to a React Web SDK integration</p>
  </Card>

  <Card title="Form Filling for JavaScript" icon="js" href="/web-sdk/guides/form-filling-javascript" arrow={true}>
    <p>Add Form filling to a JavaScript Web SDK integration</p>
  </Card>

  <Card title="Form Filling for React" icon="react" href="/web-sdk/guides/form-filling-react" arrow={true}>
    <p>Add Form filling to a React Web SDK integration</p>
  </Card>

  <Card title="Branding and Layout" icon="paint-brush" href="/web-sdk/guides/branding" arrow={true}>
    <p>Customize theme and layout options for the Web SDK UI</p>
  </Card>

  <Card title="Minimized Layout" icon="window-minimize" href="/web-sdk/minimized-layout/overview" arrow={true}>
    <p>Embed a compact Web SDK layout when space in your UI is limited</p>
  </Card>

  <Card title="Minimized Layout Implementation" icon="wrench" href="/web-sdk/minimized-layout/implementation" arrow={true}>
    <p>Implement the minimized layout in your application</p>
  </Card>
</Columns>

## Features

Add these capabilities when your Ambient workflow needs more clinical depth, care settings, or session reliability.

<Columns cols={3}>
  <Card title="Medication Orders" icon="pills" href="/web-sdk/medication-orders/overview" arrow={true}>
    <p>Capture medication order content from Ambient sessions in the Web SDK</p>
  </Card>

  <Card title="Problem-Based Charting" icon="notes-medical" href="/web-sdk/guides/ambient-problem-based-charting" arrow={true}>
    <p>Pass problem context so Ambient notes organize findings around diagnoses</p>
  </Card>

  <Card title="Interoperability" icon="share-nodes" href="/web-sdk/guides/ambient-interoperability" arrow={true}>
    <p>Continue the same clinical note across Ambient APIs, Mobile SDK, and Web SDK</p>
  </Card>

  <Card title="Multilingual Sessions" icon="language" href="/web-sdk/guides/ambient-multilingual" arrow={true}>
    <p>Configure language options for Ambient sessions in the Web SDK</p>
  </Card>

  <Card title="Telehealth" icon="video" href="/web-sdk/guides/telehealth" arrow={true}>
    <p>Use the Web SDK in telehealth workflows</p>
  </Card>

  <Card title="Session Recovery" icon="arrows-rotate" href="/web-sdk/guides/ambient-session-recovery" arrow={true}>
    <p>Recover or continue an Ambient session when recording is interrupted</p>
  </Card>

  <Card title="Offline Mode" icon="wifi" href="/web-sdk/guides/ambient-offline-mode" arrow={true}>
    <p>Buffer audio during network interruptions and sync when connectivity returns</p>
  </Card>
</Columns>

## API reference

Use the API reference when you need exact types, methods, or component contracts. For React, start with Hooks, Providers, and Components. For JavaScript, start with Classes and Functions. Types apply to both.

<Columns cols={3}>
  <Card title="Types" icon="code" href="/web-sdk/api-reference/types" arrow={true}>
    <p>Browse Web SDK types for initialization, data models, and events</p>
  </Card>

  <Card title="Hooks" icon="react" href="/web-sdk/api-reference/hooks" arrow={true}>
    <p>Use React hooks for Ambient, auth, and session workflows</p>
  </Card>

  <Card title="Providers" icon="cubes" href="/web-sdk/api-reference/providers" arrow={true}>
    <p>Wrap your application with Web SDK providers for React integrations</p>
  </Card>

  <Card title="Components" icon="puzzle-piece" href="/web-sdk/api-reference/components" arrow={true}>
    <p>Use Web SDK UI components in React applications</p>
  </Card>

  <Card title="Functions" icon="function" href="/web-sdk/api-reference/functions" arrow={true}>
    <p>Call Web SDK functions for mount, session control, and configuration</p>
  </Card>

  <Card title="Classes" icon="cube" href="/web-sdk/api-reference/classes" arrow={true}>
    <p>Use Web SDK classes in JavaScript integrations</p>
  </Card>
</Columns>

## Resources

Use these resources when you need examples, tutorials, troubleshooting help, release details, or support for an existing integration.

<Columns cols={3}>
  <Card title="Examples" icon="laptop-code" href="/web-sdk/examples/basic-usage" arrow={true}>
    <p>Browse Web SDK examples for common integration patterns</p>
  </Card>

  <Card title="React Tutorial" icon="graduation-cap" href="/documentation/tutorials/web-sdk-ambient-react" arrow={true}>
    <p>Build an Ambient session with the Web SDK in React</p>
  </Card>

  <Card title="PBC Tutorial" icon="graduation-cap" href="/documentation/tutorials/web-sdk-pbc-ambient" arrow={true}>
    <p>Build Problem-Based Charting with the Web SDK</p>
  </Card>

  <Card title="Error Handling" icon="triangle-exclamation" href="/web-sdk/guides/error-handling" arrow={true}>
    <p>Handle Web SDK errors during initialization, sessions, and submission</p>
  </Card>

  <Card title="Token Refresh" icon="rotate" href="/web-sdk/guides/token-refresh" arrow={true}>
    <p>Keep Partner Tokens valid during long-running Web SDK sessions</p>
  </Card>

  <Card title="FAQs" icon="circle-question" href="/web-sdk/faqs/general" arrow={true}>
    <p>Find answers to general, technical, implementation, and onboarding questions</p>
  </Card>

  <Card title="Changelog" icon="clock-rotate-left" href="/web-sdk/product-updates/changelog" arrow={true}>
    <p>Track Web SDK releases, enhancements, and breaking changes</p>
  </Card>

  <Card title="Migration Guides" icon="arrow-up" href="/web-sdk/product-updates/migration-to-v3" arrow={true}>
    <p>Upgrade an existing Web SDK integration to a newer version</p>
  </Card>

  <Card title="Support" icon="life-ring" href="/documentation/references/support" arrow={true}>
    <p>Contact Suki for partner documentation and SDK support</p>
  </Card>
</Columns>