> ## 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, Form filling, and Patient Summary. 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>;

export const UCFilterChevron = () => <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" aria-hidden="true">
    <path d="m6 9 6 6 6-6" />
  </svg>;

<div className="hp-wrap api-overview-wrap web-sdk-exec-page">
  <div className="web-sdk-exec-content-zone">
    <div className="web-sdk-exec-section web-sdk-exec-section--exec-lead" aria-labelledby="suki-use-case-heading">
      <h2 id="suki-use-case-heading" className="sdk-overview-main-title api-overview-hero-page-title">Use Cases</h2>

      <div className="wse-exec-summary-prose wse-exec-summary-prose--full">
        <p className="wse-prose">
          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>

    <div className="suki-use-case-root" data-suki-use-case-root>
      <div className="suki-use-case-toolbar" aria-label="Search and filter use cases">
        <div className="suki-use-case-toolbar-inner release-notes-filter-dropdowns">
          <div className="release-notes-filter-dropdown-field release-notes-filter-search-field">
            <label id="uc-search-label" className="release-notes-filter-row-label" htmlFor="uc-use-case-search">
              Search
            </label>

            <div className="suki-use-case-search-wrap release-notes-timeline-search-wrap">
              <span aria-hidden="true">
                <UCSearchIcon />
              </span>

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

          <div className="release-notes-filter-dropdown-field">
            <label id="uc-workflow-label" className="release-notes-filter-row-label" htmlFor="uc-workflow-trigger">
              Workflows
            </label>

            <div className="release-notes-filter-dropdown" data-uc-dropdown="workflow">
              <button type="button" id="uc-workflow-trigger" className="release-notes-filter-dropdown-trigger" aria-haspopup="listbox" aria-expanded="false" aria-controls="uc-workflow-listbox" aria-labelledby="uc-workflow-label">
                <span className="release-notes-filter-dropdown-value" data-uc-workflow-value>All</span>

                <span className="release-notes-filter-dropdown-chevron" aria-hidden="true">
                  <UCFilterChevron />
                </span>
              </button>

              <ul id="uc-workflow-listbox" className="release-notes-filter-dropdown-list" role="listbox" aria-labelledby="uc-workflow-label" hidden>
                <li role="presentation">
                  <button type="button" role="option" className="release-notes-product-tab release-notes-product-tab--active" data-workflow-filter="all" aria-selected="true">
                    All
                  </button>
                </li>

                <li role="presentation">
                  <button type="button" role="option" className="release-notes-product-tab" data-workflow-filter="ambient" aria-selected="false">
                    Ambient
                  </button>
                </li>

                <li role="presentation">
                  <button type="button" role="option" className="release-notes-product-tab" data-workflow-filter="form-filling" aria-selected="false">
                    Form Filling
                  </button>
                </li>

                <li role="presentation">
                  <button type="button" role="option" className="release-notes-product-tab" data-workflow-filter="dictation" aria-selected="false">
                    Dictation
                  </button>
                </li>

                <li role="presentation">
                  <button type="button" role="option" className="release-notes-product-tab" data-workflow-filter="patient-summary" aria-selected="false">
                    Patient Summary
                  </button>
                </li>
              </ul>
            </div>
          </div>

          <div className="release-notes-filter-dropdown-field">
            <label id="uc-partner-label" className="release-notes-filter-row-label" htmlFor="uc-partner-trigger">
              Partner Type
            </label>

            <div className="release-notes-filter-dropdown" data-uc-dropdown="partner">
              <button type="button" id="uc-partner-trigger" className="release-notes-filter-dropdown-trigger" aria-haspopup="listbox" aria-expanded="false" aria-controls="uc-partner-listbox" aria-labelledby="uc-partner-label">
                <span className="release-notes-filter-dropdown-value" data-uc-partner-value>All</span>

                <span className="release-notes-filter-dropdown-chevron" aria-hidden="true">
                  <UCFilterChevron />
                </span>
              </button>

              <ul id="uc-partner-listbox" className="release-notes-filter-dropdown-list" role="listbox" aria-labelledby="uc-partner-label" hidden>
                <li role="presentation">
                  <button type="button" role="option" className="release-notes-product-tab release-notes-product-tab--active" data-partner-filter="all" aria-selected="true">
                    All
                  </button>
                </li>

                <li role="presentation">
                  <button type="button" role="option" className="release-notes-product-tab" data-partner-filter="ehr" aria-selected="false">
                    EHRs
                  </button>
                </li>

                <li role="presentation">
                  <button type="button" role="option" className="release-notes-product-tab" data-partner-filter="telehealth" aria-selected="false">
                    Telehealth
                  </button>
                </li>

                <li role="presentation">
                  <button type="button" role="option" className="release-notes-product-tab" data-partner-filter="rcm" aria-selected="false">
                    RCM
                  </button>
                </li>

                <li role="presentation">
                  <button type="button" role="option" className="release-notes-product-tab" data-partner-filter="hardware" aria-selected="false">
                    Hardware
                  </button>
                </li>

                <li role="presentation">
                  <button type="button" role="option" className="release-notes-product-tab" data-partner-filter="care-management" aria-selected="false">
                    Care Management
                  </button>
                </li>

                <li role="presentation">
                  <button type="button" role="option" className="release-notes-product-tab" data-partner-filter="others" aria-selected="false">
                    * others
                  </button>
                </li>
              </ul>
            </div>
          </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 id="use-case-automate-clinical-documentation" className="suki-use-case-card-wrap suki-use-case-card-wrap--featured" data-use-case-workflows="all,ambient" data-use-case-partners="all,ehr,telehealth,care-management,rcm" 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 tutorial" data-card-title="Automate Clinical Documentation from the Visit" data-card-docs-href="/documentation/concepts/ambient-clinical-notes/ambient-documentation" data-card-tutorial-href="/documentation/tutorials/web-sdk-ambient-react">
            <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 suki-use-case-card-visual--blue" aria-hidden="true" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Ambient</span>
                <span className="suki-use-case-card-cat">EHRs</span>
              </div>

              <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="/documentation/tutorials/web-sdk-ambient-react">Use-case tutorial: Build a Web SDK ambient session</a>
        <span class="suki-use-case-modal-related-desc">Authenticate, initialize the Web SDK, and mount SukiAssistant for one encounter.</span>
      </li>
      <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-use-case-partners="all,ehr,telehealth,care-management" data-search="structured Form filling medical forms templates visit audio session context generated values nursing intake assessment telehealth ehr backend rest websocket tutorial" data-card-title="Complete Structured Medical Forms from Visit Audio" data-card-docs-href="/documentation/concepts/form-filling/form-filling" data-card-tutorial-href="/documentation/tutorials/form-filling-sdk-ehr-handoff">
            <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" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Form Filling</span>
                <span className="suki-use-case-card-cat">EHRs</span>
              </div>

              <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-orange">Form Filling SDK</span><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-blue">Form Filling APIs</span>
  <span class="sdk-overview-badge sdk-overview-badge-orange">Form Filling SDK</span>
  <span class="sdk-overview-badge sdk-overview-badge-green">Web SDK</span>
</div>
<p class="suki-use-case-modal-subhead">
  Capture visit audio and retrieve structured medical form output through Form filling APIs, the Form filling SDK, or Web SDK Form filling.
</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 choose how much UI and session control you own. Form filling APIs give you full control over capture, review, and save. The Form filling SDK and Web SDK Form filling embed Suki's hosted form UI and return structured results through callbacks and webhooks.
  </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/tutorials/form-filling-sdk-ehr-handoff">Use-case tutorial: Build a Form filling Session with EHR Handoff</a>
        <span class="suki-use-case-modal-related-desc">Open Form filling in React and map structured_data with correlation_id.</span>
      </li>
      <li>
        <a href="/documentation/concepts/form-filling/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="/form-filling-sdk/introduction">Form filling SDK</a>
        <span class="suki-use-case-modal-related-desc">Hosted Form filling UI without the rest of the Web SDK.</span>
      </li>
      <li>
        <a href="/web-sdk/form-filling-overview">Web SDK Form filling</a>
        <span class="suki-use-case-modal-related-desc">Form filling from <code>@suki-sdk/js</code> or <code>@suki-sdk/react</code> at v3.2.0 or later.</span>
      </li>
      <li>
        <a href="/documentation/how-to/form-filling/form-filling-basic-usage">Form filling 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 filling SDK</strong> embeds Suki's hosted Form filling UI and returns structured JSON through callbacks and your partner webhook.</li>
  <li><strong>Web SDK</strong> includes the same hosted Form filling experience from <code>@suki-sdk/js</code> or <code>@suki-sdk/react</code> when you already use the headed Web SDK.</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 Form filling APIs, Form filling SDK, or Web SDK Form filling based on how much UI you want to own.</li>
  <li>Follow the matching quickstart or Basic usage guide for session setup, templates, and structured-data handoff.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Start with the Form filling overview, then open Form filling SDK, Web SDK Form filling, or Form filling basic usage for the path you selected.
</p>

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

          <div className="suki-use-case-card-wrap suki-use-case-card-wrap--featured" data-use-case-workflows="all,patient-summary" data-use-case-partners="all,ehr,care-management" data-search="Patient Summary clinic day schedule prep morning generation scheduled appointments fhir practitioner ckg pre-visit ehr rest api web sdk" data-card-title="Generate Patient Summaries for the Clinic Day" data-card-docs-href="/documentation/how-to/patient-summary/generate-patient-summaries">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Generate Patient Summaries for the clinic day"}>
              <div className="suki-feature-visual suki-use-case-card-visual suki-use-case-card-visual--blue" aria-hidden="true" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Patient Summary</span>
                <span className="suki-use-case-card-cat">EHRs</span>
              </div>

              <span className="suki-use-case-card-title">Generate Patient Summaries for the Clinic Day</span>

              <p className="suki-use-case-card-teaser">
                Prepare pre-visit summaries for every appointment on a provider's schedule before clinic begins.
              </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-yellow">Patient Summary APIs</span><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-yellow">Patient Summary APIs</span>
  <span class="sdk-overview-badge sdk-overview-badge-green">Web SDK</span>
</div>
<p class="suki-use-case-modal-subhead">
  Ingest FHIR data into CKG, then generate summaries with Patient Summary APIs or show them on the headed Web SDK patient profile.
</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">
    Your backend owns CKG ingestion. Patient Summary APIs trigger scheduled generation and status polling. Web SDK shows the pre-visit snippet and full summary on the patient profile after you pass matching encounter identifiers.
  </p>

  <p>
    Use this integration when partners need morning clinic preparation or provider sign-in flows that preload summaries for every qualifying appointment on a provider's schedule.
  </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/concepts/patient-summary/overview">Patient Summary overview</a>
        <span class="suki-use-case-modal-related-desc">What Patient Summary includes and when to use it.</span>
      </li>
      <li>
        <a href="/documentation/concepts/patient-summary/integrate-ckg">Integrate CKG</a>
        <span class="suki-use-case-modal-related-desc">Ingest FHIR data before generation starts.</span>
      </li>
      <li>
        <a href="/documentation/how-to/patient-summary/generate-patient-summaries">Generate patient summaries</a>
        <span class="suki-use-case-modal-related-desc">Choose scheduled appointments generation for clinic-day prep.</span>
      </li>
      <li>
        <a href="/web-sdk/guides/patient-summary">Patient Summary in Web SDK</a>
        <span class="suki-use-case-modal-related-desc">Show the summary on the headed patient profile without calling generate APIs.</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 summaries ready before the clinic day begins.</li>
    <li>Providers review a full schedule at sign-in or morning prep.</li>
    <li>Your backend can ingest FHIR data into CKG and trigger generation for a practitioner schedule.</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>Patient Summary APIs</strong> let you ingest FHIR data into CKG, trigger scheduled generation, poll job status, and retrieve completed summaries.</li>
  <li><strong>Web SDK</strong> shows Patient Summary on the headed patient profile after CKG ingestion. Pass matching <code>encounter.identifier</code> and <code>encounter.practitionerFhirId</code> when you initialize and when you mount.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Ingest the provider schedule and related patient FHIR data into CKG and wait until ingestion is <code>COMPLETED</code>.</li>
  <li>Trigger scheduled generation with <code>fhir_practitioner_id</code>.</li>
  <li>Poll status per appointment, then retrieve pre-visit or full summaries for schedule display.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Start with Generate patient summaries, then open the scheduled-appointments API reference and Retrieve patient summaries for display guidance.
</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-use-case-partners="all,ehr,care-management" 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/how-to/form-filling/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 suki-use-case-card-visual--blue" aria-hidden="true" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Form Filling</span>
                <span className="suki-use-case-card-cat">EHRs</span>
              </div>

              <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-orange">Form Filling SDK</span><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-blue">Form Filling APIs</span>
  <span class="sdk-overview-badge sdk-overview-badge-orange">Form Filling SDK</span>
  <span class="sdk-overview-badge sdk-overview-badge-green">Web SDK</span>
</div>
<p class="suki-use-case-modal-subhead">
  Select Suki Medical form templates, bind them to a session, 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/how-to/form-filling/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-sdk/guides/configuration">Form filling SDK configuration</a>
        <span class="suki-use-case-modal-related-desc">Pass <code>form_template_ids</code> when you open hosted Form filling.</span>
      </li>
      <li>
        <a href="/web-sdk/form-filling-overview">Web SDK Form filling</a>
        <span class="suki-use-case-modal-related-desc">Use the same template IDs from the headed Web SDK packages.</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>Form filling SDK</strong> and <strong>Web SDK</strong> accept the same Medical form templates through <code>form_template_ids</code> when you start hosted Form filling.</li>
  <li><strong>Template APIs</strong> let you inspect supported Medical form templates before your product starts a workflow.</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 id="use-case-form-ehr-handoff" className="suki-use-case-card-wrap" data-use-case-workflows="all,form-filling" data-use-case-partners="all,ehr,care-management,rcm" data-search="Form filling structured data retrieval generated values polling status webhook ehr handoff downstream save workflow completed failed tutorial" data-card-title="Structured Form Output and EHR Handoff" data-card-docs-href="/form-filling-api-reference/form-filling-sessions/structured-data" data-card-tutorial-href="/documentation/tutorials/form-filling-sdk-ehr-handoff">
            <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" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Form Filling</span>
                <span className="suki-use-case-card-cat">EHRs</span>
              </div>

              <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-orange">Form Filling SDK</span><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-blue">Form Filling APIs</span>
  <span class="sdk-overview-badge sdk-overview-badge-orange">Form Filling SDK</span>
  <span class="sdk-overview-badge sdk-overview-badge-green">Web SDK</span>
</div>
<p class="suki-use-case-modal-subhead">
  Retrieve generated form values through APIs, SDK callbacks, or webhooks, then route them into review, save, or EHR handoff flows.
</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="/documentation/tutorials/form-filling-sdk-ehr-handoff">Use-case tutorial: Build a Form filling Session with EHR Handoff</a>
        <span class="suki-use-case-modal-related-desc">Open Form filling in React and map structured_data with correlation_id.</span>
      </li>
      <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="/form-filling-sdk/guides/callbacks">Form filling SDK callbacks</a>
        <span class="suki-use-case-modal-related-desc">Handle submitted structured results in the hosted Form filling UI.</span>
      </li>
      <li>
        <a href="/web-sdk/form-filling-overview">Web SDK Form filling</a>
        <span class="suki-use-case-modal-related-desc">Receive structured output from the headed Web SDK Form filling flow.</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>Form filling APIs</strong> let you poll status and retrieve <code>generated_values</code> and <code>non_generated_values</code>.</li>
  <li><strong>Form filling SDK</strong> and <strong>Web SDK</strong> return structured results through <code>onSubmit</code> callbacks and partner webhooks.</li>
  <li><strong>Webhooks</strong> notify your application when Form filling processing reaches a terminal status.</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 id="use-case-problem-based-charting" className="suki-use-case-card-wrap" data-use-case-workflows="all,ambient" data-use-case-partners="all,ehr,rcm" data-search="problem-based charting pbc structured note diagnoses sections titles ambient merge clinical ui webhook content tutorial mobile sdk" data-card-title="Problem-Based Charting and Structured Note Content" data-card-docs-href="/web-sdk/guides/ambient-problem-based-charting" data-card-tutorial-href="/documentation/tutorials/web-sdk-pbc-ambient">
            <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 suki-use-case-card-visual--blue" aria-hidden="true" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Ambient</span>
                <span className="suki-use-case-card-cat">EHRs</span>
              </div>

              <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-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>
              </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>
</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.
</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. Enable PBC through Ambient APIs, Web SDK, or Mobile SDK, then read structured diagnosis output after the session completes.
  </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="/documentation/tutorials/web-sdk-pbc-ambient">Use-case tutorial: Build Problem-Based Charting in Web SDK</a>
        <span class="suki-use-case-modal-related-desc">End-to-end React mount with a PBN section and seeded diagnoses.</span>
      </li>
      <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">Problem-Based Charting capability</a>
        <span class="suki-use-case-modal-related-desc">PBC support across Ambient APIs, Web SDK, and Mobile SDK.</span>
      </li>
      <li>
        <a href="/mobile-sdk/ambient-guides/provide-clinical-context">Mobile SDK: Provide clinical context</a>
        <span class="suki-use-case-modal-related-desc">Pass diagnosis context and retrieve structured output on iOS.</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>Ambient APIs</strong> accept PBN sections and existing diagnoses in session context, then return structured diagnosis codes after generation.</li>
  <li><strong>Web SDK</strong> lets you mark a PBC section in <code>ambientOptions</code> and review problem-oriented notes in the headed UI.</li>
  <li><strong>Mobile SDK</strong> accepts diagnosis context through <code>setSessionContext</code> and returns structured output with <code>getStructuredData</code>.</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-use-case-partners="all,ehr,hardware" data-search="medication orders session context emr metadata enrich mobile ios web sdk structured payload ambient" data-card-title="Medication Orders and Richer Session Context" data-card-docs-href="/documentation/concepts/ambient-clinical-notes/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" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Ambient</span>
                <span className="suki-use-case-card-cat">EHRs</span>
              </div>

              <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-green">Web SDK</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-green">Web SDK</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.
</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. Ambient APIs and Mobile SDK accept medication context and return structured orders. Web SDK lets clinicians review generated orders in the headed UI before note 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>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/concepts/ambient-clinical-notes/medication-orders">Medication orders</a>
        <span class="suki-use-case-modal-related-desc">Order-linked ambient context for partners.</span>
      </li>
      <li>
        <a href="/web-sdk/medication-orders/overview">Web SDK: Medication orders</a>
        <span class="suki-use-case-modal-related-desc">Enable LOINC 52471-0 and read orders from the note submission payload.</span>
      </li>
      <li>
        <a href="/mobile-sdk/ambient-guides/provide-clinical-context">Mobile SDK: Provide clinical context</a>
        <span class="suki-use-case-modal-related-desc">Pass <code>kOrdersInfo</code> after you create the iOS ambient 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 must keep ordering data and encounter metadata aligned with draft documentation.</li>
    <li>You implement medication-order flows through Ambient APIs, Web SDK, or Mobile SDK.</li>
    <li>You persist validated orders to your EHR after generation or note submission.</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 medication context and return structured medication orders from content and structured-data endpoints.</li>
  <li><strong>Web SDK</strong> generates medication orders during ambient sessions, shows them in the headed UI, and returns <code>orders</code> on note submit.</li>
  <li><strong>Mobile SDK</strong> accepts <code>kOrdersInfo</code> in session context and returns structured medication orders when the session completes.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Read the medication orders guide and confirm the feature is enabled for your organization.</li>
  <li>Choose Ambient APIs, Web SDK, or Mobile SDK based on where clinicians capture and review orders.</li>
  <li>Map returned order payloads into your EHR ordering workflow. Suki does not submit orders to the EHR.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Finish the medication orders guide, then open the Web SDK, Mobile SDK, or API path that matches your capture product.
</p>

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

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,ambient" data-use-case-partners="all,ehr,rcm,others" 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/how-to/ambient-clinical-notes/use-ambient-session-recordings">
            <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 suki-use-case-card-visual--blue" aria-hidden="true" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Ambient</span>
                <span className="suki-use-case-card-cat">EHRs</span>
              </div>

              <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/how-to/ambient-clinical-notes/use-ambient-session-recordings">Ambient session recordings</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 id="use-case-webhooks" className="suki-use-case-card-wrap" data-use-case-workflows="all,ambient,form-filling" data-use-case-partners="all,others" data-search="webhooks async session completion callback notify backend failure completes server verified url tutorial form filling ckg" data-card-title="Webhooks and Asynchronous Session Completion" data-card-docs-href="/documentation/webhook/overview" data-card-tutorial-href="/documentation/tutorials/webhook-notification-receiver">
            <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" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Ambient</span>
                <span className="suki-use-case-card-cat">+ others</span>
              </div>

              <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 or Form filling 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><span className="sdk-overview-badge sdk-overview-badge-blue">Form Filling 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>
  <span class="sdk-overview-badge sdk-overview-badge-blue">Form Filling APIs</span>
</div>
<p class="suki-use-case-modal-subhead">
  Receive HTTPS callbacks when Ambient or Form filling sessions complete or fail so your servers update state without polling clients.
</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 Ambient, Form filling, and SDK sessions still use the same partner webhook callbacks.
  </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/tutorials/webhook-notification-receiver">Use-case tutorial: Build Webhook Notification Receiver</a>
        <span class="suki-use-case-modal-related-desc">Verify HMAC signatures and handle success and failure notifications.</span>
      </li>
      <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>
        <a href="/form-filling-api-reference/asynchronous/webhook">Form filling webhook</a>
        <span class="suki-use-case-modal-related-desc">Completion events for Form filling sessions.</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> and <strong>Form filling APIs</strong> use the same partner webhook callbacks when sessions complete or fail. SDK sessions use those callbacks too.</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 id="use-case-hosted-dictation" className="suki-use-case-card-wrap" data-use-case-workflows="all,dictation" data-use-case-partners="all,ehr" data-search="dictation sdk hosted iframe react javascript in-field scratchpad browser transcript callbacks field text notes forms tutorial" data-card-title="Hosted Browser Dictation for Fields and Scratchpads" data-card-docs-href="/dictation-sdk/introduction" data-card-tutorial-href="/documentation/tutorials/dictation-sdk-chart-field">
            <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 suki-use-case-card-visual--blue" aria-hidden="true" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Dictation</span>
                <span className="suki-use-case-card-cat">EHRs</span>
              </div>

              <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-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-orange">Dictation SDK</span>
  <span class="sdk-overview-badge sdk-overview-badge-green">Web SDK</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 Dictation SDK or Web SDK Dictation for browser speech-to-text. Suki hosts the Dictation UI, 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="/documentation/tutorials/dictation-sdk-chart-field">Use-case tutorial: Build Dictation into a Chart Field</a>
        <span class="suki-use-case-modal-related-desc">Mount Dictation SDK in-field mode on a chart textarea in React.</span>
      </li>
      <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="/web-sdk/dictation-overview">Web SDK Dictation</a>
        <span class="suki-use-case-modal-related-desc">In-field and scratchpad Dictation from <code>@suki-sdk/js</code> or <code>@suki-sdk/react</code>.</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 hosted iframe Dictation for in-field and scratchpad modes.</li>
  <li><strong>Web SDK</strong> includes the same in-field and scratchpad Dictation experience from the headed Web SDK packages.</li>
  <li><strong>In-field</strong> and <strong>scratchpad</strong> modes attach Dictation to a target field or a standalone capture panel.</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-use-case-partners="all,others" 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" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Dictation</span>
                <span className="suki-use-case-card-cat">+ others</span>
              </div>

              <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/how-to/audio-streaming/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-use-case-partners="all,telehealth" 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 suki-use-case-card-visual--blue" aria-hidden="true" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Ambient</span>
                <span className="suki-use-case-card-cat">Telehealth</span>
              </div>

              <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 id="use-case-custom-ambient-ui" className="suki-use-case-card-wrap" data-use-case-workflows="all,ambient" data-use-case-partners="all,others" data-search="headless react hooks platform-react custom ui ambient session beta widgets compose tutorial" data-card-title="Fully Custom Ambient UI with React Hooks" data-card-docs-href="/headless-web-sdk/introduction" data-card-tutorial-href="/documentation/tutorials/headless-ambient-hooks">
            <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" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Ambient</span>
                <span className="suki-use-case-card-cat">+ others</span>
              </div>

              <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="/documentation/tutorials/headless-ambient-hooks">Use-case tutorial: Build a Headless ambient Recorder</a>
        <span class="suki-use-case-modal-related-desc">Authenticate, create a session, and control recording with Headless hooks.</span>
      </li>
      <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-use-case-partners="all,ehr" 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/concepts/ambient-clinical-notes/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 suki-use-case-card-visual--blue" aria-hidden="true" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Ambient</span>
                <span className="suki-use-case-card-cat">EHRs</span>
              </div>

              <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-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">
  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/concepts/ambient-clinical-notes/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/concepts/ambient-clinical-notes/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>, <a href="/mobile-sdk/overview">Mobile SDK</a>, <a href="/headless-web-sdk/introduction">Headless Web SDK</a>, and <a href="/api-reference/overview">Ambient APIs</a></span>
        <span class="suki-use-case-modal-related-desc">Pass LOINC sections in the product you use for ambient capture.</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 LOINC sections and specialty constraints.</li>
  <li><strong>Ambient APIs</strong>, <strong>Web SDK</strong>, <strong>Mobile SDK</strong>, and <strong>Headless Web SDK</strong> all accept LOINC note sections when you create or update ambient session context.</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 (API, Web SDK, Mobile SDK, or Headless Web SDK) 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 SDK or API you already selected.
</p>

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

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,dictation" data-use-case-partners="all,others" 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/concepts/dictation/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" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Dictation</span>
                <span className="suki-use-case-card-cat">+ others</span>
              </div>

              <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-green">Web SDK</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-green">Web SDK</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/concepts/dictation/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/how-to/audio-streaming/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="/dictation-sdk/introduction">Dictation SDK introduction</a>
        <span class="suki-use-case-modal-related-desc">Hosted iframe experience for browser Dictation.</span>
      </li>
      <li>
        <a href="/web-sdk/dictation-overview">Web SDK Dictation</a>
        <span class="suki-use-case-modal-related-desc">Browser Dictation when you already use the headed Web SDK.</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>Web SDK</strong> and <strong>Dictation SDK</strong> provide 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 Web SDK or 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-use-case-partners="all,others" 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/how-to/audio-streaming/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 suki-use-case-card-visual--blue" aria-hidden="true" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Dictation</span>
                <span className="suki-use-case-card-cat">+ others</span>
              </div>

              <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/how-to/audio-streaming/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/concepts/dictation/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-use-case-partners="all,hardware,others" 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" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Ambient</span>
                <span className="suki-use-case-card-cat">Hardware</span>
              </div>

              <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-use-case-partners="all,ehr,telehealth" 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 suki-use-case-card-visual--blue" aria-hidden="true" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Ambient</span>
                <span className="suki-use-case-card-cat">EHRs</span>
              </div>

              <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-use-case-partners="all,ehr,others" 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 suki-use-case-card-visual--blue" aria-hidden="true" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Ambient</span>
                <span className="suki-use-case-card-cat">EHRs</span>
              </div>

              <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><span className="sdk-overview-badge sdk-overview-badge-green">Web SDK</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-green">Web SDK</span>
  <span class="sdk-overview-badge sdk-overview-badge-purple">Mobile SDK</span>
</div>
<p class="suki-use-case-modal-subhead">
  Save provider personalization preferences so ambient generation honors verbosity and section format across future notes.
</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 save personalization preferences once per provider. Suki applies verbosity and section format to that provider's future ambient notes. You do not send personalization fields on every session.
  </p>

  <p>
    Use this integration when end-user or org-level tuning must reach server-side generation. Set preferences with Ambient APIs or Mobile SDK, then run ambient capture in Ambient APIs, Web SDK, or 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>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="/mobile-sdk/overview">Mobile SDK</a>
        <span class="suki-use-case-modal-related-desc">Set personalization through Mobile SDK provider preference APIs.</span>
      </li>
      <li>
        <a href="/web-sdk/overview">Web SDK</a>
        <span class="suki-use-case-modal-related-desc">Run ambient capture after preferences are saved for the provider.</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>Ambient APIs</strong> save preferences with the User Preferences API for each <code>sdp_provider_id</code>.</li>
  <li><strong>Mobile SDK</strong> sets the same provider preferences through SDK methods, then applies them to future iOS notes.</li>
  <li><strong>Web SDK</strong> uses the saved preferences during headed ambient capture. You do not pass personalization fields in <code>ambientOptions</code>.</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-use-case-partners="all,others" 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/get-started/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" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Form Filling</span>
                <span className="suki-use-case-card-cat">+ others</span>
              </div>

              <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-orange">Form Filling SDK</span><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-blue">Form Filling APIs</span>
  <span class="sdk-overview-badge sdk-overview-badge-orange">Form Filling SDK</span>
  <span class="sdk-overview-badge sdk-overview-badge-green">Web SDK</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 you choose Form filling APIs, Form filling SDK, or Web SDK Form filling.
</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 Form filling APIs, Form filling SDK, or Web SDK Form filling.
  </p>

  <p>
    Use this integration when architecture, product, and delivery teams need to align before implementation. The guide explains how each Form filling path applies across web 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/get-started/form-filling-integration-decision-guide">Integration decision guide</a>
        <span class="suki-use-case-modal-related-desc">Compare Form filling APIs, Form filling SDK, and Web SDK Form filling by product needs.</span>
      </li>
      <li>
        <a href="/documentation/concepts/form-filling/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-sdk/introduction">Form filling SDK</a>
        <span class="suki-use-case-modal-related-desc">Hosted Form filling UI when you do not need the rest of the Web SDK.</span>
      </li>
      <li>
        <a href="/web-sdk/form-filling-overview">Web SDK Form filling</a>
        <span class="suki-use-case-modal-related-desc">Form filling from the headed Web SDK packages.</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 APIs</strong> give you full control over session lifecycle, audio streaming, and structured-data retrieval.</li>
  <li><strong>Form filling SDK</strong> and <strong>Web SDK</strong> provide hosted Form filling UI with callbacks and webhook delivery.</li>
  <li><strong>Form filling integration decision guide</strong> explains ownership for each path.</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 className="suki-use-case-card-wrap" data-use-case-workflows="all,patient-summary" data-use-case-partners="all,ehr,care-management" data-search="Patient Summary single encounter on demand chart review late appointment fhir encounter practitioner generate refresh ckg" data-card-title="Generate a Summary for One Encounter" data-card-docs-href="/documentation/how-to/patient-summary/generate-patient-summaries">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Generate a summary for one encounter"}>
              <div className="suki-feature-visual suki-use-case-card-visual suki-use-case-card-visual--blue" aria-hidden="true" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Patient Summary</span>
                <span className="suki-use-case-card-cat">EHRs</span>
              </div>

              <span className="suki-use-case-card-title">Generate a Summary for One Encounter</span>

              <p className="suki-use-case-card-teaser">
                Generate a pre-visit summary when a clinician opens one chart or a late appointment is added.
              </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-yellow">Patient Summary 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-yellow">Patient Summary APIs</span>
</div>
<p class="suki-use-case-modal-subhead">
  Trigger generation for one upcoming visit with <code>fhir_encounter_id</code> and <code>fhir_practitioner_id</code>, then poll until the job 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">
    Use encounter generation when you need one summary for one patient. Your backend returns a <code>patient_summary_id</code>, monitors job status, and retrieves the completed summary for chart review.
  </p>

  <p>
    Use this integration for chart open, late schedule additions, or regenerating a summary after meaningful CKG updates for a single visit.
  </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.5 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/how-to/patient-summary/generate-patient-summaries">Generate patient summaries</a>
        <span class="suki-use-case-modal-related-desc">Choose single encounter generation for on-demand requests.</span>
      </li>
      <li>
        <a href="/patient-summary-api-reference/summary-generation/encounter-summary">Generate for an encounter</a>
        <span class="suki-use-case-modal-related-desc">API reference for encounter generation.</span>
      </li>
      <li>
        <a href="/patient-summary-api-reference/summary-jobs">Summary Jobs APIs</a>
        <span class="suki-use-case-modal-related-desc">Poll generation status until a terminal state.</span>
      </li>
      <li>
        <a href="/documentation/get-started/patient-summary-integration-decision-guide">Patient Summary decision guide</a>
        <span class="suki-use-case-modal-related-desc">Decide when encounter generation fits your product.</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>A clinician opens one patient chart and needs a summary for that visit.</li>
    <li>A patient is added after the morning scheduled generation run.</li>
    <li>New FHIR data requires an updated summary for one encounter.</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>Encounter generation</strong> creates an asynchronous job for one <code>fhir_encounter_id</code> and <code>fhir_practitioner_id</code> pair.</li>
  <li><strong>Summary Jobs APIs</strong> let you poll until status is <code>COMPLETED</code>, <code>FAILED</code>, or <code>ABORTED</code>.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Confirm the encounter FHIR data is ingested into CKG.</li>
  <li>Call encounter generation and store the returned <code>patient_summary_id</code> when needed.</li>
  <li>Poll job status, then retrieve the full summary for chart review.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Follow Generate patient summaries for the encounter path, then Retrieve patient summaries for display and empty-state guidance.
</p>

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

          <div className="suki-use-case-card-wrap" data-use-case-workflows="all,patient-summary" data-use-case-partners="all,ehr,care-management" data-search="Patient Summary retrieve display pre-visit full summary empty states no upcoming appointment schedule chart review sections" data-card-title="Retrieve and Display Patient Summaries" data-card-docs-href="/documentation/how-to/patient-summary/retrieve-patient-summaries">
            <button type="button" className="suki-use-case-card suki-use-case-card--media" aria-haspopup="dialog" aria-label={"Open details: Retrieve and display Patient Summaries"}>
              <div className="suki-feature-visual suki-use-case-card-visual suki-use-case-card-visual--blue" aria-hidden="true" />
            </button>

            <div className="suki-use-case-card-stack">
              <div className="suki-use-case-card-cats">
                <span className="suki-use-case-card-cat">Patient Summary</span>
                <span className="suki-use-case-card-cat">EHRs</span>
              </div>

              <span className="suki-use-case-card-title">Retrieve and Display Patient Summaries</span>

              <p className="suki-use-case-card-teaser">
                Load full or pre-visit summaries into schedule and chart UI, including empty clinical states.
              </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-yellow">Patient Summary APIs</span><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-yellow">Patient Summary APIs</span>
  <span class="sdk-overview-badge sdk-overview-badge-green">Web SDK</span>
</div>
<p class="suki-use-case-modal-subhead">
  Retrieve summaries through Patient Summary APIs for your own UI, or show them in the headed Web SDK patient profile.
</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">
    Retrieval is separate from generation. Patient Summary APIs return full or pre-visit summaries for your own schedule and chart UI. Web SDK displays the snippet and full summary in the headed patient profile. You do not call retrieve APIs for that headed workflow.
  </p>

  <p>
    Use this integration when clinicians need <strong>About this visit</strong>, <strong>Summary</strong>, <strong>Previous visits</strong>, and <strong>Problems</strong> in schedule cards, appointment details, or patient profiles.
  </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.5 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/how-to/patient-summary/retrieve-patient-summaries">Retrieve patient summaries</a>
        <span class="suki-use-case-modal-related-desc">Full vs pre-visit retrieval and empty-state guidance.</span>
      </li>
      <li>
        <a href="/patient-summary-api-reference/summaries">Patient Summaries APIs</a>
        <span class="suki-use-case-modal-related-desc">Retrieve by ID or partner identifiers.</span>
      </li>
      <li>
        <a href="/documentation/how-to/patient-summary/basic-usage">Patient Summary basic usage</a>
        <span class="suki-use-case-modal-related-desc">End-to-end API example including retrieval.</span>
      </li>
      <li>
        <a href="/web-sdk/guides/patient-summary">Patient Summary in Web SDK</a>
        <span class="suki-use-case-modal-related-desc">Show the summary on the headed patient profile.</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 schedule previews with the pre-visit section.</li>
    <li>You need full chart review with all Patient Summary sections.</li>
    <li>You must design UI for no upcoming appointment or limited prior history.</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>Patient Summaries APIs</strong> return the full summary or the pre-visit section by <code>patient_summary_id</code> or partner identifiers.</li>
  <li><strong>Web SDK</strong> owns the Patient Summary UI inside the headed iframe after you ingest FHIR and pass matching encounter identifiers.</li>
</ul>

<h3 class="suki-use-case-detail-h3">Implementation checklist</h3>
<ol>
  <li>Confirm generation status is <code>COMPLETED</code> before retrieval.</li>
  <li>Choose full summary or pre-visit retrieval for each clinical surface.</li>
  <li>Render empty states for no upcoming appointment and limited prior history.</li>
</ol>

<h3 class="suki-use-case-detail-h3">What to read next</h3>
<p>
  Start with Retrieve patient summaries, then use the Patient Summaries API reference while you map sections into schedule and chart UI.
</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>
