> ## 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 Headless Web SDK

> Add Ambient documentation to your React app with hooks for authentication, sessions, and recording, using your own UI

The Suki Headless Web SDK is a React library that lets you add Ambient documentation to your web application. You build the UI, while the SDK provides React hooks for authentication, session management, audio recording, and note generation.

Your application initializes `PlatformClient`, wraps the tree with `PlatformClientProvider`, and uses hooks such as `useAuth`, `useAmbient`, and `useAmbientSession`. The SDK manages Ambient session logic, while your application owns the clinician experience and how results are written 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="/headless-web-sdk/introduction" arrow={true}>
    <p>Learn how the Headless Web SDK works and when to use it in your application</p>
  </Card>

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

  <Card title="Install the SDK" icon="download" href="/headless-web-sdk/installation" arrow={true}>
    <p>Install `@suki-sdk/platform-react` and add the SDK to your application</p>
  </Card>

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

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

## React hooks

Use these hooks to authenticate, create Ambient sessions, and control recording from your own React UI.

<Columns cols={3}>
  <Card title="Hooks Overview" icon="sitemap" href="/headless-web-sdk/guides/hooks/hooks-overview" arrow={true}>
    <p>Learn how `useAuth`, `useAmbient`, and `useAmbientSession` fit together</p>
  </Card>

  <Card title="Authentication Hook" icon="key" href="/headless-web-sdk/guides/hooks/auth-hook" arrow={true}>
    <p>Authenticate users and manage identity with `useAuth`</p>
  </Card>

  <Card title="Create Ambient Session" icon="play" href="/headless-web-sdk/guides/hooks/ambient-hook" arrow={true}>
    <p>Create an Ambient session and get an `ambientSessionId` with `useAmbient`</p>
  </Card>

  <Card title="Manage Ambient Session" icon="clock" href="/headless-web-sdk/guides/hooks/ambient-session-hook" arrow={true}>
    <p>Record, pause, resume, and submit audio with `useAmbientSession`</p>
  </Card>

  <Card title="Integration Patterns" icon="plug" href="/headless-web-sdk/guides/integration-patterns" arrow={true}>
    <p>Learn common ways to wire Headless hooks into your application</p>
  </Card>
</Columns>

## Session capabilities

Add offline buffering and network-transition behavior when your Ambient sessions run in unreliable network conditions.

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

  <Card title="Network Transitions" icon="globe" href="/headless-web-sdk/guides/online-offline-behavior" arrow={true}>
    <p>Learn how the SDK behaves when the browser goes online or offline</p>
  </Card>
</Columns>

## API reference

Look up `PlatformClient`, provider setup, and TypeScript types when you need exact contracts.

<Columns cols={3}>
  <Card title="Platform Client and Provider" icon="code" href="/headless-web-sdk/api-reference/platform-client" arrow={true}>
    <p>Initialize `PlatformClient` and provide it to your React tree</p>
  </Card>

  <Card title="Types" icon="brackets-curly" href="/headless-web-sdk/api-reference/types" arrow={true}>
    <p>Browse Headless Web SDK types for sessions, auth, and responses</p>
  </Card>
</Columns>

## Resources

Use these pages when you need examples, tutorials, error handling, release notes, or partner support.

<Columns cols={3}>
  <Card title="Authentication Example" icon="laptop-code" href="/headless-web-sdk/example/authentication-example" arrow={true}>
    <p>Browse an authentication example for the Headless Web SDK</p>
  </Card>

  <Card title="Auth and Session Flow" icon="diagram-project" href="/headless-web-sdk/example/auth-session-flow" arrow={true}>
    <p>See how authentication and Ambient session flow fit together</p>
  </Card>

  <Card title="Ambient Tutorial" icon="graduation-cap" href="/documentation/tutorials/headless-ambient-hooks" arrow={true}>
    <p>Build an Ambient recorder with Headless Web SDK hooks</p>
  </Card>

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

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

  <Card title="Changelog" icon="clock-rotate-left" href="/headless-web-sdk/changelog" arrow={true}>
    <p>Track Headless Web SDK releases, enhancements, and breaking changes</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>