> ## 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 technical execution

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

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

<div className="hp-wrap web-sdk-exec-page">
  <section className="web-sdk-exec-hero-zone" aria-labelledby="wse-tech-hero-heading">
    <div className="web-sdk-exec-hero-zone__inner">
      <div className="web-sdk-exec-hero" role="banner">
        <div className="web-sdk-exec-hero__copy">
          <p className="web-sdk-exec-hero__eyebrow">Technical Execution</p>

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

          <h1 id="wse-tech-hero-heading" className="web-sdk-exec-hero__headline">Technical Execution</h1>
          <p className="web-sdk-exec-hero__kicker">Suki SDKs & APIs · Engineering checklist</p>

          <p className="web-sdk-exec-hero__sub">
            How integration works, what partners need, critical technical requirements, and integration timeline
          </p>
        </div>

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

  <div className="web-sdk-exec-content-zone">
    <div className="web-sdk-exec-section" id="technical-execution-overview" aria-labelledby="wse-technical-exec-title">
      <h2 id="wse-technical-exec-title" className="web-sdk-exec-section__title">Technical execution at a glance</h2>

      <p className="web-sdk-exec-section__lede web-sdk-exec-section__lede--full web-sdk-exec-section__lede--tech-glance wse-prose wse-prose--tight">
        Learn how to integrate Suki SDKs and APIs into your product. Go through this technical execution guide for technical requirements and the integration process for our developer tools.
      </p>

      <div className="wse-how-integ" id="how-integration-works">
        <h2 className="web-sdk-exec-card__title">How integration works</h2>

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

        <p className="wse-prose wse-prose--tight wse-how-integ__intro">
          These four phases apply across the Web SDK, Mobile SDK, Headless Web SDK, and Suki REST APIs. Your surface changes how you implement each step; use the <a className="wse-exec-text-link" href="/documentation/technical-execution#critical-technical-requirements">Critical technical requirements</a> section below for checklists by product.
        </p>

        <div className="wse-how-integ__track" role="group" aria-label="How integration works, four phases for all surfaces">
          <div className="wse-journey-card">
            <span className="wse-journey-card__step" aria-hidden="true">
              1
            </span>

            <div className="wse-journey-card__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-journey-card__title">Setup and configuration</h3>
            <p className="wse-journey-card__desc">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 className="wse-how-integ__connector" aria-hidden="true">
            <span className="wse-how-integ__chev">></span>
          </div>

          <div className="wse-journey-card">
            <span className="wse-journey-card__step" aria-hidden="true">
              2
            </span>

            <div className="wse-journey-card__icon" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" 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-journey-card__title">Authentication</h3>
            <p className="wse-journey-card__desc">Connect your IdP, issue partner tokens, and validate access for embedded SDKs or server-side REST API calls.</p>
          </div>

          <div className="wse-how-integ__connector" aria-hidden="true">
            <span className="wse-how-integ__chev">></span>
          </div>

          <div className="wse-journey-card">
            <span className="wse-journey-card__step" aria-hidden="true">
              3
            </span>

            <div className="wse-journey-card__icon" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />

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

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

            <h3 className="wse-journey-card__title">Ambient session and AI</h3>
            <p className="wse-journey-card__desc">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 className="wse-how-integ__connector" aria-hidden="true">
            <span className="wse-how-integ__chev">></span>
          </div>

          <div className="wse-journey-card">
            <span className="wse-journey-card__step" aria-hidden="true">
              4
            </span>

            <div className="wse-journey-card__icon" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" 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-journey-card__title">Note delivery</h3>
            <p className="wse-journey-card__desc">Receive structured payloads (JSON), map to your formats, and route to chart, record, or downstream systems.</p>
          </div>
        </div>
      </div>

      <section className="web-sdk-exec-card" id="what-partners-need">
        <h2 className="web-sdk-exec-card__title">What partners need</h2>

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

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

        <div className="wse-tile-grid">
          <div role="article" className="wse-tile"><div className="wse-tile__head"><h3 className="wse-tile__title">✓ Identity & Security System</h3></div><p className="wse-tile__text">An existing authentication system (OAuth 2.0 or similar) is the foundation. The SDK connects to what's already in place. Most organizations already meet these requirements.</p></div>
          <div role="article" className="wse-tile"><div className="wse-tile__head"><h3 className="wse-tile__title">✓ Development environment</h3></div><p className="wse-tile__text">Teams shipping a browser client with React (<code className="wse-code">@suki-sdk/react</code>) or JavaScript (<code className="wse-code">@suki-sdk/js</code>) are ready. Server-rendered-only stacks still need a supported client bundle. Standard tools and package managers are all that's needed.</p></div>
          <div role="article" className="wse-tile"><div className="wse-tile__head"><h3 className="wse-tile__title">✓ Clinical knowledge</h3></div><p className="wse-tile__text">Clinical teams already understand their specialties and documentation requirements. That expertise configures the SDK for optimal note generation.</p></div>
          <div role="article" className="wse-tile"><div className="wse-tile__head"><h3 className="wse-tile__title">✓ Structured data path</h3></div><p className="wse-tile__text">Ability to receive structured payloads and route them into charts, care plans, billing, or other downstream systems. The SDK delivers LOINC-oriented note data your services can map and persist.</p></div>
          <div role="article" className="wse-tile"><div className="wse-tile__head"><h3 className="wse-tile__title">✓ Audio capabilities</h3></div><p className="wse-tile__text">Standard web browser microphone permissions and HTTPS connections. Capabilities every modern web application already supports.</p></div>
          <div role="article" className="wse-tile"><div className="wse-tile__head"><h3 className="wse-tile__title">✓ User information</h3></div><p className="wse-tile__text">Stable identifiers and context for the person using the SDK (for example, physician, nurse, case manager, or virtual care role), plus organization or tenant IDs you already store.</p></div>
        </div>
      </section>

      <section className="web-sdk-exec-card" id="critical-technical-requirements">
        <h2 className="web-sdk-exec-card__title">Integration Methods</h2>

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

        <div className="wse-tile-grid wse-tile-grid--req-hub">
          <div role="article" className="wse-tile wse-tile--req-hub">
            <div className="wse-tile__head">
              <h3 className="wse-tile__title">Web SDK</h3>
            </div>

            <p className="wse-tile__text">Use our pre-built browser UI with the Web SDK for `React` or `JavaScript` to get started quickly.</p>

            <div className="wse-doc-btn-row">
              <a className="learning-path-button hp-cta-with-icon" href="/documentation/technical-execution#web-sdk-critical-requirements">
                <svg className="hp-cta-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <path d="m9 18 6-6-6-6" />
                </svg>

                View Checklist
              </a>
            </div>
          </div>

          <div role="article" className="wse-tile wse-tile--req-hub">
            <div className="wse-tile__head">
              <h3 className="wse-tile__title">Mobile SDK</h3>
            </div>

            <p className="wse-tile__text">Use our native iOS SDK to integrate Suki clinical intelligence into your native iOS applications.</p>

            <div className="wse-doc-btn-row">
              <a className="learning-path-button hp-cta-with-icon" href="/documentation/technical-execution#mobile-sdk-critical-requirements">
                <svg className="hp-cta-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <path d="m9 18 6-6-6-6" />
                </svg>

                View Checklist
              </a>
            </div>
          </div>

          <div role="article" className="wse-tile wse-tile--req-hub">
            <div className="wse-tile__head">
              <h3 className="wse-tile__title">Suki REST APIs</h3>
            </div>

            <p className="wse-tile__text">Use our REST APIs and webhooks to integrate Suki clinical intelligence into your backend or custom client.</p>

            <div className="wse-doc-btn-row">
              <a className="learning-path-button hp-cta-with-icon" href="/documentation/technical-execution#rest-apis-critical-requirements">
                <svg className="hp-cta-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <path d="m9 18 6-6-6-6" />
                </svg>

                View Checklist
              </a>
            </div>
          </div>

          <div role="article" className="wse-tile wse-tile--req-hub">
            <div className="wse-tile__head">
              <h3 className="wse-tile__title">Headless Web SDK</h3>
            </div>

            <p className="wse-tile__text">Use our headless Web SDK to integrate Suki clinical intelligence into your web application with full control over your own user interface.</p>

            <div className="wse-doc-btn-row">
              <a className="learning-path-button hp-cta-with-icon" href="/documentation/technical-execution#headless-web-sdk-critical-requirements">
                <svg className="hp-cta-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <path d="m9 18 6-6-6-6" />
                </svg>

                View Checklist
              </a>
            </div>
          </div>

          <div role="article" className="wse-tile wse-tile--req-hub">
            <div className="wse-tile__head">
              <h3 className="wse-tile__title">Dictation SDK</h3>
            </div>

            <p className="wse-tile__text">Embed clinical dictation in web applications with a hosted iframe, using JavaScript or React packages and your own layout around the dictation surface.</p>

            <div className="wse-doc-btn-row">
              <a className="learning-path-button hp-cta-with-icon" href="/documentation/technical-execution#dictation-sdk-critical-requirements">
                <svg className="hp-cta-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <path d="m9 18 6-6-6-6" />
                </svg>

                View Checklist
              </a>
            </div>
          </div>

          <div role="article" className="wse-tile wse-tile--req-hub">
            <div className="wse-tile__head">
              <h3 className="wse-tile__title">Form Filling APIs</h3>
            </div>

            <p className="wse-tile__text">Use Form filling REST APIs and the shared Partner WebSocket to run voice-driven medical form workflows with structured output in your product.</p>

            <div className="wse-doc-btn-row">
              <a className="learning-path-button hp-cta-with-icon" href="/documentation/technical-execution#form-filling-apis-critical-requirements">
                <svg className="hp-cta-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <path d="m9 18 6-6-6-6" />
                </svg>

                View Checklist
              </a>
            </div>
          </div>
        </div>
      </section>

      <section className="web-sdk-exec-card web-sdk-exec-card--timeline" id="integration-timeline">
        <h2 className="web-sdk-exec-card__title">Integration timeline</h2>

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

        <div className="wse-zz-timeline">
          <p className="wse-zz-timeline__intro"><strong>From concept to production in weeks, not months.</strong></p>

          <div className="wse-zz-timeline__stage">
            <div className="wse-zz-timeline__row wse-zz-timeline__row--top">
              <div className="wse-zz-timeline__cell" />

              <div className="wse-zz-timeline__cell">
                <div className="wse-zz-timeline__panel">
                  <h3 className="wse-zz-timeline__panel-title">Build & customize</h3>

                  <div className="wse-zz-timeline__panel-rule" aria-hidden="true" />

                  <p className="wse-zz-timeline__panel-text">SDK integration and UI customization so the experience matches your product.</p>
                </div>
              </div>

              <div className="wse-zz-timeline__cell" />

              <div className="wse-zz-timeline__cell">
                <div className="wse-zz-timeline__panel">
                  <h3 className="wse-zz-timeline__panel-title">Total time to value</h3>

                  <div className="wse-zz-timeline__panel-rule" aria-hidden="true" />

                  <p className="wse-zz-timeline__panel-text"><strong>2-4 weeks</strong> from start to production launch. Compare that to 6-12 months building ambient AI from scratch.</p>
                </div>
              </div>
            </div>

            <div className="wse-zz-timeline__row wse-zz-timeline__row--mid">
              <div className="wse-zz-timeline__rail" aria-hidden="true">
                <span className="wse-zz-timeline__seg wse-zz-timeline__seg--up" />

                <span className="wse-zz-timeline__seg wse-zz-timeline__seg--down" />

                <span className="wse-zz-timeline__seg wse-zz-timeline__seg--up" />

                <span className="wse-zz-timeline__seg wse-zz-timeline__seg--down wse-zz-timeline__seg--last" />
              </div>

              <div className="wse-zz-timeline__cell wse-zz-timeline__cell--disc">
                <div className="wse-zz-timeline__disc wse-zz-timeline__disc--from-top">Week 1</div>
              </div>

              <div className="wse-zz-timeline__cell wse-zz-timeline__cell--disc">
                <div className="wse-zz-timeline__disc wse-zz-timeline__disc--from-bottom">Week 2–3</div>
              </div>

              <div className="wse-zz-timeline__cell wse-zz-timeline__cell--disc">
                <div className="wse-zz-timeline__disc wse-zz-timeline__disc--from-top">Week 4</div>
              </div>

              <div className="wse-zz-timeline__cell wse-zz-timeline__cell--disc">
                <div className="wse-zz-timeline__disc wse-zz-timeline__disc--from-bottom">Go-live</div>
              </div>
            </div>

            <div className="wse-zz-timeline__row wse-zz-timeline__row--bottom">
              <div className="wse-zz-timeline__cell wse-zz-timeline__cell--span2">
                <div className="wse-zz-timeline__panel">
                  <h3 className="wse-zz-timeline__panel-title">Kickoff</h3>

                  <div className="wse-zz-timeline__panel-rule" aria-hidden="true" />

                  <p className="wse-zz-timeline__panel-text">Partner onboarding and environment setup.</p>
                </div>
              </div>

              <div className="wse-zz-timeline__cell wse-zz-timeline__cell--span2">
                <div className="wse-zz-timeline__panel">
                  <h3 className="wse-zz-timeline__panel-title">Validate & ship</h3>

                  <div className="wse-zz-timeline__panel-rule" aria-hidden="true" />

                  <p className="wse-zz-timeline__panel-text">Testing, QA, and production deployment with confidence.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

    <div className="web-sdk-exec-section" id="expanded-reference" aria-labelledby="wse-expanded-ref-title">
      <h2 id="wse-expanded-ref-title" className="web-sdk-exec-section__title">Expanded reference</h2>

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

            <section className="web-sdk-exec-card">
              <h2 className="web-sdk-exec-card__title">Critical technical requirements (Web SDK)</h2>

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

              <p className="wse-prose wse-prose--tight">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="learning-path-button" href="/documentation/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="learning-path-button" 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="learning-path-button" href="/documentation/specialties">Supported Specialties</a>
                    <a className="learning-path-button" href="/documentation/note-sections#supported-note-sections">LOINC Codes and Note Sections</a>
                    <a className="learning-path-button" 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="learning-path-button" 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="learning-path-button" href="/web-sdk/examples/using-inside-iframe#granting-required-permissions">Iframe Permissions Guide</a>
                  </div>
                </div>
              </div>
            </section>
          </Tab>

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

            <section className="web-sdk-exec-card">
              <h2 className="web-sdk-exec-card__title">Critical technical requirements (Mobile SDK)</h2>

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

              <p className="wse-prose wse-prose--tight">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="learning-path-button" href="/documentation/partner-authentication">Partner Authentication</a>
                    <a className="learning-path-button" 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">
                    <a className="learning-path-button" 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="learning-path-button" href="/mobile-sdk/ambient-guides/create-session">Create Session</a>
                    <a className="learning-path-button" 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="learning-path-button" href="/mobile-sdk/ambient-guides/session-status-and-content-retrieval">Session Status and Content Retrieval</a>
                  </div>
                </div>
              </div>
            </section>
          </Tab>

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

            <section className="web-sdk-exec-card">
              <h2 className="web-sdk-exec-card__title">Critical technical requirements (Suki REST APIs)</h2>

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

              <p className="wse-prose wse-prose--tight">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="learning-path-button" href="/api-reference/provider-authentication">Authentication</a>
                    <a className="learning-path-button" 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="learning-path-button" href="/api-reference/overview">API Overview</a>
                    <a className="learning-path-button" 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="learning-path-button" href="/api-reference/ambient-session-management">Ambient Session Management</a>
                    <a className="learning-path-button" 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="learning-path-button" href="/api-reference/asynchronous/webhook">Webhook Notifications</a>
                  </div>
                </div>
              </div>
            </section>
          </Tab>

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

            <section className="web-sdk-exec-card">
              <h2 className="web-sdk-exec-card__title">Critical technical requirements (Headless Web SDK)</h2>

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

              <p className="wse-prose wse-prose--tight">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="learning-path-button" href="/documentation/partner-authentication">Partner Authentication Guide</a>
                    <a className="learning-path-button" 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="learning-path-button" 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="learning-path-button" href="/headless-web-sdk/prerequisites">Prerequisites</a>
                    <a className="learning-path-button" href="/documentation/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="learning-path-button" href="/headless-web-sdk/quickstart">Headless Quickstart</a>
                    <a className="learning-path-button" href="/headless-web-sdk/guides/hooks/ambient-hook">Ambient Hook</a>
                  </div>
                </div>
              </div>
            </section>
          </Tab>

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

            <section className="web-sdk-exec-card">
              <h2 className="web-sdk-exec-card__title">Critical technical requirements (Dictation SDK)</h2>

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

              <p className="wse-prose wse-prose--tight">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="learning-path-button" href="/documentation/partner-authentication">Partner Authentication Guide</a>
                    <a className="learning-path-button" 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="learning-path-button" href="/dictation-sdk/installation">Dictation Installation</a>
                    <a className="learning-path-button" 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="learning-path-button" href="/dictation-sdk/prerequisites">Dictation Prerequisites</a>
                    <a className="learning-path-button" 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="learning-path-button" href="/dictation-sdk/guides/in-field-mode">In-Field Mode</a>
                    <a className="learning-path-button" href="/dictation-sdk/guides/callbacks">Dictation Callbacks</a>
                  </div>
                </div>
              </div>
            </section>
          </Tab>

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

            <section className="web-sdk-exec-card">
              <h2 className="web-sdk-exec-card__title">Critical technical requirements (Form Filling APIs)</h2>

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

              <p className="wse-prose wse-prose--tight">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="learning-path-button" href="/form-filling-api-reference/authentication">Form Filling authentication</a>
                    <a className="learning-path-button" href="/documentation/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="learning-path-button" href="/form-filling-api-reference/overview">Form Filling API Overview</a>
                    <a className="learning-path-button" 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="learning-path-button" href="/form-filling-api-reference/quickstart">Form Filling API quickstart</a>
                    <a className="learning-path-button" href="/documentation/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="learning-path-button" href="/form-filling-api-reference/form-filling-content-retrieval">Form Filling content retrieval</a>
                    <a className="learning-path-button" href="/api-reference/asynchronous/webhook">Webhook Notifications</a>
                  </div>
                </div>
              </div>
            </section>
          </Tab>
        </Tabs>
      </div>
    </div>
  </div>
</div>