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

# Partner Use Cases

> Partner scenarios for EHRs, telehealth, care management, revenue cycle, and related applications: Ambient, Dictation, and Form filling. Search, filter, open a card, then use View documentation.

<link rel="stylesheet" href="/documentation/web-sdk-executive.css" />

export const UCSearchIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path fill="none" d="M11 17.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13z" />
    <path d="m21 21-4.3-4.3" />
  </svg>
);

<div className="hp-wrap web-sdk-exec-page">
  <section className="web-sdk-exec-hero-zone" aria-labelledby="suki-use-case-hero-heading">
    <div className="web-sdk-exec-hero-zone__inner">
      <div className="web-sdk-exec-hero" role="banner">
        <div className="web-sdk-exec-hero__copy">
          <p className="web-sdk-exec-hero__eyebrow">Suki for Partners</p>

          <div className="web-sdk-exec-hero__eyebrow-rule" aria-hidden="true" />

          <h1 id="suki-use-case-hero-heading" className="web-sdk-exec-hero__headline">
            Use Cases
          </h1>

          <p className="web-sdk-exec-hero__sub">
            Explore the most popular use cases, workflows, and integrations for Suki for Partners. Review each use case to understand how to use Suki for Partners in your product and accelerate your AI roadmap.
          </p>
        </div>

        <div className="web-sdk-exec-hero__visual" aria-hidden="true">
          <div className="web-sdk-exec-hero__visual-frame">
            <img className="web-sdk-exec-hero__art web-sdk-exec-hero__art--side" src="https://mintcdn.com/suki-1e08f176/zZGEkUTIkO3Bt4sD/documentation/assets/hero-home.webp?fit=max&auto=format&n=zZGEkUTIkO3Bt4sD&q=85&s=f369877fa42af1628a28d739631ce824" alt="Search use cases illustration" width={1280} height={841} loading="eager" decoding="async" fetchPriority="high" noZoom data-path="documentation/assets/hero-home.webp" />
          </div>
        </div>
      </div>
    </div>
  </section>

  <div className="web-sdk-exec-content-zone">
    <div className="suki-use-case-root" data-suki-use-case-root>
      <div className="suki-use-case-toolbar">
        <div className="suki-use-case-toolbar-inner">
          <div className="suki-use-case-search-wrap">
            <span aria-hidden="true">
              <UCSearchIcon />
            </span>

            <input type="search" className="suki-use-case-search" placeholder="Search use cases" aria-label="Search use cases" autoComplete="off" />
          </div>

          <div className="release-notes-workflow-pills" role="tablist" aria-label="Partner use cases by workflow">
            <button type="button" role="tab" className="release-notes-workflow-pill release-notes-workflow-pill--active" data-workflow-filter="all" aria-selected="true">
              All
            </button>

            <button type="button" role="tab" className="release-notes-workflow-pill" data-workflow-filter="ambient" aria-selected="false">
              <span className="release-notes-workflow-pill-icon" aria-hidden="true">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path fill="none" d="M22 12 18 12 15 21 9 3 6 12 2 12" />
                </svg>
              </span>

              <span className="release-notes-workflow-pill-label">Ambient</span>
            </button>

            <button type="button" role="tab" className="release-notes-workflow-pill" data-workflow-filter="form-filling" aria-selected="false">
              <span className="release-notes-workflow-pill-icon" aria-hidden="true">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />

                  <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />

                  <path d="M12 11h4" />

                  <path d="M12 16h4" />

                  <path d="M8 11h.01" />

                  <path d="M8 16h.01" />
                </svg>
              </span>

              <span className="release-notes-workflow-pill-label">Form filling</span>
            </button>

            <button type="button" role="tab" className="release-notes-workflow-pill" data-workflow-filter="dictation" aria-selected="false">
              <span className="release-notes-workflow-pill-icon" aria-hidden="true">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />

                  <path d="M19 10v2a7 7 0 0 1-14 0v-2" />

                  <line x1="12" x2="12" y1="19" y2="22" />
                </svg>
              </span>

              <span className="release-notes-workflow-pill-label">Dictation</span>
            </button>
          </div>
        </div>
      </div>

      <div className="suki-use-case-board">
        <h2 className="suki-use-case-section-title">Featured use cases</h2>
        <p className="suki-use-case-section-lead">Start with paths many clinical and operational partners implement first.</p>

        <div className="suki-use-case-featured-grid">
          <div className="suki-use-case-card-wrap suki-use-case-card-wrap--featured" data-use-case-workflows="all,ambient" data-search="automate clinical documentation visit encounter ehr emr telehealth care management revenue cycle note ambient capture websocket rest partner auth ui headed native react" data-card-title="Automate clinical documentation from the visit" data-card-docs-href="/documentation/ambient-documentation">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Automate clinical documentation from the visit"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/featured-ambient.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=24aa554f1f698a49f8d123f2254007a4" alt="Search use cases illustration" width={640} height={360} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/featured-ambient.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Ambient</span>
              <span className="suki-use-case-card-title">Automate clinical documentation from the visit</span>

              <p className="suki-use-case-card-teaser">
                Draft clinical notes from encounter audio while you control capture and authentication.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-blue">Ambient APIs</span><span className="sdk-overview-badge sdk-overview-badge-green">Web SDK</span><span className="sdk-overview-badge sdk-overview-badge-purple">Mobile SDK</span><span className="sdk-overview-badge sdk-overview-badge-gray">Headless Web SDK</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-blue">Ambient APIs</span>
  <span class="sdk-overview-badge sdk-overview-badge-green">Web SDK</span>
  <span class="sdk-overview-badge sdk-overview-badge-purple">Mobile SDK</span>
  <span class="sdk-overview-badge sdk-overview-badge-gray">Headless Web SDK</span>
</div>
<p class="suki-use-case-modal-subhead">
  Capture encounter audio in your product and generate draft clinical documentation using the Suki developer platform.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">
  
  <p class="suki-use-case-modal-lead">
    You control authentication, session lifecycle, and audio capture. The Suki Platform processes approved audio and structured clinical data to return draft clinical notes.
  </p>

  <p>
    Use this integration when you want clinicians to stay inside your EHR, telehealth product, or care workflow while your backend orchestrates note generation using APIs, streaming endpoints, and webhooks.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Advanced</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~4 hours</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/api-reference/overview">Ambient APIs</a>
        <span class="suki-use-case-modal-related-desc">Manage sessions, stream data, retrieve outputs, and handle webhooks.</span>
      </li>
      <li>
        <a href="/web-sdk/overview">Web SDK</a>
        <span class="suki-use-case-modal-related-desc">Add browser-based audio capture with minimal setup.</span>
      </li>
      <li>
        <a href="/mobile-sdk/overview">Mobile SDK</a>
        <span class="suki-use-case-modal-related-desc">Capture encounter audio in native iOS applications.</span>
      </li>
      <li>
        <a href="/headless-web-sdk/introduction">Headless Web SDK</a>
        <span class="suki-use-case-modal-related-desc">Build a fully custom capture experience using React hooks.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You build an EHR, telehealth platform, or clinical workflow product and want to add note generation without changing your UI.</li>
    <li>You manage provider authentication and session control in your system.</li>
    <li>You want a clear separation: your product handles capture and routing, while Suki handles transcription and documentation.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Ambient APIs</strong> let you create and manage sessions, stream audio, retrieve generated notes, and receive completion events via webhooks.</li>
  <li><strong>Web SDK</strong> provides a ready-to-use browser capture experience.</li>
  <li><strong>Mobile SDK</strong> enables native iOS audio capture.</li>
  <li><strong>Headless Web SDK</strong> gives you React hooks to build a custom capture UI.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Set up partner authentication and generate access tokens.</li>
  <li>Choose your integration approach using the integration decision guide.</li>
  <li>Create your first session using the Ambient API quickstart.</li>
  <li>Stream or upload encounter audio and send structured clinical context.</li>
  <li>Handle webhook events to retrieve generated documentation.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Start with Ambient clinical documentation, then explore the Ambient API overview and your selected SDK documentation for deeper integration patterns.
</p>

</div>
</div>
` }}
            />
          </div>

          <div className="suki-use-case-card-wrap suki-use-case-card-wrap--featured" data-use-case-workflows="all,form-filling" data-search="structured Form filling medical forms templates visit audio session context generated values nursing intake assessment telehealth ehr backend rest websocket" data-card-title="Complete structured medical forms from visit audio" data-card-docs-href="/documentation/form-filling">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Complete structured medical forms from visit audio"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/featured-form.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=3cdaf833e2c4f5bd917fd0dd751f6a8f" alt="Search use cases illustration" width={640} height={360} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/featured-form.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Form filling</span>
              <span className="suki-use-case-card-title">Complete structured medical forms from visit audio</span>

              <p className="suki-use-case-card-teaser">
                Turn visit conversation into template-driven form output for your workflow.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-blue">Form Filling APIs</span><span className="sdk-overview-badge sdk-overview-badge-gray">REST</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-blue">Form Filling APIs</span>
  <span class="sdk-overview-badge sdk-overview-badge-gray">REST</span>
</div>
<p class="suki-use-case-modal-subhead">
  Capture visit audio and retrieve structured medical form output while you keep the form UX, session lifecycle, and downstream save logic in your product.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You own the form experience, template selection, recording controls, and downstream review flow. Suki processes visit audio and returns structured form data for Suki medical form templates instead of generating a full ambient clinical note.
  </p>

  <p>
    Use this integration when clinicians complete nursing forms, intake forms, assessments, medication reviews, or other template-based workflows where the output must land in defined fields instead of free-text note sections.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Medium</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~2 hours</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/documentation/form-filling">Form Filling overview</a>
        <span class="suki-use-case-modal-related-desc">Capabilities, common use cases, and the end-to-end workflow.</span>
      </li>
      <li>
        <a href="/documentation/form-filling-integration-decision-guide">Integration decision guide</a>
        <span class="suki-use-case-modal-related-desc">Choose the Form Filling API path for web, mobile, or backend products.</span>
      </li>
      <li>
        <a href="/documentation/form-filling-basic-usage">Basic usage</a>
        <span class="suki-use-case-modal-related-desc">Create a session, seed context, stream audio, end the session, and retrieve structured data.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You need template-driven medical form output, not a full ambient clinical note.</li>
    <li>You want clinicians to complete forms from natural visit conversation during in-person or virtual care.</li>
    <li>You need generated values to land in fields your EHR, care management product, or operational workflow can consume.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Form Filling APIs</strong> let you create sessions, seed form template context, stream visit audio on the Partner WebSocket, end capture, and retrieve structured output.</li>
  <li><strong>Form templates</strong> define the medical forms in scope for the visit through <code>form_template_id</code> values and returned <code>generated_values</code>.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Read the Form filling overview to confirm the workflow generates structured form output, not ambient clinical notes.</li>
  <li>Choose where your product will manage recording, template selection, review, and save logic.</li>
  <li>Follow Basic usage to create a session, seed context, stream audio, end capture, and retrieve structured data.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Start with the Form filling overview, then follow Basic usage and the Form Filling API reference for the exact session and structured-data contracts.
</p>

</div>
</div>
` }}
            />
          </div>
        </div>

        <h2 className="suki-use-case-section-title">All use cases</h2>

        <div className="suki-use-case-main-grid">
          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,form-filling" data-search="Form filling templates template id context generated values non generated values medical form catalog nursing assessment intake medication review structured data" data-card-title="Template-driven form sessions" data-card-docs-href="/documentation/form-filling-basic-usage">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Template-driven form sessions"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/uc-form-template-session.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=e61cbae9ee94225b6db404ea293e163d" alt="Search use cases illustration" width={480} height={180} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/uc-form-template-session.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Form filling</span>
              <span className="suki-use-case-card-title">Template-driven form sessions</span>

              <p className="suki-use-case-card-teaser">
                Bind Suki medical form templates to a session and retrieve structured output.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-blue">Form Filling APIs</span><span className="sdk-overview-badge sdk-overview-badge-gray">Templates</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-blue">Form Filling APIs</span>
  <span class="sdk-overview-badge sdk-overview-badge-gray">Templates</span>
</div>
<p class="suki-use-case-modal-subhead">
  Select Suki medical form templates, seed them into session context, and retrieve generated form values when processing completes.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You decide which forms are in scope for the visit by sending template metadata in session context. Suki uses the visit audio and selected templates to return structured values for the forms your workflow needs.
  </p>

  <p>
    Use this integration when your product must support known form types, such as intake, nursing, assessment, or medication review forms, and each workflow needs a predictable set of returned fields.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Medium</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~2 hours</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/documentation/form-filling-basic-usage">Form Filling basic usage</a>
        <span class="suki-use-case-modal-related-desc">Create a session, seed context, stream audio, and retrieve structured output.</span>
      </li>
      <li>
        <a href="/form-filling-api-reference/info/suki-medical-form-templates">Suki medical form templates</a>
        <span class="suki-use-case-modal-related-desc">List available templates and template schemas.</span>
      </li>
      <li>
        <a href="/form-filling-api-reference/form-filling-sessions/context">Seed session context</a>
        <span class="suki-use-case-modal-related-desc">Provide <code>form_template_id</code> values for the session.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You need structured output for a known set of medical form templates.</li>
    <li>You want your product to own template selection and review while Suki generates field values.</li>
    <li>You need a repeatable workflow for the same form types across sites, teams, or care settings.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Form Filling APIs</strong> let you create a session and seed context with <code>form_template_id</code> values.</li>
  <li><strong>Template APIs</strong> let you inspect supported medical form templates before your product starts a workflow.</li>
  <li><strong>Structured data retrieval</strong> returns generated and non-generated values after processing completes.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>List the Suki medical form templates available for your integration.</li>
  <li>Create a Form filling session and save the returned Form filling <code>ambient_session_id</code>.</li>
  <li>Seed or update context with the <code>form_template_id</code> values selected for the visit.</li>
  <li>Retrieve structured data and map returned values into your review or save workflow.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Read Form Filling basic usage, then open the template and session context references while you design template selection in your product.
</p>

</div>
</div>
` }}
            />
          </div>

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,form-filling" data-search="Form filling structured data retrieval generated values polling status webhook ehr handoff downstream save workflow completed failed" data-card-title="Structured form output and EHR handoff" data-card-docs-href="/form-filling-api-reference/form-filling-sessions/structured-data">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Structured form output and EHR handoff"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/uc-form-output-handoff.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=95cda9c4c77111ed319bad7be281a43c" alt="Search use cases illustration" width={480} height={180} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/uc-form-output-handoff.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Form filling</span>
              <span className="suki-use-case-card-title">Structured form output and EHR handoff</span>

              <p className="suki-use-case-card-teaser">
                Retrieve generated form values and route them into review, save, or handoff flows.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-blue">Form Filling APIs</span><span className="sdk-overview-badge sdk-overview-badge-gray">Structured data</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-blue">Form Filling APIs</span>
  <span class="sdk-overview-badge sdk-overview-badge-gray">Structured data</span>
</div>
<p class="suki-use-case-modal-subhead">
  Poll status or use configured notifications, retrieve generated form values, and route structured output into your downstream workflow.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You control what happens after capture ends. Suki returns structured form output, and your product decides how clinicians review, edit, approve, save, or hand off the values.
  </p>

  <p>
    Use this integration when your main product requirement is reliable downstream routing, for example saving fields into an EHR, handing off data to care management tools, or showing a review screen before final submission.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Medium</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~2 hours</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/form-filling-api-reference/form-filling-sessions/status">Form filling session status</a>
        <span class="suki-use-case-modal-related-desc">Poll until processing reaches a terminal status.</span>
      </li>
      <li>
        <a href="/form-filling-api-reference/form-filling-sessions/structured-data">Form filling structured data</a>
        <span class="suki-use-case-modal-related-desc">Retrieve <code>generated_values</code> and <code>non_generated_values</code>.</span>
      </li>
      <li>
        <a href="/documentation/webhook/overview">Webhook</a>
        <span class="suki-use-case-modal-related-desc">Use partner notifications when configured for your account.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>Your product needs structured form values after the visit, not real-time note text.</li>
    <li>You have an existing review, approval, or save workflow that should receive generated values.</li>
    <li>You need to account for forms that did not receive generated output before handing data downstream.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Status APIs</strong> let you poll processing state after the session ends.</li>
  <li><strong>Structured data APIs</strong> return generated and non-generated values for the templates in scope.</li>
  <li><strong>Webhooks</strong> can notify your application when completion events are configured for your partner account.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>End the Form filling session after capture completes.</li>
  <li>Poll session status or handle partner webhook completion events when configured.</li>
  <li>Retrieve structured data and map <code>generated_values</code> into your review or persistence model.</li>
  <li>Handle <code>non_generated_values</code> in your UI or downstream workflow.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Use the status and structured data references while you design your review state, error handling, and EHR handoff behavior.
</p>

</div>
</div>
` }}
            />
          </div>

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,ambient" data-search="problem-based charting pbc structured note diagnoses sections titles ambient merge clinical ui webhook content" data-card-title="Problem-based charting and structured note content" data-card-docs-href="/web-sdk/guides/ambient-problem-based-charting">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Problem-based charting and structured note content"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/uc-pbc-link.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=cb19b2eb9cebb781d9f16f33084b39b8" alt="Search use cases illustration" width={480} height={180} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/uc-pbc-link.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Ambient</span>
              <span className="suki-use-case-card-title">Problem-based charting and structured note content</span>

              <p className="suki-use-case-card-teaser">
                Align generated notes to problems, sections, and chart-aware titles.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-green">Web SDK</span><span className="sdk-overview-badge sdk-overview-badge-gray">Headless Web SDK</span><span className="sdk-overview-badge sdk-overview-badge-blue">Ambient APIs</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-green">Web SDK</span>
  <span class="sdk-overview-badge sdk-overview-badge-gray">Headless Web SDK</span>
  <span class="sdk-overview-badge sdk-overview-badge-blue">Ambient APIs</span>
</div>
<p class="suki-use-case-modal-subhead">
  Send problem-oriented structure so generated notes match diagnoses, sections, and visit-aware titles in your chart, using the Suki developer platform.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You supply diagnoses, visit-aware titles, sections, and related structure. Ambient capture still feeds the Suki Platform; returned documentation follows how clinicians chart in your product.
  </p>

  <p>
    Use this integration when a plain transcript is not enough. The same ambient pipeline applies, with extra hooks and payloads in the Web SDK guide and the Ambient API capability reference.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Advanced</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~3 hours</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/web-sdk/guides/ambient-problem-based-charting">Web SDK: Problem-based charting</a>
        <span class="suki-use-case-modal-related-desc">Partner guide for PBC-oriented ambient UX.</span>
      </li>
      <li>
        <a href="/api-reference/capabilities/problem-based-charting">Ambient API: PBC capability</a>
        <span class="suki-use-case-modal-related-desc">Structured problem-based charting in the API reference.</span>
      </li>
      <li>
        <a href="/headless-web-sdk/introduction">Headless Web SDK</a>
        <span class="suki-use-case-modal-related-desc">Use when React hooks replace headed Web SDK widgets (beta).</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You must render problems and sections consistently with an existing chart or problem list.</li>
    <li>You already send structured clinical payloads when you start or update a session.</li>
    <li>You pair ambient UX with EMR-aware titles and merges documented on this site.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Web SDK</strong> and <strong>Headless Web SDK</strong> guides describe UI and hook patterns for problem-based charting flows.</li>
  <li><strong>Ambient APIs</strong> publish capability-oriented contracts for structured content and for orchestration behind your UI.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Read the Web SDK problem-based charting guide for integration expectations and UI considerations.</li>
  <li>Cross-check fields and semantics in the problem-based charting capability reference.</li>
  <li>Validate session lifecycle and payloads for your ambient path (SDK or API) against the linked ambient guides.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Stay with the problem-based charting guide until your payloads match the capability reference, then use the Ambient API overview and webhooks or content retrieval docs as needed for your rollout.
</p>

</div>
</div>
` }}
            />
          </div>

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,ambient" data-search="medication orders session context emr metadata enrich mobile ios structured payload ambient" data-card-title="Medication orders and richer session context" data-card-docs-href="/documentation/medication-orders">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Medication orders and richer session context"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/uc-medication.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=e193af4845583378305bb733212da635" alt="Search use cases illustration" width={480} height={180} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/uc-medication.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Ambient</span>
              <span className="suki-use-case-card-title">Medication orders and richer session context</span>

              <p className="suki-use-case-card-teaser">
                Enrich sessions so drafts reflect medication orders and chart context.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-blue">Ambient APIs</span><span className="sdk-overview-badge sdk-overview-badge-purple">Mobile SDK</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-blue">Ambient APIs</span>
  <span class="sdk-overview-badge sdk-overview-badge-purple">Mobile SDK</span>
</div>
<p class="suki-use-case-modal-subhead">
  Attach medication orders and EMR metadata to sessions so drafts align with the chart clinicians already use, using the Suki developer platform.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You send medication orders and related metadata with the ambient session. Generated notes reflect the same clinical frame as the live chart.
  </p>

  <p>
    Use this integration when ordering context must ride alongside ambient capture. This documentation explains how to supply that context through Ambient APIs and how native capture fits when iOS owns the microphone through the Mobile SDK.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Advanced</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~2 hours</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/documentation/medication-orders">Medication orders</a>
        <span class="suki-use-case-modal-related-desc">Order-linked ambient context for partners.</span>
      </li>
      <li>
        <a href="/api-reference/overview">Ambient APIs</a>
        <span class="suki-use-case-modal-related-desc">Session and orchestration contracts.</span>
      </li>
      <li>
        <a href="/mobile-sdk/overview">Mobile SDK</a>
        <span class="suki-use-case-modal-related-desc">Native capture when it applies.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You must keep ordering data and encounter metadata aligned with draft documentation.</li>
    <li>You run mobile-led integrations where capture lives in the app and enrichment runs on your servers.</li>
    <li>You implement medication-order flows using the medication orders guide.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Ambient APIs</strong> accept structured payloads tied to medication orders. The medication orders guide and related API reference pages describe fields and sequencing.</li>
  <li><strong>Mobile SDK</strong> documents native hooks when iOS hosts ambient capture next to your enrichment pipeline.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Read the medication orders guide end to end before you change production payloads.</li>
  <li>Align REST sequencing with your ambient session lifecycle using the Ambient API overview and quickstart.</li>
  <li>For native iOS capture, verify Mobile SDK session responsibilities against the Mobile SDK overview.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Finish the medication orders guide, then open each referenced endpoint in the API reference so your server sends the payloads this documentation describes.
</p>

</div>
</div>
` }}
            />
          </div>

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,ambient" data-search="audio playback download wav compliance qa archival recording time-limited url stream store backend" data-card-title="Session audio for playback or download" data-card-docs-href="/documentation/audio-streaming-download">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Session audio for playback or download"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/uc-session-audio.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=efb909bec45b9240ca8dd9885bab1cee" alt="Search use cases illustration" width={480} height={180} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/uc-session-audio.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Ambient</span>
              <span className="suki-use-case-card-title">Session audio for playback or download</span>

              <p className="suki-use-case-card-teaser">
                Request short-lived recording access for replay or archival jobs.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-blue">Ambient APIs</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-blue">Ambient APIs</span>
</div>
<p class="suki-use-case-modal-subhead">
  Request time-limited access to session audio for replay, audit, or archival jobs on the server, using the Suki developer platform.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You run authenticated backend services that request short-lived access to session recordings. Your organization replays, audits, or archives audio that matches generated ambient documentation.
  </p>

  <p>
    Use this integration when retrieval must stay on the server. Follow Ambient APIs as described in the audio streaming and download guide. Do not expose long-lived media URLs to the browser.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Medium</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~1 hour</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/documentation/audio-streaming-download">Audio streaming and download</a>
        <span class="suki-use-case-modal-related-desc">Download and streaming patterns for partners.</span>
      </li>
      <li>
        <a href="/api-reference/ambient-content/recording">Get session recording</a>
        <span class="suki-use-case-modal-related-desc">API reference entry linked from ambient content docs.</span>
      </li>
      <li>
        <span class="suki-use-case-modal-related-static">Media &amp; integration guides</span>
        <span class="suki-use-case-modal-related-desc">Streaming topics that pair with recording retrieval.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You need compliance, legal, or QA evidence next to AI-generated notes.</li>
    <li>You already run secure download or streaming jobs from your data plane.</li>
    <li>You keep PHI-bearing media in architectures where only privileged services touch recordings.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Ambient APIs</strong> document recording retrieval, including short-lived URL patterns, in the audio streaming and download guide and related API reference pages.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Read the audio streaming and download guide for supported flows and constraints.</li>
  <li>Run retrieval only in services that authenticate the same way as your other Ambient API callers.</li>
  <li>If you ingest live audio, review the streaming guides under Documentation, Media &amp; integration.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Follow the audio streaming and download guide into the cited endpoints, then finish security review with your internal compliance stakeholders.
</p>

</div>
</div>
` }}
            />
          </div>

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,ambient" data-search="webhooks async session completion callback notify backend failure completes server verified url" data-card-title="Webhooks and asynchronous session completion" data-card-docs-href="/documentation/webhook/overview">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Webhooks and asynchronous session completion"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/uc-webhook.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=44e20f2a82733e9deb71963391b73cce" alt="Search use cases illustration" width={480} height={180} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/uc-webhook.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Ambient</span>
              <span className="suki-use-case-card-title">Webhooks and asynchronous session completion</span>

              <p className="suki-use-case-card-teaser">
                Receive HTTPS callbacks when ambient sessions complete or fail.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-orange">Webhooks</span><span className="sdk-overview-badge sdk-overview-badge-blue">Ambient APIs</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-orange">Webhooks</span>
  <span class="sdk-overview-badge sdk-overview-badge-blue">Ambient APIs</span>
</div>
<p class="suki-use-case-modal-subhead">
  Receive HTTPS callbacks when ambient sessions complete or fail so your servers update state without polling handsets, using the Suki developer platform.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You register a callback URL. The platform posts to your endpoint when sessions finish or error so downstream jobs run on your timeline.
  </p>

  <p>
    Use this integration when you want push-driven completion instead of polling. The webhook guide covers POST delivery, signature verification with your partner secret, and how SDK integrations still use the same Ambient APIs underneath.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Medium</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~1 hour</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/documentation/webhook/overview">Notification webhook guide</a>
        <span class="suki-use-case-modal-related-desc">Push delivery, verification, and pull-versus-push notes.</span>
      </li>
      <li>
        <a href="/api-reference/quickstart">Ambient API quickstart</a>
        <span class="suki-use-case-modal-related-desc">Session lifecycle before webhook events.</span>
      </li>
      <li>
        <span class="suki-use-case-modal-related-static">Ambient APIs</span>
        <span class="suki-use-case-modal-related-desc">REST endpoints referenced throughout the webhook documentation.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You already operate inbound HTTPS endpoints for other vendors.</li>
    <li>You use server-authoritative architectures where chart updates run after asynchronous generation finishes.</li>
    <li>You run mobile-heavy deployments where handset polling is costly or unreliable.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Notification webhooks</strong> document setup and verification, including headers such as <code>generated-at</code> and <code>X-API-Key</code> for HMAC validation.</li>
  <li><strong>Ambient APIs</strong> define session lifecycle before webhook delivery.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Implement signature verification exactly as the webhook guide describes (raw body plus timestamp concatenation).</li>
  <li>Expose only TLS endpoints that your onboarding contacts confirm are reachable from Suki infrastructure.</li>
  <li>Exercise end-to-end flows with Ambient API quickstart session calls and your webhook handler.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Finish the webhook guide, then align payloads with the ambient session objects your integration stores.
</p>

</div>
</div>
` }}
            />
          </div>

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,dictation" data-search="dictation sdk hosted iframe react javascript in-field scratchpad browser transcript callbacks field text notes forms" data-card-title="Hosted browser dictation for fields and scratchpads" data-card-docs-href="/dictation-sdk/introduction">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Hosted browser dictation for fields and scratchpads"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/uc-dictation-hosted.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=a15c7530d0f837730359739812fdca9d" alt="Search use cases illustration" width={480} height={180} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/uc-dictation-hosted.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Dictation</span>
              <span className="suki-use-case-card-title">Hosted browser dictation for fields and scratchpads</span>

              <p className="suki-use-case-card-teaser">
                Add hosted speech-to-text to web fields or scratchpad workflows.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-orange">Dictation SDK</span><span className="sdk-overview-badge sdk-overview-badge-yellow">JavaScript</span><span className="sdk-overview-badge sdk-overview-badge-green">React</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-orange">Dictation SDK</span>
  <span class="sdk-overview-badge sdk-overview-badge-yellow">JavaScript</span>
  <span class="sdk-overview-badge sdk-overview-badge-green">React</span>
</div>
<p class="suki-use-case-modal-subhead">
  Add hosted speech-to-text to a browser application with in-field and scratchpad modes while your product controls launch points, callbacks, and where transcript text goes.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You use the Dictation SDK for browser dictation through JavaScript or React. Suki hosts the dictation surface, and your application decides when to open it, which field or region it belongs to, and how submitted text updates your workflow.
  </p>

  <p>
    Use this integration when clinicians need to dictate into a note field, form field, or scratchpad without your team managing REST sessions and WebSocket streaming directly. This path is separate from Headless Web SDK ambient hooks and from direct Dictation API integrations.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Medium</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~2 hours</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/dictation-sdk/introduction">Dictation SDK introduction</a>
        <span class="suki-use-case-modal-related-desc">Product scope, modes, packages, and how the hosted iframe works.</span>
      </li>
      <li>
        <a href="/dictation-sdk/guides/in-field-mode">In-field mode</a>
        <span class="suki-use-case-modal-related-desc">Attach dictation to a specific field or editor.</span>
      </li>
      <li>
        <a href="/dictation-sdk/guides/scratchpad-mode">Scratchpad mode</a>
        <span class="suki-use-case-modal-related-desc">Open a standalone dictation panel that is not tied to one field.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You need real-time speech-to-text inside a browser workflow, not a full ambient clinical note.</li>
    <li>You want Suki to host the dictation UI while your app owns placement, launch behavior, and callbacks.</li>
    <li>You need either in-field dictation for a target input or scratchpad dictation for a standalone capture area.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Dictation SDK</strong> provides JavaScript and React packages for hosted browser dictation.</li>
  <li><strong>In-field mode</strong> ties dictation to a specific text field or editor through your configured host element and callbacks.</li>
  <li><strong>Scratchpad mode</strong> opens dictation in a standalone area when users need to capture text before applying it elsewhere.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Read the Dictation SDK introduction and confirm package, authentication, and iframe requirements.</li>
  <li>Choose in-field mode when dictation should attach to one field, or scratchpad mode when dictation needs its own area.</li>
  <li>Wire callbacks so submitted transcript text updates the correct field, editor, or downstream state in your product.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Start with the Dictation SDK introduction, then read in-field mode or scratchpad mode based on the browser experience you want to ship.
</p>

</div>
</div>
` }}
            />
          </div>

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,dictation" data-search="dictation api backend custom client websocket transcription session lifecycle partial final transcripts speech to text server controlled streaming" data-card-title="API-driven real-time dictation without hosted UI" data-card-docs-href="/api-reference/ambient-dictation">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: API-driven real-time dictation without hosted UI"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/uc-dictation-api.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=eeedd2df9cbeaf9e9bb0aac02c52752e" alt="Search use cases illustration" width={480} height={180} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/uc-dictation-api.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Dictation</span>
              <span className="suki-use-case-card-title">API-driven real-time dictation without hosted UI</span>

              <p className="suki-use-case-card-teaser">
                Create transcription sessions, stream audio, and handle partial and final transcripts.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-blue">Dictation APIs</span><span className="sdk-overview-badge sdk-overview-badge-green">WebSocket</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-blue">Dictation APIs</span>
  <span class="sdk-overview-badge sdk-overview-badge-green">WebSocket</span>
</div>
<p class="suki-use-case-modal-subhead">
  Build speech-to-text into your own client or backend flow by creating transcription sessions with REST APIs and streaming audio over the dictation WebSocket.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You own session creation, audio capture, transcript handling, and downstream text placement. Dictation APIs provide the REST session lifecycle and WebSocket streaming contract instead of a hosted browser UI.
  </p>

  <p>
    Use this integration when capture runs in a backend service, desktop shell, device gateway, or custom client where your team needs direct control over audio streaming and transcript handling.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Advanced</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~3 hours</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/api-reference/ambient-dictation">Dictation API reference</a>
        <span class="suki-use-case-modal-related-desc">Create, stream to, and end transcription sessions.</span>
      </li>
      <li>
        <a href="/documentation/dictation-streaming">Dictation audio streaming</a>
        <span class="suki-use-case-modal-related-desc">Handshake, JSON message format, partial transcripts, final transcripts, and end-of-audio rules.</span>
      </li>
      <li>
        <a href="/dictation-sdk/introduction">Dictation SDK introduction</a>
        <span class="suki-use-case-modal-related-desc">Use when hosted browser dictation is a better product fit.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You authenticate providers on your side and operate your own audio capture stack.</li>
    <li>You need real-time speech-to-text without embedding the Dictation SDK iframe.</li>
    <li>You can manage REST session lifecycle, WebSocket JSON audio messages, and transcript event handling in your application.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Dictation APIs</strong> document session creation, streaming, and teardown in the API reference.</li>
  <li><strong>Dictation audio streaming</strong> describes the JSON WebSocket framing, <code>audioData</code> payloads, <code>AUDIO_END</code>, and inbound transcript frames you must handle after a session exists.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Read Dictation Basic Usage to understand the REST and WebSocket workflow.</li>
  <li>Create a transcription session and save the <code>transcription_session_id</code>.</li>
  <li>Open <code>/ws/transcribe</code> only when the session is ready to accept speech, then send JSON <code>AUDIO</code> messages with Base64-encoded PCM audio.</li>
  <li>Render or store partial and final transcripts, send <code>AUDIO_END</code>, and end the session through the REST API.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Start with Dictation Basic Usage, then use Dictation Audio Streaming and the API reference while you implement the WebSocket and transcript handling path.
</p>

</div>
</div>
` }}
            />
          </div>

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,ambient" data-search="telehealth screen share tab audio browser encounter remote visit minimized layout" data-card-title="Telehealth and shared browser audio capture" data-card-docs-href="/web-sdk/guides/telehealth">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Telehealth and shared browser audio capture"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/uc-telehealth.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=4e66b4341258bbc8b12165acb6e71ab8" alt="Search use cases illustration" width={480} height={180} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/uc-telehealth.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Ambient</span>
              <span className="suki-use-case-card-title">Telehealth and shared browser audio capture</span>

              <p className="suki-use-case-card-teaser">
                Capture ambient audio inside browser telehealth and shared-audio setups.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-green">Web SDK</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-green">Web SDK</span>
</div>
<p class="suki-use-case-modal-subhead">
  Capture ambient audio in browser telehealth and shared-audio setups with Web SDK guidance on permissions and UX, using the Suki developer platform.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You keep clinicians in browser-based telehealth while the Web SDK handles capture patterns for that environment, including shared tab audio where supported.
  </p>

  <p>
    Use this integration when vendor portals, browser prompts, and recovery flows interact tightly. Follow the telehealth and session recovery guides instead of assuming desktop microphone behavior.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Advanced</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~2 hours</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/web-sdk/guides/telehealth">Web SDK telehealth guide</a>
        <span class="suki-use-case-modal-related-desc">Primary integration steps for this scenario.</span>
      </li>
      <li>
        <a href="/web-sdk/guides/ambient-session-recovery">Ambient session recovery</a>
        <span class="suki-use-case-modal-related-desc">Recovery after interruptions.</span>
      </li>
      <li>
        <a href="/web-sdk/overview">Web SDK overview</a>
        <span class="suki-use-case-modal-related-desc">Prerequisites for headed ambient integrations.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You ship products where most visits occur inside third-party telehealth web apps.</li>
    <li>You need explicit guidance on permission prompts and audio-sharing controls.</li>
    <li>You pair telehealth capture with minimized layouts documented under the Web SDK.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Web SDK</strong> telehealth guide covers supported capture scenarios.</li>
  <li><strong>Ambient session recovery</strong> describes resilience when users navigate away mid-session.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Implement flows from the telehealth guide before you customize chrome.</li>
  <li>Add recovery UX from the ambient session recovery guide for navigation edge cases.</li>
  <li>Run QA with each telehealth vendor’s permission model; policies sit outside Suki documentation.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Finish the telehealth guide checklist, then run vendor-specific QA on browser policies.
</p>

</div>
</div>
` }}
            />
          </div>

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,ambient" data-search="headless react hooks platform-react custom ui ambient session beta widgets compose" data-card-title="Fully custom ambient UI with React hooks" data-card-docs-href="/headless-web-sdk/introduction">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Fully custom ambient UI with React hooks"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/uc-headless-hooks.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=a9e4871f92a8e3f31d5619e3f6912a10" alt="Search use cases illustration" width={480} height={180} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/uc-headless-hooks.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Ambient</span>
              <span className="suki-use-case-card-title">Fully custom ambient UI with React hooks</span>

              <p className="suki-use-case-card-teaser">
                Build a fully custom ambient React UI with Headless Web SDK hooks (beta).
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-gray">Headless Web SDK</span><span className="sdk-overview-badge sdk-overview-badge-green">React</span><span className="sdk-overview-badge sdk-overview-badge-orange">Beta</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-gray">Headless Web SDK</span>
  <span class="sdk-overview-badge sdk-overview-badge-green">React</span>
  <span class="sdk-overview-badge sdk-overview-badge-orange">Beta</span>
</div>
<p class="suki-use-case-modal-subhead">
  Compose ambient flows in React 18+ with <code>@suki-sdk/platform-react</code> hooks while you own the full UI, using the Suki developer platform.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You use hooks for authentication, ambient sessions, recording lifecycle, and related behaviors. You implement prompts, accessibility, and error handling that the headed Web SDK widget otherwise provides.
  </p>

  <p>
    Use this integration when you cannot embed headed Web SDK UI but still need ambient in the browser. This beta surface is separate from the headed Web SDK. Plan staffing for offline and connectivity UX described in the Headless guides.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Advanced</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~4 hours</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/headless-web-sdk/introduction">Headless Web SDK introduction</a>
        <span class="suki-use-case-modal-related-desc">Beta scope and package entry points.</span>
      </li>
      <li>
        <a href="/headless-web-sdk/quickstart">Quickstart</a>
        <span class="suki-use-case-modal-related-desc">Initial wiring steps.</span>
      </li>
      <li>
        <span class="suki-use-case-modal-related-static">Hook guides (<code>/headless-web-sdk/guides/hooks/</code>)</span>
        <span class="suki-use-case-modal-related-desc">Auth, ambient session, and related hook references.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You cannot embed the headed Web SDK UI but still need ambient capabilities in the browser.</li>
    <li>You need design-system-level hook composition.</li>
    <li>You accept ownership of offline and connectivity UX described in the Headless guides.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Headless Web SDK</strong> introduction, quickstart, and hook guides list supported hooks and beta expectations.</li>
  <li><strong>Offline behavior guides</strong> state constraints you handle in React.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Confirm beta approval and package versions from the Headless Web SDK introduction.</li>
  <li>Finish the quickstart, then wire hooks under SDKs, Headless Web SDK, Hooks.</li>
  <li>Read the offline mode guide if clinicians can lose connectivity mid-session.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Complete quickstart, read each hook you plan to ship, then compare gaps with the headed Web SDK feature list and your solutions consultant.
</p>

</div>
</div>
` }}
            />
          </div>

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,ambient" data-search="note sections structured outputs documentation layout specialties multilingual personalization" data-card-title="Note sections and structured documentation outputs" data-card-docs-href="/documentation/note-sections">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Note sections and structured documentation outputs"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/uc-note-sections.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=8accc4b698f920b2288a78f7b7733dd3" alt="Search use cases illustration" width={480} height={180} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/uc-note-sections.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Ambient</span>
              <span className="suki-use-case-card-title">Note sections and structured documentation outputs</span>

              <p className="suki-use-case-card-teaser">
                Shape generated notes into predictable sections for downstream systems.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-green">Web SDK</span><span className="sdk-overview-badge sdk-overview-badge-blue">Ambient APIs</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-green">Web SDK</span>
  <span class="sdk-overview-badge sdk-overview-badge-blue">Ambient APIs</span>
</div>
<p class="suki-use-case-modal-subhead">
  Shape generated notes into sections, headings, and structured fields so downstream systems receive predictable layouts, using the Suki developer platform.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You configure how ambient output splits so EHR or specialty workflows consume repeatable structure instead of a single unstructured block.
  </p>

  <p>
    Use this integration when downstream systems need predictable note shape. The note sections documentation explains how to reason about outputs during ambient integration. Specialties and multilingual material linked from Core workflows add constraints some programs must apply.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Medium</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~1 hour</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/documentation/note-sections">Note sections</a>
        <span class="suki-use-case-modal-related-desc">Structured ambient outputs at a conceptual level.</span>
      </li>
      <li>
        <a href="/documentation/specialties">Specialties</a>
        <span class="suki-use-case-modal-related-desc">Specialty-specific documentation linked from Core workflows.</span>
      </li>
      <li>
        <span class="suki-use-case-modal-related-static"><a href="/web-sdk/overview">Web SDK</a> and <a href="/api-reference/overview">Ambient APIs</a></span>
        <span class="suki-use-case-modal-related-desc">Implementation after you read the concepts.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You mirror specialty-specific or organizational documentation standards.</li>
    <li>You require repeatable section ordering and titles.</li>
    <li>You extend ambient flows beyond a single generic note template.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Note sections</strong> and <strong>Specialties</strong> hub pages explain concepts and links in this documentation set.</li>
  <li><strong>Web SDK</strong> and <strong>Ambient APIs</strong> are the implementation surfaces after you understand section semantics.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Read the note sections guide before you change generation templates.</li>
  <li>Read the specialties hub when your rollout includes specialty-specific behavior documented there.</li>
  <li>Return to your ambient integration guide (Web SDK or API) to apply those concepts in code.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Read note sections and specialties first, then schedule engineering work against the ambient integration surface you already selected.
</p>

</div>
</div>
` }}
            />
          </div>

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,dictation" data-search="audio dictation choose integration path apis web sdk dictation sdk realtime transcription rest websocket hosted iframe" data-card-title="Choose the right dictation integration path" data-card-docs-href="/documentation/dictation">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Choose the right dictation integration path"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/uc-dictation-path.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=00034db8e36e1e5da2f121e6533d490c" alt="Search use cases illustration" width={480} height={180} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/uc-dictation-path.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Dictation</span>
              <span className="suki-use-case-card-title">Choose the right dictation integration path</span>

              <p className="suki-use-case-card-teaser">
                Compare API, Web SDK, and Dictation SDK options for speech-to-text.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-blue">Dictation APIs</span><span className="sdk-overview-badge sdk-overview-badge-orange">Dictation SDK</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-blue">Dictation APIs</span>
  <span class="sdk-overview-badge sdk-overview-badge-orange">Dictation SDK</span>
</div>
<p class="suki-use-case-modal-subhead">
  Compare the supported speech-to-text paths: direct Dictation APIs, Web SDK browser dictation, and Dictation SDK hosted iframe workflows.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You use the Audio Dictation guide to decide who owns capture, session lifecycle, transcript handling, and user experience. The guide separates direct REST and WebSocket integrations from browser SDK options.
  </p>

  <p>
    Use this integration when product and engineering teams need to choose between full API control, Web SDK browser components, or Dictation SDK in-field and scratchpad modes before implementation begins.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Medium</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~2 hours</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/documentation/dictation">Audio Dictation</a>
        <span class="suki-use-case-modal-related-desc">Main comparison page for Partner APIs, Web SDK, and Dictation SDK.</span>
      </li>
      <li>
        <a href="/documentation/dictation-streaming">Dictation audio streaming</a>
        <span class="suki-use-case-modal-related-desc">Wire format for direct API streaming integrations.</span>
      </li>
      <li>
        <a href="/api-reference/audio-transcription/create-session">Create transcription session</a>
        <span class="suki-use-case-modal-related-desc">REST entry point for direct API integrations.</span>
      </li>
      <li>
        <a href="/dictation-sdk/introduction">Dictation SDK introduction</a>
        <span class="suki-use-case-modal-related-desc">Hosted iframe experience for browser dictation.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You need to choose between direct API ownership and hosted browser dictation.</li>
    <li>You want speech-to-text, not ambient clinical note generation.</li>
    <li>You need one decision point before teams commit to JavaScript, React, backend, or custom-client work.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Audio Dictation</strong> explains when to choose Partner APIs, Web SDK, or Dictation SDK.</li>
  <li><strong>Dictation APIs</strong> provide direct REST and WebSocket control for custom clients.</li>
  <li><strong>Dictation SDK</strong> provides hosted browser dictation for in-field and scratchpad experiences.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Read the Audio Dictation guide and map your scenario to Partner APIs, Web SDK, or Dictation SDK.</li>
  <li>Choose Partner APIs when your backend or custom client owns session lifecycle and streaming.</li>
  <li>Choose Dictation SDK when your browser app needs hosted in-field or scratchpad dictation.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Use the Audio Dictation guide as the decision point, then continue to the API, Web SDK, or Dictation SDK path that matches your product.
</p>

</div>
</div>
` }}
            />
          </div>

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,dictation" data-search="websocket transcribe json frames streaming dictation wire format handshake audioData AUDIO_END partial final transcripts" data-card-title="Real-time dictation streaming over WebSocket" data-card-docs-href="/documentation/dictation-streaming">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Real-time dictation streaming over WebSocket"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/uc-dictation-stream.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=0b369997d80e039604b0bfaf9eff7db7" alt="Search use cases illustration" width={480} height={180} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/uc-dictation-stream.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Dictation</span>
              <span className="suki-use-case-card-title">Real-time dictation streaming over WebSocket</span>

              <p className="suki-use-case-card-teaser">
                Send JSON audio messages and receive partial and final transcript frames.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-green">WebSocket</span><span className="sdk-overview-badge sdk-overview-badge-blue">Dictation APIs</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-green">WebSocket</span>
  <span class="sdk-overview-badge sdk-overview-badge-blue">Dictation APIs</span>
</div>
<p class="suki-use-case-modal-subhead">
  Stream dictation audio as JSON text frames on <code>GET /ws/transcribe</code> after you create a transcription session with REST.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You follow a protocol that uses UTF-8 JSON frames, one object per frame, Base64-encoded <code>PCM_S16LE</code> in <code>audioData</code>, and an <code>EVENT</code> message with <code>AUDIO_END</code> when audio completes. Treat these rules as part of the integration contract.
  </p>

  <p>
    Use this integration when you implement a custom WebSocket client and need to render or store partial and final transcripts yourself. Follow the handshake and message ordering rules before you ship a custom client.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Advanced</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~2 hours</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/documentation/dictation-streaming">Dictation audio streaming</a>
        <span class="suki-use-case-modal-related-desc">Primary protocol documentation.</span>
      </li>
      <li>
        <a href="/api-reference/audio-transcription/stream-transcription">Stream audio to dictation session</a>
        <span class="suki-use-case-modal-related-desc">Endpoint reference.</span>
      </li>
      <li>
        <a href="/documentation/dictation">Audio Dictation</a>
        <span class="suki-use-case-modal-related-desc">Broader REST context.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You implement custom WebSocket clients instead of SDK-managed streaming.</li>
    <li>You need to process partial and final transcript frames in your own application.</li>
    <li>You add streaming next to REST session creation and end-session APIs.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Dictation audio streaming</strong> explains transport, message structure, session state rules, and inbound transcript frames.</li>
  <li><strong>Stream audio to dictation session</strong> provides endpoint details and code examples.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Create a transcription session and save the <code>transcription_session_id</code>.</li>
  <li>Open the WebSocket when the session is ready to accept speech.</li>
  <li>Send one JSON object per frame, use <code>audioData</code>, and finish each stream with <code>AUDIO_END</code>.</li>
  <li>Handle partial, final, and end-of-results transcript messages from the server.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Keep Dictation Audio Streaming open while you implement transport behavior, then cross-check the endpoint reference for code examples and connection details.
</p>

</div>
</div>
` }}
            />
          </div>

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,ambient" data-search="offline sessions sync recover headless react connectivity interruption" data-card-title="Offline-capable ambient capture (React)" data-card-docs-href="/headless-web-sdk/guides/offline-mode">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Offline-capable ambient capture (React)"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/uc-offline.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=a3a4d4f04923b45b40e35f9543a4f57b" alt="Search use cases illustration" width={480} height={180} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/uc-offline.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Ambient</span>
              <span className="suki-use-case-card-title">Offline-capable ambient capture (React)</span>

              <p className="suki-use-case-card-teaser">
                Plan ambient capture for brief connectivity loss in React.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-gray">Headless Web SDK</span><span className="sdk-overview-badge sdk-overview-badge-green">React</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-gray">Headless Web SDK</span>
  <span class="sdk-overview-badge sdk-overview-badge-green">React</span>
</div>
<p class="suki-use-case-modal-subhead">
  Plan for brief connectivity loss so clinicians recover or sync ambient sessions without data loss in Headless React apps, using the Suki developer platform.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You own prompts, retries, and reconciliation. Headless integrations expose hooks; the offline-mode and online and offline behavior guides describe what your team must implement.
  </p>

  <p>
    Use this integration when you deploy on unreliable Wi-Fi or cellular networks. Offline support is not automatic. Read the guides before you promise uninterrupted capture on poor networks.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Advanced</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~2 hours</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/headless-web-sdk/guides/offline-mode">Offline mode</a>
        <span class="suki-use-case-modal-related-desc">Primary guidance for this scenario.</span>
      </li>
      <li>
        <a href="/headless-web-sdk/guides/online-offline-behavior">Online and offline behavior</a>
        <span class="suki-use-case-modal-related-desc">Supporting behavioral documentation.</span>
      </li>
      <li>
        <a href="/headless-web-sdk/introduction">Headless Web SDK introduction</a>
        <span class="suki-use-case-modal-related-desc">Beta expectations and package entry.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You run Headless deployments on unreliable Wi-Fi or cellular networks.</li>
    <li>You invest in UX alongside hook wiring.</li>
    <li>You are committed to the beta Headless Web SDK packages.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Offline mode guide</strong> states ambient capture constraints.</li>
  <li><strong>Online and offline behavior</strong> explains state transitions you must honor.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Read the offline mode guide before you promise uninterrupted capture.</li>
  <li>Align in-product messaging with the online and offline behavior guide.</li>
  <li>Verify hooks against Headless quickstart examples.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Prototype offline scenarios in staging with the guides above, then document recovery copy for compliance review.
</p>

</div>
</div>
` }}
            />
          </div>

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,ambient" data-search="minimized compact widget layout ambient dialogs viewport" data-card-title="Compact ambient UI with minimized layout" data-card-docs-href="/web-sdk/minimized-layout/overview">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Compact ambient UI with minimized layout"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/uc-minimized.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=366bd2623a7c10520f9040af5c5e4277" alt="Search use cases illustration" width={480} height={180} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/uc-minimized.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Ambient</span>
              <span className="suki-use-case-card-title">Compact ambient UI with minimized layout</span>

              <p className="suki-use-case-card-teaser">
                Run ambient capture in a compact Web SDK footprint when space is tight.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-green">Web SDK</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-green">Web SDK</span>
</div>
<p class="suki-use-case-modal-subhead">
  Run ambient capture in a compact Web SDK footprint when space or vendor overlays block full chrome, using the Suki developer platform.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You keep the headed Web SDK with a smaller surface through minimized layout. Documentation lists embedding constraints, dialogs, and implementation notes for the compact UI.
  </p>

  <p>
    Use this integration when EHR frames or overlays leave little room for full chrome. Authentication and session responsibilities match the broader Web SDK guides.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Medium</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~1 hour</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/web-sdk/minimized-layout/overview">Minimized layout overview</a>
        <span class="suki-use-case-modal-related-desc">Entry point for compact Web SDK UX.</span>
      </li>
      <li>
        <a href="/web-sdk/overview">Web SDK overview</a>
        <span class="suki-use-case-modal-related-desc">Shared prerequisites.</span>
      </li>
      <li>
        <a href="/web-sdk/guides/telehealth">Telehealth guide</a>
        <span class="suki-use-case-modal-related-desc">Use when overlays constrain capture UI.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You embed in EHR frames or telehealth overlays with fixed viewport height.</li>
    <li>You keep ambient controls unobtrusive during multitasking.</li>
    <li>You are approved for Web SDK integrations that extend into minimized mode.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Minimized layout overview</strong> anchors the compact UX subtree.</li>
  <li>The <strong>implementation guide</strong> linked from that overview covers integration specifics.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Read the minimized layout overview for eligibility constraints.</li>
  <li>Follow the implementation guide linked from that page before UX sign-off.</li>
  <li>Regression-test with telehealth guide scenarios when both apply.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Finish the minimized layout checklist, then review UX against real vendor iframe dimensions.
</p>

</div>
</div>
` }}
            />
          </div>

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,ambient" data-search="personalization preferences provider tuning ambient capabilities partner configuration" data-card-title="Personalization and preference-aware ambient behavior" data-card-docs-href="/api-reference/capabilities/personalization">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Personalization and preference-aware ambient behavior"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/uc-personalization.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=8c0e5675f230645dd1c91da31377d2ba" alt="Search use cases illustration" width={480} height={180} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/uc-personalization.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Ambient</span>
              <span className="suki-use-case-card-title">Personalization and preference-aware ambient behavior</span>

              <p className="suki-use-case-card-teaser">
                Send personalization payloads so generation honors provider and organization settings.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-blue">Ambient APIs</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-blue">Ambient APIs</span>
</div>
<p class="suki-use-case-modal-subhead">
  Send personalization payloads so ambient generation honors provider- and organization-level settings, using the Suki developer platform.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You map preference payloads to the personalization capability in the API reference. Sessions consume the fields you attach at creation or update.
  </p>

  <p>
    Use this integration when end-user or org-level tuning must reach server-side generation. Field lists, enums, and coupling to session creation live in the personalization capability reference. This card does not duplicate schemas that change between releases.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Medium</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~1 hour</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/api-reference/capabilities/personalization">Personalization capability</a>
        <span class="suki-use-case-modal-related-desc">Canonical field definitions.</span>
      </li>
      <li>
        <a href="/api-reference/overview">Ambient API overview</a>
        <span class="suki-use-case-modal-related-desc">Adjacent session endpoints.</span>
      </li>
      <li>
        <a href="/documentation/partner-authentication">Partner authentication</a>
        <span class="suki-use-case-modal-related-desc">Authorize callers for preference writes.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You expose end-user tuning that must reach server-side prompts.</li>
    <li>You run multi-tenant deployments that differentiate organizations.</li>
    <li>You read capability docs next to session APIs.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Personalization capability reference</strong> defines payload semantics.</li>
  <li><strong>Ambient session APIs</strong> on that page show where preferences attach during creation or updates.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Open the personalization capability reference and list the fields your EMR can supply.</li>
  <li>Validate ordering against ambient session creation flows in the API reference.</li>
  <li>Monitor rejected payloads with your existing API observability tools.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Keep the capability reference open during implementation. Clinical governance owns business-specific tuning policies.
</p>

</div>
</div>
` }}
            />
          </div>

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,form-filling" data-search="Form filling integration decision choose path workflows apis web mobile backend templates audio structured output guide" data-card-title="Choose the Form Filling API path" data-card-docs-href="/documentation/form-filling-integration-decision-guide">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Choose the Form Filling API path"}>
              <div className="suki-feature-visual suki-use-case-card-visual" aria-hidden="true">
                <img src="https://mintcdn.com/suki-1e08f176/JWCBr7FDuYx75ifb/documentation/assets/use-case/uc-form-api-path.svg?fit=max&auto=format&n=JWCBr7FDuYx75ifb&q=85&s=5902caeb01171a426bba2ec67fbc3e0a" alt="Search use cases illustration" width={480} height={180} draggable={false} loading="eager" decoding="async" data-path="documentation/assets/use-case/uc-form-api-path.svg" />
              </div>
            </button>

            <div className="suki-use-case-card-stack">
              <span className="suki-use-case-card-cat">Form filling</span>
              <span className="suki-use-case-card-title">Choose the Form Filling API path</span>

              <p className="suki-use-case-card-teaser">
                Confirm Form Filling API ownership across web, mobile, and backend teams.
              </p>

              <div className="suki-use-case-card-foot" aria-hidden="true">
                <span className="suki-use-case-card-foot-label">Read more</span>
                <span className="suki-use-case-card-foot-arrow" aria-hidden="true">→</span>
              </div>

              <div className="suki-use-case-card-badges suki-use-case-card-badges--sr-only">
                <span className="sdk-overview-badge sdk-overview-badge-blue">Form Filling APIs</span><span className="sdk-overview-badge sdk-overview-badge-gray">Guide</span>
              </div>
            </div>

            <div
              className="suki-use-case-modal-source"
              data-suki-use-case-modal-source
              dangerouslySetInnerHTML={{ __html: `

<div class="suki-use-case-modal-layout">
<div class="suki-use-case-modal-hero">
<div class="suki-use-case-modal-badges suki-use-case-card-badges">
  <span class="sdk-overview-badge sdk-overview-badge-blue">Form Filling APIs</span>
  <span class="sdk-overview-badge sdk-overview-badge-gray">Guide</span>
</div>
<p class="suki-use-case-modal-subhead">
  Confirm how your team will own UI, audio handling, session lifecycle, and structured-data handoff before building a Form Filling API integration.
</p>
</div>

<div class="suki-use-case-modal-top-grid">
<div class="suki-use-case-modal-col suki-use-case-modal-col--main">

  <p class="suki-use-case-modal-lead">
    You use the integration decision guide to map your product type, team skills, and technical requirements to the Form Filling API workflow.
  </p>

  <p>
    Use this integration when architecture, product, and delivery teams need to align before implementation. The guide explains how Form Filling APIs apply across web applications, mobile applications, backend systems, and multi-platform products.
  </p>

  <div class="suki-use-case-modal-meta" aria-label="Complexity and estimated time">
    <span><span class="suki-use-case-modal-meta-kicker">Level</span> <strong>Easy</strong></span>
    <span class="suki-use-case-modal-meta-sep" aria-hidden="true"></span>
    <span><span class="suki-use-case-modal-meta-kicker">Est. time</span> <strong>~30 minutes</strong></span>
  </div>

  <div class="suki-use-case-modal-related">
    <p class="suki-use-case-modal-related-heading">Related links</p>
    <ul class="suki-use-case-modal-related-list">
      <li>
        <a href="/documentation/form-filling-integration-decision-guide">Integration decision guide</a>
        <span class="suki-use-case-modal-related-desc">Compare Form Filling API requirements by project type, team skills, and product needs.</span>
      </li>
      <li>
        <a href="/documentation/form-filling">Form Filling overview</a>
        <span class="suki-use-case-modal-related-desc">Capabilities, common use cases, and workflow overview.</span>
      </li>
      <li>
        <a href="/form-filling-api-reference/overview">Form Filling API reference</a>
        <span class="suki-use-case-modal-related-desc">REST contracts for session management, content retrieval, feedback, and info endpoints.</span>
      </li>
    </ul>
  </div>

</div>

<aside class="suki-use-case-modal-col suki-use-case-modal-col--aside">
  <h3 class="suki-use-case-detail-h3 suki-use-case-detail-h3--best">Best for</h3>
  <ul class="suki-use-case-modal-checklist">
    <li>You need to confirm whether Form Filling APIs fit your web, mobile, backend, or multi-platform product.</li>
    <li>You want clear ownership for UI, authentication, audio streaming, template selection, and structured-data retrieval.</li>
    <li>You need a decision artifact before teams estimate implementation work.</li>
  </ul>
</aside>
</div>

<div class="suki-use-case-modal-rest">

<h3 class="suki-use-case-detail-h3">How Suki supports this</h3>
<ul>
  <li><strong>Form filling integration decision guide</strong> explains the API path and ownership model.</li>
  <li><strong>Form filling overview</strong> defines the workflow and links to Basic usage.</li>
  <li><strong>Form Filling API reference</strong> provides endpoint-level contracts after the path is selected.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Read the Form filling overview to understand scope and terminology.</li>
  <li>Use the integration decision guide to confirm client, backend, and UI responsibilities.</li>
  <li>Open the Form Filling API reference before sprint planning so estimates reflect the actual contracts.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Share the decision guide with product, engineering, and security stakeholders, then move into Basic usage when the API path is confirmed.
</p>

</div>
</div>
` }}
            />
          </div>
        </div>

        <p className="suki-use-case-empty" hidden>
          No scenarios match your filters or search. Choose All or another workflow, or try a different keyword.
        </p>
      </div>

      <section className="suki-use-case-press-strip" data-suki-use-case-press-strip aria-labelledby="suki-use-case-press-heading">
        <h2 id="suki-use-case-press-heading" className="suki-use-case-section-title suki-use-case-section-title--press">
          Partner case studies and press
        </h2>

        <div className="suki-use-case-press-stack">
          <div className="suki-use-case-press-row" aria-label="Featured partner stories">
            <a className="suki-use-case-press-card" href="https://www.suki.ai/press-releases/healthedge-and-suki-introduce-ambient-clinical-intelligence-for-care-management/" target="_blank" rel="noopener noreferrer" aria-label="Open press release: HealthEdge and Suki introduce ambient clinical intelligence for care management">
              <div className="suki-use-case-press-card-top" aria-hidden="true">
                Suki + HealthEdge
              </div>

              <div className="suki-use-case-press-card-bottom">
                <span className="suki-use-case-press-card-title">HealthEdge and Suki: ambient care management</span>

                <div className="suki-use-case-press-card-foot">
                  <span>Read more</span>
                  <span className="suki-use-case-press-card-arrow" aria-hidden="true">↗</span>
                </div>
              </div>
            </a>

            <a className="suki-use-case-press-card" href="https://www.suki.ai/press-releases/suki-and-athenahealth-expand-partnership-with-general-availability-of-ambient-notes-using-sukis-ambient-technology/" target="_blank" rel="noopener noreferrer" aria-label="Open press release: Suki and athenahealth expand partnership with general availability of ambient notes">
              <div className="suki-use-case-press-card-top" aria-hidden="true">
                Suki + athenahealth
              </div>

              <div className="suki-use-case-press-card-bottom">
                <span className="suki-use-case-press-card-title">Ambient notes on the athenahealth network</span>

                <div className="suki-use-case-press-card-foot">
                  <span>Read more</span>
                  <span className="suki-use-case-press-card-arrow" aria-hidden="true">↗</span>
                </div>
              </div>
            </a>

            <a className="suki-use-case-press-card" href="https://www.suki.ai/press-releases/zoom-and-suki-plan-to-provide-ai-generated-clinical-notes-to-healthcare-institutions/" target="_blank" rel="noopener noreferrer" aria-label="Open press release: Zoom and Suki plan to provide AI-generated clinical notes to healthcare institutions">
              <div className="suki-use-case-press-card-top" aria-hidden="true">
                Suki + Zoom
              </div>

              <div className="suki-use-case-press-card-bottom">
                <span className="suki-use-case-press-card-title">Zoom and Suki: AI clinical notes</span>

                <div className="suki-use-case-press-card-foot">
                  <span>Read more</span>
                  <span className="suki-use-case-press-card-arrow" aria-hidden="true">↗</span>
                </div>
              </div>
            </a>
          </div>

          <div className="suki-use-case-press-expand">
            <input type="checkbox" id="suki-use-case-press-more-toggle" className="suki-use-case-press-more-input" />

            <label htmlFor="suki-use-case-press-more-toggle" className="suki-use-case-press-load-more">
              Load more
            </label>

            <div className="suki-use-case-press-row suki-use-case-press-row--extra" aria-label="More partner stories and news">
              <a className="suki-use-case-press-card" href="https://go.suki.ai/azalea-case-study" target="_blank" rel="noopener noreferrer" aria-label="Open case study: Why leading EHRs are integrating ambient listening (Azalea)">
                <div className="suki-use-case-press-card-top" aria-hidden="true">
                  Case study
                </div>

                <div className="suki-use-case-press-card-bottom">
                  <span className="suki-use-case-press-card-title">EHRs and ambient listening (Azalea Health)</span>

                  <div className="suki-use-case-press-card-foot">
                    <span>View case study</span>
                    <span className="suki-use-case-press-card-arrow" aria-hidden="true">↗</span>
                  </div>
                </div>
              </a>

              <a className="suki-use-case-press-card suki-use-case-press-card--more" href="https://www.suki.ai/press-releases/" target="_blank" rel="noopener noreferrer" aria-label="View more: open Suki press releases on suki.ai">
                <span className="suki-use-case-press-card-more-label">Suki news</span>
              </a>
            </div>
          </div>
        </div>
      </section>

      <div className="suki-use-case-modal-root" data-suki-use-case-modal-root hidden aria-hidden="true">
        <button type="button" className="suki-use-case-modal-backdrop" aria-label="Close use case details" data-suki-use-case-modal-close />

        <div className="suki-use-case-modal-sheet" role="dialog" aria-modal="true" aria-labelledby="suki-use-case-modal-title-el">
          <div className="suki-use-case-modal-head">
            <h2 id="suki-use-case-modal-title-el" className="suki-use-case-modal-title" data-suki-use-case-modal-title>
              {' '}
            </h2>

            <button type="button" className="suki-use-case-modal-close-btn" aria-label="Close dialog" data-suki-use-case-modal-close>
              <span aria-hidden="true">×</span>
            </button>
          </div>

          <div className="suki-use-case-modal-body" data-suki-use-case-modal-body />
        </div>
      </div>
    </div>
  </div>
</div>
