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

# Welcome to Suki for Partners

> Suki for Partners is Suki's developer platform for embedding Ambient Clinical Intelligence into healthcare applications with production-ready APIs and SDKs

**Suki for Partners** provides production-ready <Tooltip tip="Server-to-server REST endpoints and WebSockets for session lifecycle, content retrieval, and webhooks." cta="View API Overview" href="/api-reference/overview">APIs</Tooltip> and <Tooltip tip="Client libraries for Web, React, iOS, Dictation, and Form Filling." cta="View SDK Overview" href="/sdk-overview/overview">SDKs</Tooltip> to embed Ambient Clinical Intelligence (ACI) directly into healthcare applications without building speech, language, and model infrastructure yourself.

Build modular, interoperable clinical AI workflows with Suki for Partners:

* **Ambient documentation:** Capture patient-provider conversations and draft structured clinical notes.
* **Form filling:** Extract visit conversation into structured medical form fields.
* **Dictation:** Stream speech-to-text in real time for inline editing and scratchpad entry.
* **Patient summaries:** Generate concise pre-visit summaries from FHIR data bundles.
* **Modular integration:** Combine hosted UI components, headless React hooks, or REST APIs.
* **Clinical intelligence:** Access ICD-10/HCC coding, LOINC note sections, Problem-Based Charting, and 80+ multilingual support.

You keep your UI, branding, and workflows. Suki handles all clinical AI infrastructure and services behind your product.

## Core workflows

Choose what you are building first. Each workflow serves a different purpose. Read the overview to understand the workflow and refer to the quickstart to build the minimum path. Choose an SDK or API after you pick a workflow.

<CardGroup cols={2}>
  <Card title="Ambient Documentation" icon="waveform">
    Capture patient-provider conversations and draft structured clinical notes.

    <div style={{marginTop: '1rem', display: 'flex', gap: '0.75rem', flexWrap: 'wrap'}}>
      <a href="/documentation/concepts/ambient-clinical-notes/ambient-documentation" className="learning-path-button">Overview</a>
      <a href="/documentation/get-started/quick-start#ambient-workflow" className="learning-path-button">Quickstart</a>
    </div>

    ```bash theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
    npx skills add https://developer.suki.ai --skill suki-ambient
    ```
  </Card>

  <Card title="Form Filling" icon="file-lines">
    Turn visit conversation into structured medical form fields.

    <div style={{marginTop: '1rem', display: 'flex', gap: '0.75rem', flexWrap: 'wrap'}}>
      <a href="/documentation/concepts/form-filling/form-filling-overview" className="learning-path-button">Overview</a>
      <a href="/documentation/get-started/quick-start#form-filling-workflow" className="learning-path-button">Quickstart</a>
    </div>

    ```bash theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
    npx skills add https://developer.suki.ai --skill suki-form-filling
    ```
  </Card>

  <Card title="Dictation" icon="microphone">
    Stream speech-to-text for inline editing and scratchpad entry.

    <div style={{marginTop: '1rem', display: 'flex', gap: '0.75rem', flexWrap: 'wrap'}}>
      <a href="/documentation/concepts/dictation/dictation-overview" className="learning-path-button">Overview</a>
      <a href="/dictation-sdk/quickstart" className="learning-path-button">Quickstart</a>
    </div>

    ```bash theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
    npx skills add https://developer.suki.ai --skill suki-dictation
    ```
  </Card>

  <Card title="Patient Summary" icon="list-check">
    Generate encounter and pre-visit summaries from FHIR data.

    <div style={{marginTop: '1rem', display: 'flex', gap: '0.75rem', flexWrap: 'wrap'}}>
      <a href="/documentation/concepts/patient-summary/overview" className="learning-path-button">Overview</a>
      <a href="/patient-summary-api-reference/quickstart" className="learning-path-button">Quickstart</a>
    </div>

    ```bash theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
    npx skills add https://developer.suki.ai --skill suki-patient-summary
    ```
  </Card>
</CardGroup>

<Note>
  Ambient notes can work across Mobile SDK, Web SDK, Headless Web SDK, and Ambient APIs when you pass shared encounter identifiers. That is part of Ambient, not a separate capability. Refer to [Ambient interoperability](/documentation/concepts/ambient-clinical-notes/ambient-interoperability).
</Note>

## Get started

Follow these steps to integrate Suki into your application. Start with a workflow and a quickstart.

<Accordion title="Start Your Integration" defaultOpen="true">
  <Steps>
    <Step title="Choose a Workflow" icon="waveform">
      Pick Ambient documentation, Form filling, Dictation, or Patient Summary from [Core workflows](#core-workflows). Open Overview to understand the workflow.

      <a href="#core-workflows" className="learning-path-button">View Core Workflows</a>
    </Step>

    <Step title="Choose an SDK or API" icon="list">
      Decide how much UI Suki should own, then open the matching integration path.

      <a href="/documentation/get-started/integration-overview" className="learning-path-button">Choose an Integration</a>
    </Step>

    <Step title="Complete Partner Onboarding" icon="key">
      Obtain your partner credentials and configure your integration environment.

      <a href="/documentation/get-started/partner-onboarding" className="learning-path-button">Partner Onboarding</a>
    </Step>

    <Step title="Set Up Authentication" icon="shield-check">
      Configure partner authentication so your application can securely access Suki APIs and SDKs.

      <a href="/documentation/how-to/partner-authentication" className="learning-path-button">Set Up Authentication</a>
    </Step>

    <Step title="Build the Minimum Path" icon="code">
      Follow the product quickstart until one end-to-end flow works on staging. Add context, webhooks, and other options only after that succeeds.

      <a href="/documentation/get-started/quick-start" className="learning-path-button">Quickstart</a>
    </Step>
  </Steps>
</Accordion>

## Why Suki

Suki is a purpose-built clinical AI platform, not a general-purpose speech or LLM API adapted for healthcare. Suki for Partners gives you production-ready APIs and SDKs to embed Ambient Clinical Intelligence into your application without building speech recognition, clinical language understanding, note generation, and supporting infrastructure yourself.

You keep **full control** of your application's user interface, workflows, and branding while Suki manages the clinical intelligence, AI models, security, compliance, and platform services.

Whether you are building **EHRs**, **telehealth platforms**, **care management systems**, **hardware solutions**, or **revenue cycle applications**, Suki helps you add Ambient Clinical Intelligence with less development effort.

A few things that distinguish Suki:

* **Clinical depth across 100+ specialties.** Note content reflects real clinical context for cardiology, behavioral health, and other specialties rather than generic templates.
* **80+ language support.** Patients can speak in their preferred language while clinicians receive formatted English documentation automatically, with no manual translation step.
* **Multiple integration modalities.** Choose a pre-built headed UI, headless React hooks, native iOS, or REST APIs, and combine them in the same workflow. Most platforms offer one or two paths; Suki supports all of them from a single platform.
* **You own the UX and branding.** Customize the Web SDK to match your design system, own every screen with the Headless Web SDK, or go fully API-driven. You control how much Suki branding appears.
* **Enterprise healthcare compliance.** HIPAA compliance, SOC 2 Type II certification, and end-to-end encryption are built in, so you inherit an established security posture rather than building it yourself.
* **Production-ready in weeks, not months.** Partner teams typically integrate in 2 to 4 weeks instead of spending 6 to 12 months building AI infrastructure, clinical workflows, and compliance programs in house.

Most developers also choose Suki for Partners for these platform benefits:

<AccordionGroup>
  <Accordion title="Production-ready Platform" icon="rocket">
    Integrate Ambient documentation, Form filling, and Dictation using production-ready SDKs and APIs instead of building and maintaining AI infrastructure yourself.
  </Accordion>

  <Accordion title="Healthcare-ready Infrastructure" icon="lock">
    Build on a platform designed for healthcare applications with enterprise security, compliance, and operational reliability.
  </Accordion>

  <Accordion title="Continuously Improving AI" icon="sparkles">
    Benefit from ongoing improvements to speech recognition, clinical language understanding, and platform capabilities without updating your own AI stack.
  </Accordion>

  <Accordion title="Focus on Your Application" icon="heart">
    Build your application's user interface, workflows, and integrations while Suki manages the clinical AI platform.
  </Accordion>

  <Accordion title="Flexible Integration Options" icon="paint-brush">
    Choose the integration approach that fits your application, including Web SDK, Headless Web SDK, Mobile SDK, Dictation SDK, Form filling SDK, and REST APIs.
  </Accordion>

  <Accordion title="Backward-Compatible Platform" icon="user">
    Integrate with a platform that continues to evolve while maintaining backward compatibility across supported SDKs and APIs.
  </Accordion>
</AccordionGroup>

<Tip>
  For a full business and technical evaluation, see the [Suki for Partners Executive Summary](/documentation/references/executive-summary).
</Tip>

## Platform architecture

Your app connects to Suki through client SDKs or backend REST APIs. Suki processes clinical audio with Ambient AI services, while your application integrates with FHIR / EHR systems downstream.

<img src="https://mintcdn.com/suki-1e08f176/EO5_76NNnXghZCao/documentation/assets/overview-architecture-light.svg?fit=max&auto=format&n=EO5_76NNnXghZCao&q=85&s=df07574ef61630f8125c7c77cae936cd" alt="Diagram: your application connects through SDKs and APIs to the Suki platform for Ambient AI services, and separately to your FHIR / EHR systems." className="block dark:hidden w-full max-w-5xl mx-auto rounded-xl border border-gray-200" width={960} height={420} loading="eager" decoding="async" data-path="documentation/assets/overview-architecture-light.svg" />

<img src="https://mintcdn.com/suki-1e08f176/EO5_76NNnXghZCao/documentation/assets/overview-architecture-dark.svg?fit=max&auto=format&n=EO5_76NNnXghZCao&q=85&s=f78d5ced6a1fdcbf789c3c1429abd70b" alt="Diagram: your application connects through SDKs and APIs to the Suki platform for Ambient AI services, and separately to your FHIR / EHR systems." className="hidden dark:block w-full max-w-5xl mx-auto rounded-xl border border-gray-700" width={960} height={420} loading="eager" decoding="async" data-path="documentation/assets/overview-architecture-dark.svg" />

### Typical developer workflow

Most Ambient, Form filling, and Dictation integrations follow the same session lifecycle:

<img src="https://mintcdn.com/suki-1e08f176/EO5_76NNnXghZCao/documentation/assets/overview-workflow-light.svg?fit=max&auto=format&n=EO5_76NNnXghZCao&q=85&s=b20c8141b9ed0da29b21e24c1e5e46c8" alt="Diagram: choose SDK or API, authenticate, start session, capture audio, AI processing on the Suki platform, then receive notes, forms, or transcripts." className="block dark:hidden w-full max-w-5xl mx-auto rounded-xl border border-gray-200" width={1080} height={168} loading="eager" decoding="async" data-path="documentation/assets/overview-workflow-light.svg" />

<img src="https://mintcdn.com/suki-1e08f176/EO5_76NNnXghZCao/documentation/assets/overview-workflow-dark.svg?fit=max&auto=format&n=EO5_76NNnXghZCao&q=85&s=c68da5559ed1c6d484eb5295001069ad" alt="Diagram: choose SDK or API, authenticate, start session, capture audio, AI processing on the Suki platform, then receive notes, forms, or transcripts." className="hidden dark:block w-full max-w-5xl mx-auto rounded-xl border border-gray-700" width={1080} height={168} loading="eager" decoding="async" data-path="documentation/assets/overview-workflow-dark.svg" />

## Recommended integrations

Choose the SDK or API from the available workflows that best fits your application and integration requirements.

| Requirement                                       | Recommended integration                                                 | UI                 | Availability |
| :------------------------------------------------ | :---------------------------------------------------------------------- | :----------------- | :----------- |
| Embed a pre-built Ambient UI in a web application | [Web SDK](/web-sdk/overview)                                            | Pre-built          | GA           |
| Build a custom React Ambient experience           | [Headless Web SDK](/headless-web-sdk/introduction)                      | Custom             | Beta         |
| Build a native iOS Ambient application            | [Mobile SDK](/mobile-sdk/overview)                                      | Custom             | GA           |
| Add speech-to-text to a web application           | [Dictation SDK](/dictation-sdk/introduction)                            | Pre-built          | Beta         |
| Capture structured medical forms by voice         | [Form filling SDK](/form-filling-sdk/introduction)                      | Pre-built          | Beta         |
| Build a server-side Ambient integration           | [Ambient REST APIs](/api-reference/overview)                            | Custom             | GA           |
| Generate patient summaries from FHIR data         | [Patient Summary API](/documentation/concepts/patient-summary/overview) | Custom             | Beta         |
| Build a custom Form filling experience            | [Form filling APIs](/form-filling-api-reference/overview)               | Custom             | GA           |
| Build an interoperable note workflow              | Web SDK, Mobile SDK, and Ambient REST APIs                              | Custom + Pre-built | GA           |

## What can you build

Build Ambient Clinical Intelligence workflows across Ambient documentation, structured forms, real-time dictation, clinical context, and more:

<div className="doc-partners-build-tiles">
  <Columns cols={3}>
    <Tile href="/documentation/concepts/ambient-clinical-notes/ambient-documentation" title="Ambient Documentation" description="Capture patient-provider conversations and generate structured clinical notes for clinician review before EHR handoff.">
      <Icon icon="waveform" size={48} />
    </Tile>

    <Tile href="/documentation/concepts/form-filling/form-filling" title="Form Filling" description="Convert visit conversation into structured medical form fields using Suki templates, then review and save those values.">
      <Icon icon="file-lines" size={48} />
    </Tile>

    <Tile href="/documentation/concepts/dictation/dictation" title="Dictation" description="Convert clinician speech into medical text in real time when your product needs transcription, not a full ambient note.">
      <Icon icon="microphone" size={48} />
    </Tile>

    <Tile href="/documentation/concepts/patient-summary/overview" title="Patient Summaries" description="Generate concise patient summaries from FHIR data, poll job status, and retrieve full or pre-visit encounter summaries.">
      <Icon icon="list-check" size={48} />
    </Tile>

    <Tile href="/documentation/concepts/ambient-clinical-notes/ambient-interoperability" title="Interoperable Note Workflow" description="Start an ambient encounter on mobile, continue on web, and retrieve one shared note. Pass `emr_encounter_id` across SDKs and APIs.">
      <Icon icon="arrows-rotate" size={48} />
    </Tile>

    <Tile href="/api-reference/info/diagnosis" title="Assisted Revenue Cycle" description="Retrieve ICD-10 and HCC diagnosis codes from ambient structured data for coding and risk-adjustment workflows.">
      <Icon icon="file-invoice-dollar" size={48} />
    </Tile>

    <Tile href="/api-reference/capabilities/problem-based-charting" title="Problem-Based Charting" description="Organize clinical notes by patient problems and active diagnoses instead of traditional SOAP sections.">
      <Icon icon="list" size={48} />
    </Tile>

    <Tile href="/api-reference/capabilities/multilingual" title="Multilingual Support" description="Support 80+ languages during capture while generating standardized English clinical notes automatically.">
      <Icon icon="language" size={48} />
    </Tile>

    <Tile href="/documentation/concepts/ambient-clinical-notes/note-sections" title="LOINC Note Sections" description="Configure custom clinical note sections and templates using standardized LOINC codes and specialty preferences.">
      <Icon icon="file-text" size={48} />
    </Tile>
  </Columns>
</div>

<Note>
  Subscribe to [Release notes](/updates/release-notes) for new APIs, SDKs, and platform capabilities.
</Note>

## Explore SDKs and APIs

Select a workflow to see the available SDKs and APIs for that workflow.

**Tabs (agents):** humans see one workflow tab. All four workflows have SDK/API cards:

* **Ambient Workflows:** Ambient REST APIs, Web SDK, Mobile SDK, Headless Web SDK (and related ambient paths on this tab).
* **Form filling Workflows:** Form filling APIs, Form filling SDK, and Web SDK Form filling.
* **Dictation Workflows:** Dictation APIs, Dictation SDK, and Web SDK Dictation.
* **Patient Summary Workflows:** Patient Summary APIs and Web SDK Patient Summary.

<Tabs>
  <Tab title="Ambient Workflows" id="ambient-workflows-path" icon="waveform">
    Choose the SDK or API that matches your UI strategy and technical approach:

    <div className="hp-io-method-grid">
      <div role="article" className="hp-io-method-card">
        <div className="hp-io-method-card-hero" aria-hidden="true">
          <svg className="hp-io-method-card-hero-icon" width="48" height="48" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="18" width="44" height="28" rx="4" stroke="currentColor" strokeWidth="1.25" />

            <path d="M16 32h6l5-10 6 20 5-10h10" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <div className="hp-io-method-card-body">
          <h3 className="hp-io-method-card-title">Ambient REST APIs</h3>

          <p className="hp-io-method-card-desc">
            Call Suki directly from your backend when you need a custom UI, selective feature wiring, or full control of the user experience.
          </p>

          <p className="hp-io-method-card-desc">
            Use REST for session management and content retrieval, the Partner WebSocket for audio streaming, and webhooks for asynchronous completion.
          </p>

          <div role="navigation" className="hp-io-method-link-stack" aria-label="REST API resources">
            <a href="/documentation/get-started/quick-start" className="hp-io-method-link hp-io-method-link--featured">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.5 8.25v7.5l5.25-3.75-5.25-3.75z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Quickstart</span>
            </a>

            <a href="/api-reference/overview" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 8.25l4.25 3.75L10 15.75" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">API Overview</span>
            </a>

            <a href="/documentation/how-to/partner-authentication" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="5.5" y="4.5" width="13" height="15" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.5" />

                  <path d="M8.5 9h7M8.5 12h5.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Partner Authentication</span>
            </a>
          </div>

          <div className="hp-io-method-card-aside">
            <p className="hp-io-method-card-aside-text">
              Feature availability depends on your partner configuration. To confirm access, contact our{' '}
              <a href="https://www.suki.ai/suki-partners/" className="suki-feature-cta">Partnership team</a>.
            </p>
          </div>
        </div>
      </div>

      <div role="article" className="hp-io-method-card">
        <div className="hp-io-method-card-hero" aria-hidden="true">
          <svg className="hp-io-method-card-hero-icon" width="48" height="48" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="14" width="44" height="36" rx="4" stroke="currentColor" strokeWidth="1.25" />

            <path d="M10 22h44" stroke="currentColor" strokeWidth="1.25" />

            <rect x="14" y="28" width="12" height="18" rx="2" stroke="currentColor" strokeWidth="3" />

            <rect x="30" y="28" width="20" height="8" rx="2" stroke="currentColor" strokeWidth="3" />

            <path d="M30 40h20" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />

            <path d="M30 46h14" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
          </svg>
        </div>

        <div className="hp-io-method-card-body">
          <h3 className="hp-io-method-card-title">Web SDK</h3>

          <p className="hp-io-method-card-desc">
            The Suki <strong>Web SDK</strong> ships <strong>hosted UI components</strong> for web healthcare apps. Add ambient note workflows without designing the full clinical UI yourself.
          </p>

          <div role="navigation" className="hp-io-method-link-stack" aria-label="Web SDK resources">
            <a href="/web-sdk/quickstart" className="hp-io-method-link hp-io-method-link--featured">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.5 8.25v7.5l5.25-3.75-5.25-3.75z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Quickstart</span>
            </a>

            <a href="/web-sdk/overview" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 8.25l4.25 3.75L10 15.75" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Web SDK Overview</span>
            </a>

            <a href="/web-sdk/guides/ambient-implementation" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="5.5" y="4.5" width="13" height="15" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.5" />

                  <path d="M8.5 9h7M8.5 12h5.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Implementation</span>
            </a>
          </div>
        </div>
      </div>

      <div role="article" className="hp-io-method-card">
        <div className="hp-io-method-card-hero" aria-hidden="true">
          <svg className="hp-io-method-card-hero-icon" width="48" height="48" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="12" y="14" width="40" height="36" rx="4" stroke="currentColor" strokeWidth="1.25" />

            <path d="M18 26l4 4-4 4" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />

            <path d="M28 30h14" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />

            <path d="M18 38h24" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />

            <path d="M18 44h18" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
          </svg>
        </div>

        <div className="hp-io-method-card-body">
          <div className="hp-io-method-card-title-row">
            <h3 className="hp-io-method-card-title">Headless Web SDK</h3>
            <Badge icon="sparkles" color="yellow" size="sm">Beta</Badge>
          </div>

          <p className="hp-io-method-card-desc">
            For <strong>React 18+</strong> apps that need full control over layout and branding. Use hooks and core APIs for authentication, ambient sessions, and streaming while you build every screen to match your design system.
          </p>

          <div role="navigation" className="hp-io-method-link-stack" aria-label="Headless Web SDK resources">
            <a href="/headless-web-sdk/quickstart" className="hp-io-method-link hp-io-method-link--featured">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.5 8.25v7.5l5.25-3.75-5.25-3.75z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Quickstart</span>
            </a>

            <a href="/headless-web-sdk/introduction" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 8.25l4.25 3.75L10 15.75" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Headless Web SDK Overview</span>
            </a>

            <a href="/documentation/get-started/integration-decision-guide" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="5.5" y="4.5" width="13" height="15" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.5" />

                  <path d="M8.5 9h7M8.5 12h5.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Compare Integration Options</span>
            </a>
          </div>

          <div className="hp-io-method-card-aside">
            <p className="hp-io-method-card-aside-text">
              The Headless Web SDK is currently in <strong>Beta</strong>.
            </p>
          </div>
        </div>
      </div>

      <div role="article" className="hp-io-method-card">
        <div className="hp-io-method-card-hero" aria-hidden="true">
          <svg className="hp-io-method-card-hero-icon" width="48" height="48" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="22" y="8" width="20" height="48" rx="5" stroke="currentColor" strokeWidth="1.25" />

            <rect x="26" y="14" width="12" height="34" rx="2" stroke="currentColor" strokeWidth="3" />

            <circle cx="32" cy="52" r="1.5" fill="currentColor" />
          </svg>
        </div>

        <div className="hp-io-method-card-body">
          <h3 className="hp-io-method-card-title">Mobile SDK</h3>

          <p className="hp-io-method-card-desc">
            The Suki <strong>Mobile SDK</strong> is a headless SDK for native mobile apps. Design your own UI while using SDK functions for note generation and session control.
          </p>

          <div role="navigation" className="hp-io-method-link-stack" aria-label="Mobile SDK resources">
            <a href="/mobile-sdk/installation" className="hp-io-method-link hp-io-method-link--featured">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.5 8.25v7.5l5.25-3.75-5.25-3.75z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Quickstart</span>
            </a>

            <a href="/mobile-sdk/overview" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 8.25l4.25 3.75L10 15.75" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Mobile SDK Overview</span>
            </a>

            <a href="/mobile-sdk/ambient-guides/create-session" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="5.5" y="4.5" width="13" height="15" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.5" />

                  <path d="M8.5 9h7M8.5 12h5.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Create Session</span>
            </a>
          </div>

          <div className="hp-io-method-card-aside">
            <p className="hp-io-method-card-aside-text">
              The Mobile SDK currently supports <strong>iOS</strong>.
            </p>
          </div>
        </div>
      </div>
    </div>
  </Tab>

  <Tab title="Form Filling Workflows" id="form-filling-workflows-path" icon="file-lines">
    Choose the integration method that fits your UI strategy and technical approach:

    <div className="hp-io-method-grid">
      <div role="article" className="hp-io-method-card">
        <div className="hp-io-method-card-hero" aria-hidden="true">
          <svg className="hp-io-method-card-hero-icon" width="48" height="48" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="12" y="14" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="3" />

            <rect x="36" y="14" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="1.25" />

            <rect x="12" y="34" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="1.25" />

            <rect x="36" y="34" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="3" />
          </svg>
        </div>

        <div className="hp-io-method-card-body">
          <h3 className="hp-io-method-card-title">Form Filling REST APIs</h3>

          <p className="hp-io-method-card-desc">
            Use Form filling APIs when you need a custom UI, existing-system integration, or full control over capture, session lifecycle, and how structured output is saved.
          </p>

          <p className="hp-io-method-card-desc">
            Create sessions, seed context, stream audio over the shared Partner ambient <strong>WebSocket</strong>, retrieve <strong>structured form data</strong>, and submit feedback using REST endpoints.
          </p>

          <div role="navigation" className="hp-io-method-link-stack" aria-label="Form filling API resources">
            <a href="/form-filling-api-reference/quickstart" className="hp-io-method-link hp-io-method-link--featured">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.5 8.25v7.5l5.25-3.75-5.25-3.75z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Quickstart</span>
            </a>

            <a href="/form-filling-api-reference/overview" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 8.25l4.25 3.75L10 15.75" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">API Overview</span>
            </a>

            <a href="/form-filling-api-reference/authentication" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="5.5" y="4.5" width="13" height="15" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.5" />

                  <path d="M8.5 9h7M8.5 12h5.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Authentication</span>
            </a>
          </div>

          <div className="hp-io-method-card-aside">
            <p className="hp-io-method-card-aside-text">
              For streaming audio and shared WebSocket behavior, see{' '}
              <a href="/documentation/how-to/audio-streaming/audio-stream" className="suki-feature-cta">Audio streaming</a>.
            </p>
          </div>
        </div>
      </div>

      <div role="article" className="hp-io-method-card">
        <div className="hp-io-method-card-hero" aria-hidden="true">
          <svg className="hp-io-method-card-hero-icon" width="48" height="48" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="12" y="14" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="3" />

            <rect x="36" y="14" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="1.25" />

            <rect x="12" y="34" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="1.25" />

            <rect x="36" y="34" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="3" />
          </svg>
        </div>

        <div className="hp-io-method-card-body">
          <div className="hp-io-method-card-title-row">
            <h3 className="hp-io-method-card-title">Form Filling SDK</h3>
            <Badge icon="sparkles" color="yellow" size="sm">Beta</Badge>
          </div>

          <p className="hp-io-method-card-desc">
            Embed <strong>Form filling</strong> in web applications with a <strong>hosted iframe</strong> or <strong>React components</strong> when you want voice-driven medical forms without building the full Form filling API workflow yourself.
          </p>

          <p className="hp-io-method-card-desc">
            Sign in with partner credentials, call <strong>start()</strong> with your <strong>form template IDs</strong>, and receive <strong>structured JSON</strong> through SDK callbacks and your <strong>partner webhook</strong>.
          </p>

          <div role="navigation" className="hp-io-method-link-stack" aria-label="Form filling SDK resources">
            <a href="/form-filling-sdk/quickstart" className="hp-io-method-link hp-io-method-link--featured">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.5 8.25v7.5l5.25-3.75-5.25-3.75z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Quickstart</span>
            </a>

            <a href="/form-filling-sdk/introduction" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 8.25l4.25 3.75L10 15.75" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Form Filling SDK Overview</span>
            </a>

            <a href="/form-filling-sdk/javaScript-integration/javaScript" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="5.5" y="4.5" width="13" height="15" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.5" />

                  <path d="M8.5 9h7M8.5 12h5.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">JavaScript Integration</span>
            </a>
          </div>

          <div className="hp-io-method-card-aside">
            <p className="hp-io-method-card-aside-text">
              The Form filling SDK is currently in <strong>Beta</strong>.
            </p>
          </div>
        </div>
      </div>

      <div role="article" className="hp-io-method-card">
        <div className="hp-io-method-card-hero" aria-hidden="true">
          <svg className="hp-io-method-card-hero-icon" width="48" height="48" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="14" width="44" height="36" rx="4" stroke="currentColor" strokeWidth="1.25" />

            <path d="M10 22h44" stroke="currentColor" strokeWidth="1.25" />

            <rect x="14" y="28" width="12" height="18" rx="2" stroke="currentColor" strokeWidth="3" />

            <rect x="30" y="28" width="20" height="8" rx="2" stroke="currentColor" strokeWidth="3" />

            <path d="M30 40h20" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />

            <path d="M30 46h14" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
          </svg>
        </div>

        <div className="hp-io-method-card-body">
          <h3 className="hp-io-method-card-title">Web SDK</h3>

          <p className="hp-io-method-card-desc">
            Use <strong>Web SDK Form filling</strong> when you already use <strong>@suki-sdk/js</strong> or <strong>@suki-sdk/react</strong> at <strong>v3.2.0</strong> or later. Import Form filling from the Web SDK package. You do not need a standalone Form filling SDK install.
          </p>

          <p className="hp-io-method-card-desc">
            Start Form filling with your <strong>form template IDs</strong> and receive <strong>structured JSON</strong> through callbacks and your <strong>partner webhook</strong>.
          </p>

          <div role="navigation" className="hp-io-method-link-stack" aria-label="Web SDK Form filling resources">
            <a href="/web-sdk/form-filling-overview" className="hp-io-method-link hp-io-method-link--featured">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.5 8.25v7.5l5.25-3.75-5.25-3.75z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Overview</span>
            </a>

            <a href="/web-sdk/guides/form-filling-javascript" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 8.25l4.25 3.75L10 15.75" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">JavaScript Integration</span>
            </a>

            <a href="/web-sdk/guides/form-filling-react" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="5.5" y="4.5" width="13" height="15" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.5" />

                  <path d="M8.5 9h7M8.5 12h5.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">React Integration</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </Tab>

  <Tab title="Dictation Workflows" id="dictation-workflows-path" icon="microphone">
    Choose the integration method that fits your UI strategy and technical approach:

    <div className="hp-io-method-grid">
      <div role="article" className="hp-io-method-card">
        <div className="hp-io-method-card-hero" aria-hidden="true">
          <svg className="hp-io-method-card-hero-icon" width="48" height="48" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="26" y="12" width="12" height="20" rx="6" stroke="currentColor" strokeWidth="3" />

            <path d="M20 26a12 12 0 0 0 24 0" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />

            <path d="M32 38v8" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />

            <path d="M24 46h16" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
          </svg>
        </div>

        <div className="hp-io-method-card-body">
          <h3 className="hp-io-method-card-title">Dictation REST APIs</h3>

          <p className="hp-io-method-card-desc">
            Use Dictation APIs when you need a custom UI, existing-system integration, or full control over capture, session lifecycle, and how transcript text is returned.
          </p>

          <p className="hp-io-method-card-desc">
            Create transcription sessions, stream audio over a <strong>WebSocket</strong>, receive <strong>live transcripts</strong>, and end sessions when capture is finished.
          </p>

          <div role="navigation" className="hp-io-method-link-stack" aria-label="Dictation API resources">
            <a href="/documentation/how-to/dictation/dictation-basic-usage" className="hp-io-method-link hp-io-method-link--featured">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.5 8.25v7.5l5.25-3.75-5.25-3.75z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Quickstart</span>
            </a>

            <a href="/api-reference/ambient-dictation" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 8.25l4.25 3.75L10 15.75" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">API Overview</span>
            </a>

            <a href="/documentation/how-to/partner-authentication" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="5.5" y="4.5" width="13" height="15" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.5" />

                  <path d="M8.5 9h7M8.5 12h5.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Partner Authentication</span>
            </a>
          </div>

          <div className="hp-io-method-card-aside">
            <p className="hp-io-method-card-aside-text">
              For streaming audio and WebSocket behavior, see{' '}
              <a href="/documentation/how-to/audio-streaming/dictation-streaming" className="suki-feature-cta">Dictation streaming</a>.
            </p>
          </div>
        </div>
      </div>

      <div role="article" className="hp-io-method-card">
        <div className="hp-io-method-card-hero" aria-hidden="true">
          <svg className="hp-io-method-card-hero-icon" width="48" height="48" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="26" y="12" width="12" height="20" rx="6" stroke="currentColor" strokeWidth="3" />

            <path d="M20 26a12 12 0 0 0 24 0" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />

            <path d="M32 38v8" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />

            <path d="M24 46h16" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
          </svg>
        </div>

        <div className="hp-io-method-card-body">
          <div className="hp-io-method-card-title-row">
            <h3 className="hp-io-method-card-title">Dictation SDK</h3>
            <Badge icon="sparkles" color="yellow" size="sm">Beta</Badge>
          </div>

          <p className="hp-io-method-card-desc">
            Embed <strong>clinical Dictation</strong> in web applications with a <strong>hosted iframe</strong>. Use <strong>in-field</strong> mode on a specific text control or <strong>scratchpad</strong> mode for a floating Dictation UI. Integrate with <strong>JavaScript</strong> or <strong>React</strong>; you design entry points and receive transcript text through callbacks.
          </p>

          <div role="navigation" className="hp-io-method-link-stack" aria-label="Dictation SDK resources">
            <a href="/dictation-sdk/quickstart" className="hp-io-method-link hp-io-method-link--featured">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.5 8.25v7.5l5.25-3.75-5.25-3.75z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Quickstart</span>
            </a>

            <a href="/dictation-sdk/introduction" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 8.25l4.25 3.75L10 15.75" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Dictation SDK Overview</span>
            </a>

            <a href="/dictation-sdk/javaScript-integration/javaScript" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="5.5" y="4.5" width="13" height="15" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.5" />

                  <path d="M8.5 9h7M8.5 12h5.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">JavaScript Integration</span>
            </a>
          </div>

          <div className="hp-io-method-card-aside">
            <p className="hp-io-method-card-aside-text">
              The Dictation SDK is currently in <strong>Beta</strong>.
            </p>
          </div>
        </div>
      </div>

      <div role="article" className="hp-io-method-card">
        <div className="hp-io-method-card-hero" aria-hidden="true">
          <svg className="hp-io-method-card-hero-icon" width="48" height="48" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="14" width="44" height="36" rx="4" stroke="currentColor" strokeWidth="1.25" />

            <path d="M10 22h44" stroke="currentColor" strokeWidth="1.25" />

            <rect x="14" y="28" width="12" height="18" rx="2" stroke="currentColor" strokeWidth="3" />

            <rect x="30" y="28" width="20" height="8" rx="2" stroke="currentColor" strokeWidth="3" />

            <path d="M30 40h20" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />

            <path d="M30 46h14" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
          </svg>
        </div>

        <div className="hp-io-method-card-body">
          <h3 className="hp-io-method-card-title">Web SDK</h3>

          <p className="hp-io-method-card-desc">
            Use <strong>Web SDK Dictation</strong> when you already use <strong>@suki-sdk/js</strong> or <strong>@suki-sdk/react</strong>. Import Dictation from the Web SDK package. You do not need a standalone Dictation SDK install.
          </p>

          <p className="hp-io-method-card-desc">
            Use <strong>in-field</strong> mode on a specific text control or <strong>scratchpad</strong> mode for a floating Dictation UI. You design entry points and receive transcript text through callbacks.
          </p>

          <div role="navigation" className="hp-io-method-link-stack" aria-label="Web SDK Dictation resources">
            <a href="/web-sdk/dictation-overview" className="hp-io-method-link hp-io-method-link--featured">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.5 8.25v7.5l5.25-3.75-5.25-3.75z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Overview</span>
            </a>

            <a href="/web-sdk/guides/dictation-javascript" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 8.25l4.25 3.75L10 15.75" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">JavaScript Integration</span>
            </a>

            <a href="/web-sdk/guides/dictation-react" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="5.5" y="4.5" width="13" height="15" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.5" />

                  <path d="M8.5 9h7M8.5 12h5.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">React Integration</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </Tab>

  <Tab title="Patient Summary Workflows" id="patient-summary-workflows-path" icon="list-check">
    Choose the integration method that fits your UI strategy and technical approach:

    <div className="hp-io-method-grid">
      <div role="article" className="hp-io-method-card">
        <div className="hp-io-method-card-hero" aria-hidden="true">
          <svg className="hp-io-method-card-hero-icon" width="48" height="48" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="8" y="12" width="48" height="40" rx="4" stroke="currentColor" strokeWidth="1.25" />

            <path d="M16 22h32" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />

            <path d="M16 30h32" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />

            <path d="M16 38h20" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <div className="hp-io-method-card-body">
          <div className="hp-io-method-card-title-row">
            <h3 className="hp-io-method-card-title">Patient Summary REST APIs</h3>
            <Badge icon="sparkles" color="yellow" size="sm">Beta</Badge>
          </div>

          <p className="hp-io-method-card-desc">
            Use Patient Summary APIs when you need a custom UI or full control over FHIR ingestion, summary generation, and how summaries are displayed.
          </p>

          <p className="hp-io-method-card-desc">
            Upload FHIR bundles to the <strong>Clinical Knowledge Graph (CKG)</strong>, trigger asynchronous summary generation, poll <strong>job status</strong>, and retrieve full or <strong>pre-visit summaries</strong> using REST endpoints.
          </p>

          <div role="navigation" className="hp-io-method-link-stack" aria-label="Patient Summary API resources">
            <a href="/patient-summary-api-reference/quickstart" className="hp-io-method-link hp-io-method-link--featured">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.5 8.25v7.5l5.25-3.75-5.25-3.75z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Quickstart</span>
            </a>

            <a href="/patient-summary-api-reference/overview" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 8.25l4.25 3.75L10 15.75" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">API Overview</span>
            </a>

            <a href="/patient-summary-api-reference/authentication" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="5.5" y="4.5" width="13" height="15" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.5" />

                  <path d="M8.5 9h7M8.5 12h5.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Authentication</span>
            </a>
          </div>

          <div className="hp-io-method-card-aside">
            <p className="hp-io-method-card-aside-text">
              For CKG Data Ingestion and summary retrieval details, see{' '}
              <a href="/patient-summary-api-reference/ckg-data-ingestion" className="suki-feature-cta">CKG Data Ingestion</a>.
            </p>
          </div>
        </div>
      </div>

      <div role="article" className="hp-io-method-card">
        <div className="hp-io-method-card-hero" aria-hidden="true">
          <svg className="hp-io-method-card-hero-icon" width="48" height="48" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="14" width="44" height="36" rx="4" stroke="currentColor" strokeWidth="1.25" />

            <path d="M10 22h44" stroke="currentColor" strokeWidth="1.25" />

            <rect x="14" y="28" width="12" height="18" rx="2" stroke="currentColor" strokeWidth="3" />

            <rect x="30" y="28" width="20" height="8" rx="2" stroke="currentColor" strokeWidth="3" />

            <path d="M30 40h20" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />

            <path d="M30 46h14" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
          </svg>
        </div>

        <div className="hp-io-method-card-body">
          <h3 className="hp-io-method-card-title">Web SDK</h3>

          <p className="hp-io-method-card-desc">
            Show <strong>Patient Summary</strong> on the headed Web SDK patient profile from <strong>v3.3.0</strong>. Ingest FHIR into CKG, enable Patient Summary for your organization, and pass matching <strong>encounter.identifier</strong> and <strong>encounter.practitionerFhirId</strong> when you initialize and when you mount.
          </p>

          <p className="hp-io-method-card-desc">
            The Web SDK owns the Patient Summary UI. You do not call generate, status, or retrieve APIs for this headed workflow.
          </p>

          <div role="navigation" className="hp-io-method-link-stack" aria-label="Web SDK Patient Summary resources">
            <a href="/web-sdk/guides/patient-summary" className="hp-io-method-link hp-io-method-link--featured">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.5 8.25v7.5l5.25-3.75-5.25-3.75z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Patient Summary</span>
            </a>

            <a href="/web-sdk/overview" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 8.25l4.25 3.75L10 15.75" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Web SDK Overview</span>
            </a>

            <a href="/web-sdk/api-reference/types/encounter" className="hp-io-method-link">
              <span className="hp-io-method-link-icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="5.5" y="4.5" width="13" height="15" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.5" />

                  <path d="M8.5 9h7M8.5 12h5.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
                </svg>
              </span>

              <span className="hp-io-method-link-text">Encounter</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </Tab>
</Tabs>
