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

# Ambient Session Workflow Overview

> Overview of React hooks available in the Suki Headless Web SDK for authentication and ambient documentation workflows

<div className="quick-summary-wrapper">
  <div className="quick-summary-header">
    <span className="quick-summary-icon" aria-hidden="true" />

    <span className="quick-summary-title">Quick summary</span>
  </div>

  <div className="quick-summary-content">
    The Suki Headless Web SDK provides three primary hooks to manage your ambient documentation workflow: `useAuth` for identity, `useAmbient` to create a session and obtain an `ambientSessionId`, and `useAmbientSession` to record, pause, resume, and submit audio for that session.
  </div>

  <div className="quick-summary-footer">
    <span className="quick-summary-footer-icon" aria-hidden="true" />

    <span className="quick-summary-footer-text">Last updated:</span>
    <span className="quick-summary-footer-date">June 2026</span>
  </div>
</div>

This section provides an overview of the React <Tooltip tip="A function that allows you to use state and other React features in functional components." cta="View in Glossary" href="/Glossary/h">hooks</Tooltip> available in the Suki Headless Web SDK. Refer to the cards below for more information on each hook.

## Prerequisites

Before you begin, the following hooks require a `partnerId` and `partnerToken`:

* **`partnerId`** - The unique ID you receive when you first onboard with Suki
* **`partnerToken`** - The secure access token for the user, generated by your EHR system

<Note>
  If you do not have a `partnerId` and `partnerToken`, refer to the [Authentication guide](/headless-web-sdk/authentication) for more information.
</Note>

## Typical workflow

In React, a hook adds behavior to your components. The `useAuth`, `useAmbient`, and `useAmbientSession` hooks work together in a typical workflow:

```mermaid actions={false} theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
flowchart LR
  A[useAuth] --> B[useAmbient]
  B --> C[useAmbientSession]
  
  style A fill:#FFF394,stroke:#D4A017,color:#000000
  style B fill:#FFF394,stroke:#D4A017,color:#000000
  style C fill:#FFF394,stroke:#D4A017,color:#000000
```

## Hook implementation guides

Choose the guide for the hook you are implementing:

<CardGroup cols={3}>
  <Card title="Authentication" icon="key" href="/headless-web-sdk/guides/hooks/auth-hook" arrow="true">
    Use this hook to manage authentication state for the Headless Web SDK.
  </Card>

  <Card title="Create Ambient Session" icon="plus" href="/headless-web-sdk/guides/hooks/ambient-hook" arrow="true">
    Use this hook to create a session and obtain an `ambientSessionId`.
  </Card>

  <Card title="Manage Ambient Session" icon="arrows-rotate" href="/headless-web-sdk/guides/hooks/ambient-session-hook" arrow="true">
    Use this hook to control recording and submit audio using the `ambientSessionId`.
  </Card>
</CardGroup>