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

export const SdkAvailableIn = ({platforms = ""}) => {
  const PLATFORM_META = {
    javascript: {
      title: "JavaScript",
      brand: "javascript",
      src: "/documentation/assets/lang-icons/javascript.svg"
    },
    react: {
      title: "React",
      brand: "react",
      src: "/documentation/assets/lang-icons/react.svg"
    },
    swift: {
      title: "Swift",
      brand: "swift",
      src: "/documentation/assets/lang-icons/swift.svg"
    }
  };
  const keys = Array.isArray(platforms) ? platforms.map(key => String(key).toLowerCase().trim()).filter(Boolean) : String(platforms || "").split(",").map(key => key.toLowerCase().trim()).filter(Boolean);
  const items = keys.map(key => PLATFORM_META[key]).filter(Boolean);
  if (!items.length) return null;
  const label = items.map(item => item.title).join(", ");
  return <div className="sdk-intro-available" aria-label={`Available in ${label}`}>
      <span className="sdk-intro-available__label">Available in</span>
      <span className="sdk-intro-available__icons">
        {items.map(item => <span key={item.brand} className="sdk-intro-available__icon" title={item.title} data-platform-brand={item.brand}>
            <img src={item.src} alt="" width="14" height="14" noZoom />
          </span>)}
      </span>
    </div>;
};

export const AgentPrompt = ({id, collapseAfter = 2}) => {
  const [expanded, setExpanded] = useState(false);
  const [copied, setCopied] = useState(false);
  const __AGENT_PROMPT_DATA__ = {
    "DOCS_ORIGIN": "https://developer.suki.ai",
    "AGENT_PROMPTS": {
      "web-sdk": {
        "path": "web-sdk",
        "skillIds": ["suki-web-sdk"],
        "intro": "Help me add the Suki Web SDK to my web app so clinicians can run Ambient sessions with Suki's pre-built UI. I am a Suki partner with `partnerId` and `partnerToken`. Then:",
        "steps": ["Install `@suki-sdk/react` and `@suki-sdk/core` for React, or `@suki-sdk/js` and `@suki-sdk/core` for JavaScript.", "Create `SukiAuthManager` with `partnerId`, `partnerToken`, and provider fields, then initialize the SDK.", "Mount `SukiAssistant` (React) or the JS mount API with encounter context and run an Ambient session end to end.", "Handle note submission and write results back to my EHR when applicable."]
      },
      "headless-web-sdk": {
        "path": "headless-web-sdk",
        "skillIds": ["suki-headless-web-sdk"],
        "intro": "Help me add the Suki Headless Web SDK to my React app so I own the UI and use hooks for Ambient auth, sessions, and recording. I am a Suki partner with `partnerId` and `partnerToken`. Then:",
        "steps": ["Install `@suki-sdk/platform-react`.", "Create a `PlatformClient` and wrap the app with `PlatformClientProvider`.", "Authenticate with `useAuth`, create a session with `useAmbient`, then control recording with `useAmbientSession` (start, pause, resume, submit).", "Wire a minimal end-to-end Ambient flow and handle note retrieval or EHR write-back."]
      },
      "mobile-sdk": {
        "path": "mobile-sdk",
        "skillIds": ["suki-mobile-sdk"],
        "intro": "Help me add the Suki Mobile SDK to my native iOS app for Ambient documentation. I build the UI; the SDK manages sessions, recording, and note generation. I am a Suki partner with Partner credentials. Then:",
        "steps": ["Download `SukiAmbientCore.framework`, add it to Xcode, and set Embed and Sign.", "Add `NSMicrophoneUsageDescription` to `Info.plist`.", "Configure the SDK with Partner credentials and a `TokenProvider` that returns a valid Partner Token.", "Create an Ambient session, start and stop recording, then retrieve generated note content for EHR write-back."]
      },
      "dictation-sdk": {
        "path": "dictation-sdk",
        "skillIds": ["suki-dictation-sdk"],
        "intro": "Help me add the Suki Dictation SDK to my web app with Suki's hosted iframe UI for In-field or Scratchpad Dictation. I am a Suki partner with `partnerId` and `partnerToken`. Then:",
        "steps": ["Install `@suki-sdk/dictation` and `@suki-sdk/core` for JavaScript, or `@suki-sdk/dictation-react`, `@suki-sdk/dictation`, and `@suki-sdk/core` for React.", "Create a long-lived `SukiAuthManager` and one `DictationClient` per page scope (do not recreate on every render).", "Mount In-field or Scratchpad Dictation with encounter context and handle transcript callbacks into chart fields.", "Reuse the same client across fields; only change the target field or container."]
      },
      "form-filling-sdk": {
        "path": "form-filling-sdk",
        "skillIds": ["suki-form-filling-sdk"],
        "intro": "Help me add the Suki Form filling SDK to my web app so clinicians can complete Medical form templates by voice with Suki's hosted iframe UI. I am a Suki partner with `partnerId`, `partnerToken`, and `form_template_ids`. Then:",
        "steps": ["Install `@suki-sdk/form-filling` and `@suki-sdk/core` for JavaScript, or `@suki-sdk/form-filling-react` and `@suki-sdk/core` for React.", "Create `SukiAuthManager` and `FormFillingClient` with Partner credentials.", "Start a session with `form_template_ids` and my encounter ID as `correlation_id`.", "Handle submit callbacks or webhook results and map structured form data into my EHR."]
      },
      "ambient": {
        "path": "documentation/concepts/ambient-clinical-notes",
        "skillIds": ["suki-ambient"],
        "intro": "Help me integrate Suki Ambient clinical documentation so I can generate structured clinical notes from patient-provider conversations. I am a Suki partner. Choose the right path (Partner APIs or an SDK), then:",
        "steps": ["Confirm Partner onboarding, JWKS, and credentials for staging (`https://sdp.suki-stage.com`).", "Create an ambient session, optionally seed visit context, then stream audio over `/ws/stream`.", "End the session, wait for processing (poll status or webhook), then retrieve note content and transcript.", "If I need a headed UI, use the Web SDK; if I own the UI in React, use the Headless Web SDK; for iOS, use the Mobile SDK."]
      },
      "form-filling": {
        "path": "documentation/concepts/form-filling",
        "skillIds": ["suki-form-filling"],
        "intro": "Help me integrate Suki Form filling so I can capture structured medical form data from visit conversation. I am a Suki partner with Medical form template IDs (`form_template_id` UUIDs). Then:",
        "steps": ["Choose Partner APIs, the Form filling SDK, or Form filling inside the Web SDK based on whether I own the UI.", "Create a Form filling session and provide `form_template_id` values (or a partner dynamic form schema) before streaming.", "Stream audio over `/ws/stream` with the Form filling `ambient_session_id`, then end the session.", "Retrieve structured form output and map fields into my EHR."]
      },
      "dictation": {
        "path": "documentation/concepts/dictation",
        "skillIds": ["suki-dictation"],
        "intro": "Help me integrate Suki Audio Dictation so providers can convert speech into real-time text in my application. I am a Suki partner. Then:",
        "steps": ["Choose Partner APIs, the Dictation SDK, or Dictation inside the Web SDK based on whether I own the UI.", "Create a Dictation session, then stream audio over WebSocket.", "Handle partial and final transcript frames and place text into the target chart field or UI.", "Complete the stream cleanly and end the session with REST when finished."]
      },
      "patient-summary": {
        "path": "documentation/concepts/patient-summary",
        "skillIds": ["suki-patient-summary"],
        "intro": "Help me integrate Suki Patient Summary so I can generate pre-visit and full patient summaries from Clinical Knowledge Graph (CKG) data. I am a Suki partner. Then:",
        "steps": ["Authenticate and obtain an `sdp_suki_token`.", "Request a CKG upload URL, upload a FHIR R4 bundle, and poll ingestion status until complete.", "Trigger summary generation for an encounter and practitioner pair, then poll job status.", "Retrieve the full Patient Summary or pre-visit section (or show it on the Web SDK patient profile)."]
      },
      "audio-streaming": {
        "path": "documentation/how-to/audio-streaming",
        "skillIds": ["suki-audio-streaming"],
        "intro": "Help me implement Suki Partner API audio streaming so I can create a session, open a WebSocket, send live audio frames, and complete the session cleanly. I am a Suki partner. Then:",
        "steps": ["Authenticate and create an Ambient or Dictation session with REST to get the session ID.", "Open `wss://sdp.suki-stage.com/ws/stream` (or production) and send JSON text frames for that product's wire format.", "Send audio as required (for example LINEAR16 PCM for Ambient), plus control events for the product.", "End the stream cleanly, finish the session with REST, then retrieve results or wait for a webhook."]
      },
      "webhooks": {
        "path": "documentation/webhook",
        "skillIds": ["suki-webhooks"],
        "intro": "Help me add a Suki notification webhook so my app receives push events when Ambient sessions complete or fail. I am a Suki partner with a signing secret from onboarding. Then:",
        "steps": ["Provide Suki an HTTPS callback URL during partner onboarding (one URL per partner).", "Implement a POST endpoint that verifies the HMAC signature with my partner secret.", "Parse the event payload, process supported event types, and return a successful HTTP response.", "Test with a real Ambient session end-to-end and handle retries safely."]
      },
      "faqs": {
        "path": "documentation/references/faqs",
        "skillIds": [],
        "intro": "Help me answer common Suki for Partners integration questions using the published FAQ topics. Prefer official docs over guesses. Then:",
        "steps": ["Connect Documentation MCP: `https://developer.suki.ai/documentation/references/mcp`.", "Use `https://developer.suki.ai/llms.txt` to find the right FAQ or guide page.", "Start from this FAQs hub and open the matching topic (general, authentication, security, Ambient, Form filling, Dictation, SDKs, or webhooks).", "Cite the FAQ or guide URL in your answer, and escalate to partner support only when the docs do not cover the question."]
      },
      "api-reference": {
        "path": "api-reference/overview",
        "skillIds": ["suki-ambient-api", "suki-dictation-api"],
        "intro": "Help me integrate Suki Ambient and Dictation Partner APIs so I can create sessions, stream audio over WebSocket, and retrieve notes or transcripts. I am a Suki partner. Then:",
        "steps": ["Authenticate and obtain an `sdp_suki_token` on staging (`https://sdp.suki-stage.com`).", "For Ambient: create a session, stream over `/ws/stream`, end the session, then retrieve note content (or use a webhook).", "For Dictation: create a Dictation session, stream audio, and handle partial and final transcript frames.", "Follow the Ambient API quickstart for a complete staging script before production."]
      },
      "form-filling-api": {
        "path": "form-filling-api-reference/overview",
        "skillIds": ["suki-form-filling-api"],
        "intro": "Help me integrate Suki Form filling Partner APIs so I can create Form filling sessions, stream audio, and retrieve structured form output. I am a Suki partner with `form_template_id` values (or a dynamic form schema). Then:",
        "steps": ["Authenticate and obtain an `sdp_suki_token` on staging.", "Create a Form filling session and seed `form_template_id` (or partner schema) context.", "Stream audio over `/ws/stream` using the Form filling `ambient_session_id`, then end the session.", "Retrieve structured form output (or rely on a webhook) and map fields into my EHR."]
      },
      "patient-summary-api": {
        "path": "patient-summary-api-reference/overview",
        "skillIds": ["suki-patient-summary-api"],
        "intro": "Help me integrate Suki Patient Summary Partner APIs so I can ingest FHIR into CKG, generate summaries, and retrieve structured sections. I am a Suki partner. Then:",
        "steps": ["Authenticate and obtain an `sdp_suki_token`.", "Request a CKG upload URL, upload a FHIR R4 bundle, and poll ingestion status.", "Trigger summary generation for an encounter and practitioner pair, then poll the job.", "Retrieve the full Patient Summary or pre-visit section from the Summaries APIs."]
      }
    }
  };
  const entry = id ? __AGENT_PROMPT_DATA__.AGENT_PROMPTS[id] : null;
  if (!entry) {
    return <div className="suki-agent-prompt suki-agent-prompt--error" data-suki-agent-prompt>
        <div className="suki-agent-prompt__body">
          <p className="suki-agent-prompt__intro">
            Agent Prompt <code>{id || "(missing id)"}</code> is not in the registry. Run{" "}
            <code>npm run sync:agent-prompts</code>.
          </p>
        </div>
      </div>;
  }
  const docsOrigin = __AGENT_PROMPT_DATA__.DOCS_ORIGIN || "https://developer.suki.ai";
  const skillIds = Array.isArray(entry.skillIds) ? entry.skillIds : [];
  let skillCmd = `npx skills add ${docsOrigin}`;
  for (let i = 0; i < skillIds.length; i++) {
    skillCmd += ` --skill ${skillIds[i]}`;
  }
  const intro = entry.intro || "";
  const steps = [];
  if (skillIds.length > 0) {
    steps.push(`Run \`${skillCmd}\`.`);
  }
  if (Array.isArray(entry.steps)) {
    for (let i = 0; i < entry.steps.length; i++) steps.push(entry.steps[i]);
  }
  const reference = `${docsOrigin}/${entry.path}.md`;
  const renderInlineCode = text => {
    if (!text) return null;
    const parts = String(text).split(/(`[^`]+`)/g);
    return parts.map((part, i) => {
      if (part.startsWith("`") && part.endsWith("`") && part.length > 2) {
        return <code className="suki-agent-prompt__code" key={i}>
            {part.slice(1, -1)}
          </code>;
      }
      return part ? <span key={i}>{part}</span> : null;
    });
  };
  const copyText = (() => {
    const lines = [intro, ""];
    steps.forEach((step, i) => {
      lines.push(`${i + 1}. ${step}`);
    });
    if (reference) {
      lines.push("");
      lines.push("REFERENCE");
      lines.push(reference);
    }
    return lines.join("\n");
  })();
  const canCollapse = steps.length > collapseAfter;
  const visibleSteps = !canCollapse || expanded ? steps : steps.slice(0, collapseAfter);
  const handleCopy = () => {
    const done = () => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    };
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(copyText).then(done).catch(() => {});
      return;
    }
    const textarea = document.createElement("textarea");
    textarea.value = copyText;
    textarea.setAttribute("readonly", "");
    textarea.style.position = "fixed";
    textarea.style.left = "-9999px";
    document.body.appendChild(textarea);
    textarea.select();
    try {
      document.execCommand("copy");
      done();
    } catch (e) {} finally {
      document.body.removeChild(textarea);
    }
  };
  return <div className={`suki-agent-prompt${canCollapse && !expanded ? " is-collapsed" : ""}${copied ? " is-copied" : ""}`} data-suki-agent-prompt data-agent-prompt-id={id}>
      <div className="suki-agent-prompt__header">
        <span className="suki-agent-prompt__label">
          Using AI coding tools, Try Agent prompt
        </span>
        <button type="button" className="suki-agent-prompt__copy size-6.5 flex items-center justify-center rounded-md group/copy-button" onClick={handleCopy} aria-label={copied ? "Copied" : "Copy agent prompt"} data-tooltip={copied ? "Copied" : "Copy"}>
          {copied ? <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4 shrink-0 text-primary dark:text-primary-light">
              <path d="M2.75 9.5L6.5 13.25L15.25 4.5" />
            </svg> : <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4 shrink-0 text-gray-400 group-hover/copy-button:text-gray-500 dark:text-white/40 dark:group-hover/copy-button:text-white/60">
              <path d="M14.25 5.25H7.25C6.14543 5.25 5.25 6.14543 5.25 7.25V14.25C5.25 15.3546 6.14543 16.25 7.25 16.25H14.25C15.3546 16.25 16.25 15.3546 16.25 14.25V7.25C16.25 6.14543 15.3546 5.25 14.25 5.25Z" />
              <path d="M2.80103 11.998L1.77203 5.07397C1.61003 3.98097 2.36403 2.96397 3.45603 2.80197L10.38 1.77297C11.313 1.63397 12.19 2.16297 12.528 3.00097" />
            </svg>}
        </button>
      </div>

      <div className="suki-agent-prompt__body">
        <div className={`suki-agent-prompt__shimmer not-prose${canCollapse && !expanded ? " is-shimmering" : ""}`}>
          {intro ? <p className="suki-agent-prompt__intro">{renderInlineCode(intro)}</p> : null}
          {visibleSteps.length > 0 ? <ol className="suki-agent-prompt__steps">
              {visibleSteps.map((step, i) => <li key={i}>{renderInlineCode(step)}</li>)}
            </ol> : null}
        </div>
        {reference && (!canCollapse || expanded) ? <div className="suki-agent-prompt__reference">
            <div className="suki-agent-prompt__reference-label">REFERENCE</div>
            <a className="link" href={reference} target="_blank" rel="noopener noreferrer">
              {reference}
            </a>
          </div> : null}
        {canCollapse && !expanded ? <div className="suki-agent-prompt__fade" aria-hidden="true" /> : null}
      </div>

      {canCollapse ? <div className="suki-agent-prompt__footer">
          <button type="button" className="suki-agent-prompt__toggle" onClick={() => setExpanded(v => !v)} aria-expanded={expanded}>
            <span>{expanded ? "Show less" : "Show more"}</span>
            <svg className={`suki-agent-prompt__chevron${expanded ? " is-up" : ""}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
              <polyline points="6 9 12 15 18 9" />
            </svg>
          </button>
        </div> : null}
    </div>;
};

<link rel="stylesheet" href="/headless-web-sdk/headless-web-sdk-intro.css" />

<div className="headless-sdk-intro">
  <div className="headless-sdk-intro__copy">
    <p>
      Integrate with the Suki Headless Web SDK to get Suki's ACI capabilities, such as Ambient documentation, in a headless React SDK with hooks for authentication, sessions, and recording, and build the clinician UI yourself.
    </p>

    <SdkAvailableIn platforms="react" />

    <p className="headless-sdk-intro__usecase">
      <a href="/documentation/get-started/use-case?workflow=ambient">Find your use case →</a>
    </p>
  </div>

  <div className="headless-sdk-intro__visual">
    <img className="sdk-intro-img sdk-intro-img--light" src="https://mintcdn.com/suki-1e08f176/lvYgcCHuTl-P7Ja6/headless-web-sdk/assets/headless-web-sdk-intro.png?fit=max&auto=format&n=lvYgcCHuTl-P7Ja6&q=85&s=fa9d46c9e3bd7e63a29c51b88dbd5a1e" alt="Headless Web SDK Ambient session controls in a custom EMR UI" width="2800" height="1640" data-path="headless-web-sdk/assets/headless-web-sdk-intro.png" />

    <img className="sdk-intro-img sdk-intro-img--dark" src="https://mintcdn.com/suki-1e08f176/lvYgcCHuTl-P7Ja6/headless-web-sdk/assets/headless-web-sdk-intro-dark.png?fit=max&auto=format&n=lvYgcCHuTl-P7Ja6&q=85&s=56dd80c51fdb80f3997643f8840ae672" alt="Headless Web SDK Ambient session controls in a custom EMR UI" width="2800" height="1640" data-path="headless-web-sdk/assets/headless-web-sdk-intro-dark.png" />
  </div>
</div>

<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/contact-us/" target="_blank" rel="noopener noreferrer">
      Contact Partnership Team
    </a>
  </div>
</Callout>

<AgentPrompt id="headless-web-sdk" />

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

## Integrate Headless Web SDK hooks

Use these hooks and guides to authenticate, create ambient sessions, configure recording, select a microphone, and build a recording UI 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="Configure Ambient Session" icon="sliders" href="/headless-web-sdk/guides/hooks/ambient-session-config" arrow={true}>
    <p>Parameters, return values, and session context for `useAmbientSession`.</p>
  </Card>

  <Card title="Select a Microphone" icon="microphone" href="/headless-web-sdk/guides/hooks/select-microphone" arrow={true}>
    <p>Pass an optional microphone `deviceId` for ambient recording.</p>
  </Card>

  <Card title="Ambient Session Examples" icon="code" href="/headless-web-sdk/guides/hooks/ambient-session-examples" arrow={true}>
    <p>Full recording UI example and Headless Ambient tutorials.</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>

## Headless Web SDK capabilities

Add offline buffering, network-transition behavior, and cross-product ambient note sharing when your ambient sessions need those capabilities.

<Columns cols={3}>
  <Card title="Ambient Interoperability" icon="link" href="/headless-web-sdk/guides/ambient-interoperability" arrow={true}>
    <p>Share one clinical note across Ambient APIs, Mobile SDK, Headless Web SDK, and Web SDK.</p>
  </Card>

  <Card title="Session Conflicts" icon="triangle-exclamation" href="/headless-web-sdk/guides/handle-ambient-session-conflicts" arrow={true}>
    <p>Clear a blocking remote session, then retry create. Keep UI in sync on remote end.</p>
  </Card>

  <Card title="Read Shared Notes" icon="list" href="/headless-web-sdk/guides/read-shared-ambient-notes" arrow={true}>
    <p>List notes with `useGetEncounterInfo` and seed patient context for Web SDK handoff.</p>
  </Card>

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

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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.