> ## Documentation Index
> Fetch the complete documentation index at: https://developer.suki.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Suki SDKs & APIs Technical Execution

> Technical execution: how integration works, what partners need, critical technical requirements for Web SDK, Mobile SDK, Headless Web SDK, Dictation SDK, Form filling SDK, Suki REST APIs, and Form filling APIs, integration timeline, and expanded phases.

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

<div className="hp-wrap api-overview-wrap web-sdk-exec-page web-sdk-exec-page--redesign">
  <div className="web-sdk-exec-content-zone">
    <div className="web-sdk-exec-section web-sdk-exec-section--exec-lead" id="technical-execution-overview" aria-labelledby="wse-technical-exec-title">
      <h2 id="wse-technical-exec-title" className="sdk-overview-main-title api-overview-hero-page-title">Technical Execution</h2>

      <div className="wse-exec-summary-prose wse-exec-summary-prose--full">
        <p className="wse-prose">
          Learn how to integrate Suki SDKs and APIs into your product. This guide covers how integration works, what partners need, a typical timeline, and critical technical requirements by surface.
        </p>

        <p className="wse-prose">
          For business context, use cases, and partnership outcomes, start with the{' '}

          <a className="wse-exec-text-link" href="/documentation/references/executive-summary">
            <strong>Executive Summary</strong>
          </a>

          {' '}

          for product and engineering leaders.
        </p>
      </div>
    </div>

    <div className="wse-tech-how-section wse-benefits-section" id="how-integration-works">
      <div className="wse-benefits-layout">
        <div className="wse-benefits-aside">
          <h2 className="wse-benefits-aside__title">
            <span className="sdk-overview-main-title api-overview-hero-page-title">How Integration </span>
            <span className="wse-benefits-aside__title-line">Works</span>?
          </h2>

          <p className="wse-benefits-aside__lede">
            All Suki integrations follow the same <strong>four</strong> implementation phases, regardless of the SDK or API you choose. The exact implementation details vary by integration option. Use the expanded sections below for product-specific guidance and implementation checklists.
          </p>
        </div>

        <div className="wse-benefits-vrule" aria-hidden="true">
          <span className="wse-benefits-vrule__thick" />

          <span className="wse-benefits-vrule__thin" />
        </div>

        <div className="wse-benefits-col">
          <div role="article" className="wse-benefit-step">
            <div className="wse-benefit-step__icon" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />

                <path d="M3.27 6.96 12 12.01l8.73-5.05" />
              </svg>
            </div>

            <h3 className="wse-benefit-step__title">Setup and Configuration</h3>
            <p className="wse-benefit-step__text">Partner ID, security (JWKS), and environment setup. Install the Web or Headless package, embed the Mobile SDK, or configure REST API clients.</p>
          </div>

          <div role="article" className="wse-benefit-step">
            <div className="wse-benefit-step__icon" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />

                <path d="m9 12 2 2 4-4" />
              </svg>
            </div>

            <h3 className="wse-benefit-step__title">Authentication</h3>
            <p className="wse-benefit-step__text">Connect your IdP, issue partner tokens, and validate access for embedded SDKs or server-side REST API calls.</p>
          </div>
        </div>

        <div className="wse-benefits-vrule" aria-hidden="true">
          <span className="wse-benefits-vrule__thick" />

          <span className="wse-benefits-vrule__thin" />
        </div>

        <div className="wse-benefits-col">
          <div role="article" className="wse-benefit-step">
            <div className="wse-benefit-step__icon" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                <path d="M4 10v4" />

                <path d="M8 7v10" />

                <path d="M12 4v16" />

                <path d="M16 7v10" />

                <path d="M20 10v4" />
              </svg>
            </div>

            <h3 className="wse-benefit-step__title">Ambient Session and AI</h3>
            <p className="wse-benefit-step__text">Run sessions with Web or Headless UI, native mobile capture, or API-driven flows. Stream audio, receive transcript and structured clinical note.</p>
          </div>

          <div role="article" className="wse-benefit-step">
            <div className="wse-benefit-step__icon" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />

                <polyline points="14 2 14 8 20 8" />

                <path d="M10 13h4" />

                <path d="M10 17h4" />

                <path d="M8 9h1" />
              </svg>
            </div>

            <h3 className="wse-benefit-step__title">Note Delivery</h3>
            <p className="wse-benefit-step__text">Receive structured payloads (JSON), map to your formats, and route to chart, record, or downstream systems.</p>
          </div>
        </div>
      </div>
    </div>

    <div className="wse-tech-needs-section" id="what-partners-need">
      <h2 className="web-sdk-exec-card__title">What partners need</h2>

      <svg className="web-sdk-exec-rule-stack" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 5" preserveAspectRatio="none" aria-hidden="true" focusable="false">
        <rect className="web-sdk-exec-rule-stack__thin" x="0" y="0" width="960" height="1" />

        <rect className="web-sdk-exec-rule-stack__thick" x="0" y="1" width="48" height="4" />
      </svg>

      <p className="wse-prose wse-prose--tight wse-tech-needs-section__intro">To use our developer tools, you need to have the following:</p>

      <div className="wse-partners-get-grid">
        <div role="article" className="wse-partners-get-card wse-partners-get-card--white">
          <div className="wse-partners-get-card__content">
            <span className="wse-partners-get-card__icon" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />

                <circle cx="12" cy="12" r="3" />
              </svg>
            </span>

            <h3 className="wse-partners-get-card__title">Identity and Security</h3>
            <p className="wse-partners-get-card__text">Use your existing identity and access management system, such as OAuth 2.0. Suki integrates with the authentication framework you already use.</p>
          </div>
        </div>

        <div role="article" className="wse-partners-get-card wse-partners-get-card--black">
          <div className="wse-partners-get-card__content">
            <span className="wse-partners-get-card__icon" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />

                <circle cx="12" cy="12" r="3" />
              </svg>
            </span>

            <h3 className="wse-partners-get-card__title">Development Environment</h3>
            <p className="wse-partners-get-card__text">Support for a modern web or mobile application. Suki integrates with standard development frameworks and deployment models.</p>
          </div>
        </div>

        <div role="article" className="wse-partners-get-card wse-partners-get-card--white">
          <div className="wse-partners-get-card__content">
            <span className="wse-partners-get-card__icon" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />

                <circle cx="12" cy="12" r="3" />
              </svg>
            </span>

            <h3 className="wse-partners-get-card__title">Clinical Configuration</h3>
            <p className="wse-partners-get-card__text">Configure Suki to match your clinical specialties, documentation workflows, and organizational requirements for high quality outputs.</p>
          </div>
        </div>

        <div role="article" className="wse-partners-get-card wse-partners-get-card--black">
          <div className="wse-partners-get-card__content">
            <span className="wse-partners-get-card__icon" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />

                <circle cx="12" cy="12" r="3" />
              </svg>
            </span>

            <h3 className="wse-partners-get-card__title">Structured Data Integration</h3>
            <p className="wse-partners-get-card__text">Receive structured clinical data and connect it to your EHR, care management, billing, or other downstream systems.</p>
          </div>
        </div>

        <div role="article" className="wse-partners-get-card wse-partners-get-card--white">
          <div className="wse-partners-get-card__content">
            <span className="wse-partners-get-card__icon" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />

                <circle cx="12" cy="12" r="3" />
              </svg>
            </span>

            <h3 className="wse-partners-get-card__title">Audio Capabilities</h3>
            <p className="wse-partners-get-card__text">Support secure audio capture through standard browser or mobile microphone access over HTTPS.</p>
          </div>
        </div>

        <div role="article" className="wse-partners-get-card wse-partners-get-card--black">
          <div className="wse-partners-get-card__content">
            <span className="wse-partners-get-card__icon" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />

                <circle cx="12" cy="12" r="3" />
              </svg>
            </span>

            <h3 className="wse-partners-get-card__title">User and Organization Context</h3>
            <p className="wse-partners-get-card__text">Provide user and organization identifiers so Suki can securely associate sessions with the correct clinician, role, and tenant.</p>
          </div>
        </div>
      </div>
    </div>

    <div className="wse-tech-section-divider" aria-hidden="true" />

    <div className="wse-tech-timeline-section" id="integration-timeline">
      <div className="wse-intl-timeline">
        <div className="wse-intl-timeline__grid">
          <div role="article" className="wse-intl-timeline__col wse-intl-timeline__col--yellow">
            <div className="wse-intl-timeline__icon-wrap" aria-hidden="true">
              <img src="https://mintcdn.com/suki-1e08f176/HLkoX7rrX4o_l5h7/documentation/assets/tech-timeline/rocket.svg?fit=max&auto=format&n=HLkoX7rrX4o_l5h7&q=85&s=0b32bd8e26e71be1733fa343413cb0e2" alt="" width={24} height={24} loading="lazy" decoding="async" noZoom data-path="documentation/assets/tech-timeline/rocket.svg" />
            </div>

            <h3 className="wse-intl-timeline__heading"><span className="wse-intl-timeline__num">01</span> Kickoff</h3>
            <p className="wse-intl-timeline__desc">Partner onboarding and environment setup.</p>

            <div className="wse-intl-timeline__bar" aria-hidden="true">
              <span className="wse-intl-timeline__node" />
            </div>

            <p className="wse-intl-timeline__week">Week 1</p>
          </div>

          <div role="article" className="wse-intl-timeline__col wse-intl-timeline__col--blue">
            <div className="wse-intl-timeline__icon-wrap" aria-hidden="true">
              <img src="https://mintcdn.com/suki-1e08f176/HLkoX7rrX4o_l5h7/documentation/assets/tech-timeline/code-xml.svg?fit=max&auto=format&n=HLkoX7rrX4o_l5h7&q=85&s=a44a76ecdeeb19d88f591e7a0d472107" alt="" width={24} height={24} loading="lazy" decoding="async" noZoom data-path="documentation/assets/tech-timeline/code-xml.svg" />
            </div>

            <h3 className="wse-intl-timeline__heading"><span className="wse-intl-timeline__num">02</span> Build & customize</h3>
            <p className="wse-intl-timeline__desc">SDK integration and UI customization so the experience matches your product.</p>

            <div className="wse-intl-timeline__bar" aria-hidden="true">
              <span className="wse-intl-timeline__node" />
            </div>

            <p className="wse-intl-timeline__week">Week 2–3</p>
          </div>

          <div role="article" className="wse-intl-timeline__col wse-intl-timeline__col--mint">
            <div className="wse-intl-timeline__icon-wrap" aria-hidden="true">
              <img src="https://mintcdn.com/suki-1e08f176/HLkoX7rrX4o_l5h7/documentation/assets/tech-timeline/shield-check.svg?fit=max&auto=format&n=HLkoX7rrX4o_l5h7&q=85&s=9200a157fc2b5a50b7184da783342a80" alt="" width={24} height={24} loading="lazy" decoding="async" noZoom data-path="documentation/assets/tech-timeline/shield-check.svg" />
            </div>

            <h3 className="wse-intl-timeline__heading"><span className="wse-intl-timeline__num">03</span> Validate & ship</h3>
            <p className="wse-intl-timeline__desc">Testing, QA, and production deployment with confidence.</p>

            <div className="wse-intl-timeline__bar" aria-hidden="true">
              <span className="wse-intl-timeline__node" />
            </div>

            <p className="wse-intl-timeline__week">Week 4</p>
          </div>

          <div role="article" className="wse-intl-timeline__col wse-intl-timeline__col--cream wse-intl-timeline__col--last">
            <div className="wse-intl-timeline__icon-wrap" aria-hidden="true">
              <img src="https://mintcdn.com/suki-1e08f176/zo-CLI6y7TO8L9Sf/documentation/assets/tech-timeline/trending-up.svg?fit=max&auto=format&n=zo-CLI6y7TO8L9Sf&q=85&s=4abe2722cbd9eb52e5679f4cd0457d54" alt="" width={24} height={24} loading="lazy" decoding="async" noZoom data-path="documentation/assets/tech-timeline/trending-up.svg" />
            </div>

            <h3 className="wse-intl-timeline__heading"><span className="wse-intl-timeline__num">04</span> Go-live</h3>
            <p className="wse-intl-timeline__desc">Go live with a controlled rollout, monitor usage and quality, and iterate.</p>

            <div className="wse-intl-timeline__bar wse-intl-timeline__bar--arrow" aria-hidden="true">
              <span className="wse-intl-timeline__node" />
            </div>

            <p className="wse-intl-timeline__week">Go-live</p>
          </div>
        </div>

        <div className="wse-intl-timeline__goals">
          <div className="wse-intl-timeline__goals-grid">
            <div className="wse-intl-timeline__goal wse-intl-timeline__goal--yellow">
              <img className="wse-intl-timeline__goal-icon" src="https://mintcdn.com/suki-1e08f176/HLkoX7rrX4o_l5h7/documentation/assets/tech-timeline/target.svg?fit=max&auto=format&n=HLkoX7rrX4o_l5h7&q=85&s=47c17516ad9eeebb3c97e1c9034fd5e7" alt="" width={20} height={20} loading="lazy" decoding="async" noZoom data-path="documentation/assets/tech-timeline/target.svg" />

              <p className="wse-intl-timeline__goal-text"><strong>Goal</strong> Aligned plan, scope, and success criteria.</p>
            </div>

            <div className="wse-intl-timeline__goal wse-intl-timeline__goal--blue">
              <img className="wse-intl-timeline__goal-icon" src="https://mintcdn.com/suki-1e08f176/HLkoX7rrX4o_l5h7/documentation/assets/tech-timeline/puzzle.svg?fit=max&auto=format&n=HLkoX7rrX4o_l5h7&q=85&s=dad27fb260b132f1b13f08a5ea59aaa5" alt="" width={20} height={20} loading="lazy" decoding="async" noZoom data-path="documentation/assets/tech-timeline/puzzle.svg" />

              <p className="wse-intl-timeline__goal-text"><strong>Goal</strong> Integrated solution in your environment.</p>
            </div>

            <div className="wse-intl-timeline__goal wse-intl-timeline__goal--mint">
              <img className="wse-intl-timeline__goal-icon" src="https://mintcdn.com/suki-1e08f176/HLkoX7rrX4o_l5h7/documentation/assets/tech-timeline/shield-check.svg?fit=max&auto=format&n=HLkoX7rrX4o_l5h7&q=85&s=9200a157fc2b5a50b7184da783342a80" alt="" width={20} height={20} loading="lazy" decoding="async" noZoom data-path="documentation/assets/tech-timeline/shield-check.svg" />

              <p className="wse-intl-timeline__goal-text"><strong>Goal</strong> Validated solution that meets quality and security standards.</p>
            </div>

            <div className="wse-intl-timeline__goal wse-intl-timeline__goal--cream">
              <img className="wse-intl-timeline__goal-icon" src="https://mintcdn.com/suki-1e08f176/zo-CLI6y7TO8L9Sf/documentation/assets/tech-timeline/users.svg?fit=max&auto=format&n=zo-CLI6y7TO8L9Sf&q=85&s=151c7d4d98ff1836811dac8a8e629227" alt="" width={20} height={20} loading="lazy" decoding="async" noZoom data-path="documentation/assets/tech-timeline/users.svg" />

              <p className="wse-intl-timeline__goal-text"><strong>Goal</strong> Successful launch and continuous improvement.</p>
            </div>
          </div>
        </div>

        <div className="wse-intl-timeline__summary">
          <div className="wse-intl-timeline__summary-icon" aria-hidden="true">
            <img src="https://mintcdn.com/suki-1e08f176/HLkoX7rrX4o_l5h7/documentation/assets/tech-timeline/refresh-cw.svg?fit=max&auto=format&n=HLkoX7rrX4o_l5h7&q=85&s=c9c47adbaf9ac4362e387eb11632a6f7" alt="" width={20} height={20} loading="lazy" decoding="async" noZoom data-path="documentation/assets/tech-timeline/refresh-cw.svg" />
          </div>

          <p className="wse-intl-timeline__summary-text">
            <strong>Total time to value: 2-4 weeks</strong>
            <span className="wse-intl-timeline__summary-sep" aria-hidden="true">|</span>
            From start to production launch. Compare that to 6-12 months building ambient AI from scratch.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div className="wse-tech-expanded-section" id="expanded-reference" aria-labelledby="wse-expanded-ref-title">
    <h2 id="wse-expanded-ref-title" className="web-sdk-exec-card__title">Integration Checklists</h2>

    <svg className="web-sdk-exec-rule-stack" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 5" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <rect className="web-sdk-exec-rule-stack__thin" x="0" y="0" width="960" height="1" />

      <rect className="web-sdk-exec-rule-stack__thick" x="0" y="1" width="48" height="4" />
    </svg>

    <div className="wse-expanded-ref-tabs">
      <Tabs>
        <Tab title="Web SDK" icon="cube">
          <span id="web-sdk-critical-requirements" />

          <div className="wse-tech-tab-panel">
            <p className="wse-prose wse-prose--tight wse-tech-tab-panel__intro">These five areas require attention for smooth deployment. Each requirement is standard for modern healthcare web applications.</p>

            <div className="wse-req-stack wse-req-stack--grid">
              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Authentication</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>OAuth 2.0 compliant identity provider or custom JWT generation system</li>
                  <li>Publicly accessible JWKS endpoint (HTTPS) for token verification</li>
                  <li>JWT tokens signed with RS256 algorithm</li>
                  <li>Required claims: <code className="wse-code">exp</code>, <code className="wse-code">iss</code>, <code className="wse-code">aud</code>, and user identifier</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Secure authentication is the foundation of trust. Get this right from the start, and everything else flows smoothly.</p>

                <div className="wse-req-actions">
                  <a className="wse-req-link" href="/documentation/how-to/partner-authentication">Partner Authentication Guide</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Installation</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>React or JavaScript development environment</li>
                  <li>Node.js with npm, pnpm, or yarn package manager</li>
                  <li>ES6 compatible browser environment</li>
                </ul>

                <p className="wse-req-block__label">Package selection</p>

                <ul className="wse-list wse-list--tight">
                  <li>React apps: install <code className="wse-code">@suki-sdk/react</code></li>
                  <li>Non-React browser apps: install <code className="wse-code">@suki-sdk/js</code></li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Match the package to the stack. React apps get React-optimized components. The JS package targets browser JavaScript outside React. This avoids unnecessary complexity.</p>

                <div className="wse-req-actions">
                  <a className="wse-req-link" href="/web-sdk/installation">Installation Guide</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Specialties information</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>List of medical specialties the application supports</li>
                  <li>Understanding of LOINC codes for clinical note sections</li>
                  <li>Mapping between encounter types and appropriate LOINC codes</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Context is everything. A cardiology note looks different from a behavioral health note. Proper configuration ensures notes are clinically appropriate and perfectly formatted for partner workflows.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/documentation/concepts/ambient-clinical-notes/specialties">Supported Specialties</a>
                  <a className="wse-req-link" href="/documentation/concepts/ambient-clinical-notes/note-sections#supported-note-sections">LOINC Codes and Note Sections</a>
                  <a className="wse-req-link" href="/web-sdk/product-updates/migration-to-v2#new-required-fields-explained">Specialty Context</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Note output and downstream integration</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>Infrastructure to receive note submission events or callbacks</li>
                  <li>Logic to parse LOINC-encoded JSON structure</li>
                  <li>Workflow to map Suki's output format to your systems of record or handoff targets</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Completed notes arrive as LOINC-encoded JSON. Partner systems receive structured, ready-to-use data for charts, exports, or internal services. No manual translation needed.</p>

                <div className="wse-req-actions">
                  <a className="wse-req-link" href="/web-sdk/guides/note-management#receiving-note-content">Note Submission and Retrieval</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Microphone permissions</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>Microphone access permission flow in the application</li>
                  <li>HTTPS connection for production (required for microphone access)</li>
                  <li>Iframe configuration if embedding: add <code className="wse-code">allow="microphone; clipboard-write; clipboard-read"</code> attributes</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Audio capture is essential. Without proper microphone permissions, the system can't function. Ensure permissions are requested and iframe configurations are correct.</p>

                <div className="wse-req-actions">
                  <a className="wse-req-link" href="/web-sdk/examples/using-inside-iframe#grant-required-permissions">Iframe Permissions Guide</a>
                </div>
              </div>
            </div>
          </div>
        </Tab>

        <Tab title="Mobile SDK" icon="mobile">
          <span id="mobile-sdk-critical-requirements" />

          <div className="wse-tech-tab-panel">
            <p className="wse-prose wse-prose--tight wse-tech-tab-panel__intro">These areas need attention for native iOS deployments. The Mobile SDK is a headless framework: you own the UI while the SDK handles audio, sessions, and platform services.</p>

            <div className="wse-req-stack wse-req-stack--grid">
              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Authentication and tokens</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>Implement <code className="wse-code">tokenProvider protocol</code> so the mobile SDK can request authentication tokens when needed</li>
                  <li>Pass `PartnerID`, `ProviderInfo`, and related fields to <code className="wse-code">initialize</code> as described in configuration guide</li>
                  <li>Use <code className="wse-code">.stage</code> for development and <code className="wse-code">.prod</code> for production</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> The SDK exchanges tokens with Suki services on a predictable contract. A correct token provider and initialization payload avoid auth failures during sessions.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/documentation/how-to/partner-authentication">Partner Authentication</a>
                  <a className="wse-req-link" href="/mobile-sdk/prerequisites">Prerequisites</a>
                  <a className="wse-req-link" href="/mobile-sdk/configuration">Configuration</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Installation and platform</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>Xcode project targeting <strong>iOS 13.0</strong> or later</li>
                  <li><code className="wse-code">SukiAmbientCore.framework</code> added, embedded, and set to <strong>Embed & Sign</strong></li>
                  <li><code className="wse-code">NSMicrophoneUsageDescription</code> in <code className="wse-code">Info.plist</code> with a clear, user-facing explanation</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Apple enforces microphone disclosure and embedding rules. A correct deployment target and framework embedding prevent runtime crashes and App Store rejection.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/mobile-sdk/prerequisites">Prerequisites</a>
                  <a className="wse-req-link" href="/mobile-sdk/installation">Mobile SDK Installation</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Session lifecycle and delegates</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>Session delegate implementation for lifecycle and status updates</li>
                  <li>Recording flows aligned with your UX: start, pause, resume, end, and cancel as needed</li>
                  <li>Background recording flag in <code className="wse-code">initialize</code> when your product requires it</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> ambient capture is stateful. Delegates keep your UI and backend logic in sync with SDK events and errors.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/mobile-sdk/ambient-guides/create-session">Create Session</a>
                  <a className="wse-req-link" href="/mobile-sdk/ambient-guides/recording">Recording Controls</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Content and downstream integration</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>Logic to poll or receive structured content when a session completes</li>
                  <li>Mapping of structured output into your EHR, exports, or internal services</li>
                  <li>Offline mode awareness: recording can continue when the network is unstable; sync when connectivity returns</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Clinical value lands when notes reach the right system. Plan retrieval and persistence before go-live.</p>

                <div className="wse-req-actions">
                  <a className="wse-req-link" href="/mobile-sdk/ambient-guides/session-status-and-content-retrieval">Session Status and Content Retrieval</a>
                </div>
              </div>
            </div>
          </div>
        </Tab>

        <Tab title="Suki REST APIs" icon="code">
          <span id="rest-apis-critical-requirements" />

          <div className="wse-tech-tab-panel">
            <p className="wse-prose wse-prose--tight wse-tech-tab-panel__intro">Use these when your backend or a custom client orchestrates login, sessions, and content without the pre-built Web SDK UI. Follow REST and streaming patterns in the API reference.</p>

            <div className="wse-req-stack wse-req-stack--grid">
              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Authentication and tokens</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>HTTPS-only clients; obtain an `sdp_suki_token` via login using <code className="wse-code">partner\_id</code>, <code className="wse-code">partner\_token</code>, and <code className="wse-code">provider\_id</code> as documented</li>
                  <li>Partner JWTs issued consistently with your JWKS and Suki validation rules</li>
                  <li>Secure storage and rotation of credentials in your services</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> API access is token-driven. Misconfigured login or partner tokens surface as 401s across session and content calls.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/api-reference/provider-authentication">Authentication</a>
                  <a className="wse-req-link" href="/api-reference/quickstart">API Quickstart</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Endpoints and environments</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>Correct base URL and API version for stage versus production</li>
                  <li>Use of versioned paths (for example, <code className="wse-code">/api/v1/...</code>) per resource</li>
                  <li>Follow our **HTTPS guidelines** and documented status codes</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Environment mix-ups cause subtle failures. Pin URLs per environment in configuration, not in scattered constants.</p>

                <div className="wse-req-actions">
                  <a className="wse-req-link" href="/api-reference/overview">API Overview</a>
                  <a className="wse-req-link" href="/api-reference/https-guidelines">HTTPS Guidelines</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">ambient operations</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>REST flows for ambient session lifecycle and ambient content as your integration requires</li>
                  <li>Audio or streaming integrations where the API uses WebSockets for real-time transmission</li>
                  <li>Webhook or polling patterns if your architecture consumes async completion signals</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> ambient features span REST and streaming. Plan both client behavior and server-side orchestration up front.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/api-reference/ambient-session-management">Ambient session Management</a>
                  <a className="wse-req-link" href="/api-reference/ambient-content-retrieval">Ambient Content Retrieval</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Operational readiness</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>Retry and error-handling policies aligned with your SLA and the platform's HTTP semantics</li>
                  <li>Logging and monitoring that avoid PHI in unsecured logs</li>
                  <li>Load and rate expectations validated with your Suki contact for high-volume workloads</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Production APIs need observability and safe handling of transient failures, especially in clinical workflows.</p>

                <div className="wse-req-actions">
                  <a className="wse-req-link" href="/api-reference/asynchronous/webhook">Webhook Notifications</a>
                </div>
              </div>
            </div>
          </div>
        </Tab>

        <Tab title="Headless Web SDK" icon="cube">
          <span id="headless-web-sdk-critical-requirements" />

          <div className="wse-tech-tab-panel">
            <p className="wse-prose wse-prose--tight wse-tech-tab-panel__intro">Partner authentication and tokens are the same as the Web SDK. Headless differs because you build your own UI and integrate <code className="wse-code">useAuth</code>, ambient hooks, and related APIs instead of pre-built components.</p>

            <div className="wse-req-stack wse-req-stack--grid">
              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Authentication</h4>
                <p className="wse-req-block__label">Requirements</p>
                <p className="wse-prose wse-prose--tight">Same partner authentication checklist as the Web SDK tab.</p>

                <ul className="wse-list wse-list--tight">
                  <li>OAuth 2.0 compliant identity provider or custom JWT generation system</li>
                  <li>Publicly accessible JWKS endpoint (HTTPS) for token verification</li>
                  <li>JWT tokens signed with RS256 algorithm</li>
                  <li>Required claims: <code className="wse-code">exp</code>, <code className="wse-code">iss</code>, <code className="wse-code">aud</code>, and user identifier</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> It is the same trust model as the Web SDK. In Headless you connect tokens through <code className="wse-code">useAuth</code> and related hooks; auth gaps block Ambient APIs until identity is wired correctly.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/documentation/how-to/partner-authentication">Partner Authentication Guide</a>
                  <a className="wse-req-link" href="/headless-web-sdk/authentication">Headless Authentication</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Installation and runtime</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>React <strong>18.0</strong> or higher</li>
                  <li>Install <code className="wse-code">@suki-sdk/platform-react</code> with npm, pnpm, or yarn</li>
                  <li>ES6-compatible browser environment</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> The package ships React hooks. Version and bundler assumptions must match what we test and support.</p>

                <div className="wse-req-actions">
                  <a className="wse-req-link" href="/headless-web-sdk/installation">Headless Installation</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Partner configuration</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li><code className="wse-code">partnerId</code> from Suki during onboarding</li>
                  <li>Test and production host URLs allowlisted for your app</li>
                  <li>User identifier field in the JWT agreed during onboarding and reflected in tokens</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Headless initialization fails fast when hosts or user identity keys do not match what Suki configured for your tenant.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/headless-web-sdk/prerequisites">Prerequisites</a>
                  <a className="wse-req-link" href="/documentation/get-started/partner-onboarding">Partner Onboarding</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">ambient hooks and browser permissions</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>Integrate ambient and session hooks per quickstart; handle pending, error, and completion states in your UI</li>
                  <li>Microphone permission UX and HTTPS in production</li>
                  <li>If you embed in an iframe, set appropriate <code className="wse-code">allow</code> attributes for microphone (and clipboard if needed)</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> You own the experience. Explicit permission and error paths keep capture reliable for clinicians.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/headless-web-sdk/quickstart">Headless Quickstart</a>
                  <a className="wse-req-link" href="/headless-web-sdk/guides/hooks/ambient-hook">Ambient Hook</a>
                </div>
              </div>
            </div>
          </div>
        </Tab>

        <Tab title="Dictation SDK" icon="cube">
          <span id="dictation-sdk-critical-requirements" />

          <div className="wse-tech-tab-panel">
            <p className="wse-prose wse-prose--tight wse-tech-tab-panel__intro">Dictation embeds a hosted iframe in your web app. You supply partner credentials, mount the surface in your layout, and wire <code className="wse-code">SukiAuthManager</code> and <code className="wse-code">DictationClient</code> (or React equivalents) instead of building capture UI yourself.</p>

            <div className="wse-req-stack wse-req-stack--grid">
              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Authentication and partner credentials</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li><code className="wse-code">partnerId</code> and <code className="wse-code">partnerToken</code> from Suki after partner onboarding</li>
                  <li><code className="wse-code">SukiAuthManager</code> from <code className="wse-code">@suki-sdk/core</code> with provider fields and staging or production environment</li>
                  <li>Successful login before the Dictation iframe can initialize</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Invalid or missing credentials block iframe initialization. Auth must be stable before clinicians open Dictation.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/documentation/how-to/partner-authentication">Partner Authentication Guide</a>
                  <a className="wse-req-link" href="/dictation-sdk/guides/authentication">Dictation Authentication</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Installation and runtime</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>Browser client with <code className="wse-code">HTMLIFrameElement</code> and <code className="wse-code">postMessage</code> (not Node.js or SSR-only rendering for the iframe)</li>
                  <li>Install <code className="wse-code">@suki-sdk/core</code> plus <code className="wse-code">@suki-sdk/dictation</code> or <code className="wse-code">@suki-sdk/dictation-react</code></li>
                  <li>HTTPS in production for secure iframe and platform calls</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Dictation is browser-hosted. Package and runtime choices must match the integration track you ship.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/dictation-sdk/installation">Dictation Installation</a>
                  <a className="wse-req-link" href="/dictation-sdk/quickstart">Dictation Quickstart</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Layout and iframe hosting</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>A mount container (<code className="wse-code">rootElement</code>) with real height and a stable layout box</li>
                  <li><code className="wse-code">overflow: visible</code> on wrappers when minimized or floating so the iframe is not clipped</li>
                  <li>If embedded in an iframe, appropriate <code className="wse-code">allow</code> attributes for microphone and clipboard as needed</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> The hosted surface sizes to your DOM. Clipping or zero-height containers hide Dictation or break interaction.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/dictation-sdk/prerequisites">Dictation Prerequisites</a>
                  <a className="wse-req-link" href="/dictation-sdk/guides/configuration">Dictation Configuration</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Session modes and callbacks</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>Choose in-field or scratchpad mode and pass <code className="wse-code">ShowOptions</code> per session</li>
                  <li>Wire submit, cancel, and draft callbacks so your app persists dictated text</li>
                  <li>Error handling for auth failures, layout issues, and iframe load problems</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> You own the surrounding UX. Mode and callback wiring determine how dictated content returns to your fields or charts.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/dictation-sdk/guides/in-field-mode">In-Field Mode</a>
                  <a className="wse-req-link" href="/dictation-sdk/guides/callbacks">Dictation Callbacks</a>
                </div>
              </div>
            </div>
          </div>
        </Tab>

        <Tab title="Form Filling SDK" icon="cube">
          <span id="form-filling-sdk-critical-requirements" />

          <div className="wse-tech-tab-panel">
            <p className="wse-prose wse-prose--tight wse-tech-tab-panel__intro">Form filling embeds a hosted iframe in your web app. You supply partner credentials and Medical form template IDs, mount the surface in your layout, and wire <code className="wse-code">SukiAuthManager</code> and <code className="wse-code">FormFillingClient</code> (or React equivalents) instead of building capture UI yourself.</p>

            <div className="wse-req-stack wse-req-stack--grid">
              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Authentication and partner credentials</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li><code className="wse-code">partnerId</code> and <code className="wse-code">partnerToken</code> from Suki after partner onboarding</li>
                  <li><code className="wse-code">SukiAuthManager</code> from <code className="wse-code">@suki-sdk/core</code> with optional provider fields and staging or production environment</li>
                  <li>Successful login before the Form filling iframe can initialize</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Invalid or missing credentials block iframe initialization. Auth must be stable before clinicians open Form filling.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/documentation/how-to/partner-authentication">Partner Authentication Guide</a>
                  <a className="wse-req-link" href="/form-filling-sdk/guides/authentication">Form filling Authentication</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Installation and runtime</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>Browser client with a sized container for the hosted iframe (not Node.js or SSR-only rendering for the iframe)</li>
                  <li>Install <code className="wse-code">@suki-sdk/core</code> plus <code className="wse-code">@suki-sdk/form-filling</code> or <code className="wse-code">@suki-sdk/form-filling-react</code></li>
                  <li>HTTPS in production for secure iframe, microphone access, and platform calls</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Form filling is browser-hosted. Package and runtime choices must match the integration track you ship.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/form-filling-sdk/installation">Form filling Installation</a>
                  <a className="wse-req-link" href="/form-filling-sdk/quickstart">Form filling Quickstart</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Templates, layout, and CSP</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li><code className="wse-code">template\_id</code> UUIDs from Suki support in <code className="wse-code">form\_template\_ids</code> (staging and production IDs differ)</li>
                  <li>A mount container with explicit height so the hosted UI is visible</li>
                  <li><code className="wse-code">frame-src</code> in Content-Security-Policy allowing <code className="wse-code">[https://sdk.suki.ai](https://sdk.suki.ai)</code> (production) or <code className="wse-code">[https://sdk.suki-stage.com](https://sdk.suki-stage.com)</code> (staging)</li>
                  <li>Optional <code className="wse-code">correlation\_id</code> (your encounter ID) to match results in callbacks and webhooks</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Unsupported template IDs fail at start time. Zero-height containers or blocked iframe origins hide Form filling or trigger handshake errors.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/form-filling-sdk/prerequisites">Form filling Prerequisites</a>
                  <a className="wse-req-link" href="/form-filling-sdk/guides/configuration">Form filling Configuration</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Session workflow, callbacks, and webhooks</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>Single-form or multi-form sessions: pass one or more <code className="wse-code">template\_id</code> values per workflow</li>
                  <li>Wire <code className="wse-code">onSubmit</code>, cancel, and error callbacks; map <code className="wse-code">structured\_data.generated\_values</code> into your EHR</li>
                  <li>Register a partner webhook for production so structured data reaches your server if the tab closes before processing finishes</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Submit starts processing; structured JSON arrives later. Browser callbacks plus server webhooks keep form data from being lost.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/form-filling-sdk/guides/integration-patterns">Session Workflow</a>
                  <a className="wse-req-link" href="/form-filling-sdk/examples/webhook-handler">Webhook Handler Example</a>
                </div>
              </div>
            </div>
          </div>
        </Tab>

        <Tab title="Form Filling APIs" icon="code">
          <span id="form-filling-apis-critical-requirements" />

          <div className="wse-tech-tab-panel">
            <p className="wse-prose wse-prose--tight wse-tech-tab-panel__intro">Form filling uses REST for session lifecycle and the shared Partner WebSocket for visit audio. Your backend or custom client authenticates, creates a Form filling session, streams audio with that session ID, then retrieves structured output or consumes webhooks.</p>

            <div className="wse-req-stack wse-req-stack--grid">
              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Authentication and tokens</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>OAuth-compliant authentication and JWTs with consistent user identifiers</li>
                  <li>Publicly accessible JWKS endpoint (HTTPS) for token verification</li>
                  <li>Partner credentials: register providers, then obtain a Suki Token via login</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Form filling REST and WebSocket calls are token-driven. Misconfigured login or JWKS surfaces as auth failures across the workflow.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/form-filling-api-reference/authentication">Form filling authentication</a>
                  <a className="wse-req-link" href="/documentation/how-to/partner-authentication">Partner Authentication Guide</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Endpoints and environments</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>Correct base URL and API version for stage versus production</li>
                  <li>Versioned Form filling paths under <code className="wse-code">/api/v1/form-filling/...</code></li>
                  <li>HTTPS-only clients and documented HTTP status handling</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Environment mix-ups cause subtle failures. Pin URLs and credentials per environment in configuration.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/form-filling-api-reference/overview">Form filling API Overview</a>
                  <a className="wse-req-link" href="/api-reference/https-guidelines">HTTPS Guidelines</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Session lifecycle and audio streaming</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>Create a Form filling session and seed context (template and encounter metadata) when needed</li>
                  <li>Stream audio on <code className="wse-code">GET /ws/stream</code> using the Form filling <code className="wse-code">ambient\_session\_id</code></li>
                  <li>End the session and monitor status until processing completes</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Capture spans REST and WebSocket. Use the Form filling session ID on the shared stream so audio maps to the correct workflow.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/form-filling-api-reference/quickstart">Form filling API quickstart</a>
                  <a className="wse-req-link" href="/documentation/how-to/audio-streaming/ambient-audio-streaming">Ambient Audio Streaming</a>
                </div>
              </div>

              <div className="wse-req-block">
                <h4 className="wse-req-block__title">Structured output and operations</h4>
                <p className="wse-req-block__label">Requirements</p>

                <ul className="wse-list wse-list--tight">
                  <li>Poll status and structured-data endpoints, or subscribe to webhooks for completion</li>
                  <li>Map structured form fields into your EHR, exports, or internal services</li>
                  <li>Retry, logging, and PHI-safe observability aligned with your SLA</li>
                </ul>

                <p className="wse-prose"><strong>Why it matters:</strong> Clinical value lands when populated forms reach the right system. Plan retrieval, validation, and handoff before go-live.</p>

                <div className="wse-req-actions wse-req-actions--wrap">
                  <a className="wse-req-link" href="/form-filling-api-reference/form-filling-content-retrieval">Form filling content retrieval</a>
                  <a className="wse-req-link" href="/api-reference/asynchronous/webhook">Webhook Notifications</a>
                </div>
              </div>
            </div>
          </div>
        </Tab>
      </Tabs>
    </div>
  </div>

  <footer className="web-sdk-exec-page-foot">
    <p className="web-sdk-exec-page-foot__brand">Suki for Partners</p>

    <p className="wse-prose wse-prose--tight web-sdk-exec-page-foot__actions">
      <a href="/documentation/references/executive-summary">Executive Summary →</a>
      <span className="wse-exec-page-toc__sep" aria-hidden="true"> · </span>
      <a href="https://www.suki.ai/contact-us/">Contact Partnership Team →</a>
    </p>
  </footer>
</div>