> ## 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.
* **Cross-device interoperability:** Share session state across mobile and web using a shared encounter identifier.
* **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

Suki for Partners offers the following core workflows:

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

    <div style={{marginTop: '1rem'}}>
      <a href="/documentation/concepts/ambient-clinical-notes/ambient-documentation" className="learning-path-button">Learn More</a>
    </div>
  </Card>

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

    <div style={{marginTop: '1rem'}}>
      <a href="/documentation/concepts/form-filling/form-filling-overview" className="learning-path-button">Learn More</a>
    </div>
  </Card>

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

    <div style={{marginTop: '1rem'}}>
      <a href="/documentation/concepts/dictation/dictation-overview" className="learning-path-button">Learn More</a>
    </div>
  </Card>

  <Card title="Patient Summaries" icon="list-check">
    Generate concise pre-visit summaries from FHIR data bundles.

    <div style={{marginTop: '1rem'}}>
      <a href="/documentation/concepts/patient-summary/overview" className="learning-path-button">Learn More</a>
    </div>
  </Card>
</CardGroup>

## Get started

Follow these steps to integrate Suki into your application:

<Accordion title="Start Your Integration" defaultOpen="true">
  <Steps>
    <Step title="Choose a Workflow" icon="waveform">
      Select the SDK or API from the available workflows that best fits your application and integration requirements.

      <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 Your First Integration" icon="code">
      Follow a Quickstart to install the SDK, initialize the client, and start your first session.

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

## Why choose Suki for Partners

Suki for Partners provides the healthcare-specific AI, infrastructure, and APIs needed to add Ambient Clinical Intelligence to your application. Instead of building speech recognition, clinical language understanding, note generation, and supporting infrastructure yourself, you integrate Suki's production-ready platform.

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're building **EHRs**, **Telehealth platforms**, **Care management systems**, **Hardware solutions**, or **Revenue cycle applications**, Suki helps you add Ambient Clinical Intelligence with less development effort.

Most developers choose Suki for Partners because of the following 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>

## 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 and Form filling SDK.
* **Dictation Workflows:** Dictation APIs and Dictation SDK (plus Web SDK Dictation where linked).
* **Patient Summary Workflows:** Patient Summary APIs.

<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>
  </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>
  </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>
  </Tab>
</Tabs>
