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

# Tutorials

> Learn how to integrate and use Suki products with step by step tutorials. Follow practical examples to build your implementation from start to finish.

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

export const TutSearchIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path fill="none" d="M11 17.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13z" />
    <path d="m21 21-4.3-4.3" />
  </svg>;

export const SiTypescript = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" />
  </svg>;

export const SiPython = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z" />
  </svg>;

export const SiGo = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M1.811 10.231c-.047 0-.058-.023-.035-.059l.246-.315c.023-.035.081-.058.128-.058h4.172c.046 0 .058.035.035.07l-.199.303c-.023.036-.082.07-.117.07zM.047 11.306c-.047 0-.059-.023-.035-.058l.245-.316c.023-.035.082-.058.129-.058h5.328c.047 0 .07.035.058.07l-.093.28c-.012.047-.058.07-.105.07zm2.828 1.075c-.047 0-.059-.035-.035-.07l.163-.292c.023-.035.07-.07.117-.07h2.337c.047 0 .07.035.07.082l-.023.28c0 .047-.047.082-.082.082zm12.129-2.36c-.736.187-1.239.327-1.963.514-.176.046-.187.058-.34-.117-.174-.199-.303-.327-.548-.444-.737-.362-1.45-.257-2.115.175-.795.514-1.204 1.274-1.192 2.22.011.935.654 1.706 1.577 1.835.795.105 1.46-.175 1.987-.77.105-.13.198-.27.315-.434H10.47c-.245 0-.304-.152-.222-.35.152-.362.432-.97.596-1.274a.315.315 0 01.292-.187h4.253c-.023.316-.023.631-.07.947a4.983 4.983 0 01-.958 2.29c-.841 1.11-1.94 1.8-3.33 1.986-1.145.152-2.209-.07-3.143-.77-.865-.655-1.356-1.52-1.484-2.595-.152-1.274.222-2.419.993-3.424.83-1.086 1.928-1.776 3.272-2.02 1.098-.2 2.15-.07 3.096.571.62.41 1.063.97 1.356 1.648.07.105.023.164-.117.2m3.868 6.461c-1.064-.024-2.034-.328-2.852-1.029a3.665 3.665 0 01-1.262-2.255c-.21-1.32.152-2.489.947-3.529.853-1.122 1.881-1.706 3.272-1.95 1.192-.21 2.314-.095 3.33.595.923.63 1.496 1.484 1.648 2.605.198 1.578-.257 2.863-1.344 3.962-.771.783-1.718 1.273-2.805 1.495-.315.06-.63.07-.934.106zm2.78-4.72c-.011-.153-.011-.27-.034-.387-.21-1.157-1.274-1.81-2.384-1.554-1.087.245-1.788.935-2.045 2.033-.21.912.234 1.835 1.075 2.21.643.28 1.285.244 1.905-.07.923-.48 1.425-1.228 1.484-2.233z" />
  </svg>;

export const LangIcons = ({langs = ''}) => <div className="tut-hub-lang-icons" aria-label="Languages">
    {String(langs).includes('ts') && <span className="tut-hub-lang-icon" title="TypeScript"><SiTypescript /></span>}
    {String(langs).includes('py') && <span className="tut-hub-lang-icon" title="Python"><SiPython /></span>}
    {String(langs).includes('go') && <span className="tut-hub-lang-icon" title="Go"><SiGo /></span>}
  </div>;

export const TutCardBadges = ({product}) => <div className="tut-hub-card-badges">
    <span className="hp-wn-badge hp-wn-badge-new">Use Case</span>
    {product ? <span className="hp-wn-badge hp-wn-badge-new">{product}</span> : null}
  </div>;

export const FilterChevron = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="m6 9 6 6 6-6" />
  </svg>;

<div className="hp-wrap api-overview-wrap docs-frame-wrap tut-hub-wrap web-sdk-exec-page" data-disable-read-time="true" data-tut-hub>
  <div className="web-sdk-exec-section web-sdk-exec-section--exec-lead tut-hub-intro" aria-labelledby="tut-hub-page-title">
    <h1 id="tut-hub-page-title" className="sdk-overview-main-title api-overview-hero-page-title">
      Tutorials
    </h1>

    <div className="wse-exec-summary-prose wse-exec-summary-prose--full">
      <p className="wse-prose">
        Learn how to integrate and use Suki products with step by step tutorials. Follow practical examples to build your implementation from start to finish.
      </p>
    </div>
  </div>

  <section className="tut-hub-toolbar" aria-label="Search and filter tutorials">
    <div className="release-notes-filter-dropdowns tut-hub-filter-row">
      <div className="release-notes-filter-dropdown-field release-notes-filter-search-field">
        <label id="tut-hub-search-label" className="release-notes-filter-row-label" htmlFor="tut-hub-search">
          Search
        </label>

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

          <input id="tut-hub-search" type="search" className="suki-use-case-search" data-tut-search placeholder="Search tutorials" aria-labelledby="tut-hub-search-label" aria-label="Search tutorials" autoComplete="off" />
        </div>
      </div>

      <div className="release-notes-filter-dropdown-field">
        <label id="tut-hub-product-label" className="release-notes-filter-row-label" htmlFor="tut-hub-product-trigger">
          Browse by Product
        </label>

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

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

          <ul id="tut-hub-product-listbox" className="release-notes-filter-dropdown-list" role="listbox" aria-labelledby="tut-hub-product-label" hidden>
            <li role="presentation">
              <button type="button" role="option" className="release-notes-product-tab release-notes-product-tab--active" data-tut-product-filter="all" aria-selected="true">
                <span className="tut-hub-filter-opt-label">All products</span>
                <span className="tut-hub-filter-opt-count">9</span>
              </button>
            </li>

            <li role="presentation">
              <button type="button" role="option" className="release-notes-product-tab" data-tut-product-filter="ambient" aria-selected="false">
                <span className="tut-hub-filter-opt-label">Ambient</span>
                <span className="tut-hub-filter-opt-count">4</span>
              </button>
            </li>

            <li role="presentation">
              <button type="button" role="option" className="release-notes-product-tab" data-tut-product-filter="dictation" aria-selected="false">
                <span className="tut-hub-filter-opt-label">Dictation</span>
                <span className="tut-hub-filter-opt-count">2</span>
              </button>
            </li>

            <li role="presentation">
              <button type="button" role="option" className="release-notes-product-tab" data-tut-product-filter="form" aria-selected="false">
                <span className="tut-hub-filter-opt-label">Form Filling</span>
                <span className="tut-hub-filter-opt-count">2</span>
              </button>
            </li>

            <li role="presentation">
              <button type="button" role="option" className="release-notes-product-tab" data-tut-product-filter="webhooks" aria-selected="false">
                <span className="tut-hub-filter-opt-label">Webhooks</span>
                <span className="tut-hub-filter-opt-count">1</span>
              </button>
            </li>

            <li role="presentation">
              <button type="button" role="option" className="release-notes-product-tab" data-tut-product-filter="streaming" aria-selected="false">
                <span className="tut-hub-filter-opt-label">Streaming</span>
                <span className="tut-hub-filter-opt-count">3</span>
              </button>
            </li>
          </ul>
        </div>
      </div>

      <div className="release-notes-filter-dropdown-field">
        <label id="tut-hub-lang-label" className="release-notes-filter-row-label" htmlFor="tut-hub-lang-trigger">
          Browse by Language
        </label>

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

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

          <ul id="tut-hub-lang-listbox" className="release-notes-filter-dropdown-list" role="listbox" aria-labelledby="tut-hub-lang-label" hidden>
            <li role="presentation">
              <button type="button" role="option" className="release-notes-product-tab release-notes-product-tab--active" data-tut-lang-filter="all" aria-selected="true">
                <span className="tut-hub-filter-opt-label">All languages</span>
                <span className="tut-hub-filter-opt-count">9</span>
              </button>
            </li>

            <li role="presentation">
              <button type="button" role="option" className="release-notes-product-tab" data-tut-lang-filter="ts" aria-selected="false">
                <span className="tut-hub-filter-opt-label">
                  <span className="tut-hub-filter-opt-icon" aria-hidden="true">
                    <SiTypescript />
                  </span>

                  TypeScript
                </span>

                <span className="tut-hub-filter-opt-count">9</span>
              </button>
            </li>

            <li role="presentation">
              <button type="button" role="option" className="release-notes-product-tab" data-tut-lang-filter="py" aria-selected="false">
                <span className="tut-hub-filter-opt-label">
                  <span className="tut-hub-filter-opt-icon" aria-hidden="true">
                    <SiPython />
                  </span>

                  Python
                </span>

                <span className="tut-hub-filter-opt-count">4</span>
              </button>
            </li>

            <li role="presentation">
              <button type="button" role="option" className="release-notes-product-tab" data-tut-lang-filter="go" aria-selected="false">
                <span className="tut-hub-filter-opt-label">
                  <span className="tut-hub-filter-opt-icon" aria-hidden="true">
                    <SiGo />
                  </span>

                  Go
                </span>

                <span className="tut-hub-filter-opt-count">3</span>
              </button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section className="tut-hub-section" id="featured-tutorials" aria-labelledby="tut-hub-featured-title">
    <h2 className="tut-hub-section-title" id="tut-hub-featured-title">Featured Tutorials</h2>

    <p className="tut-hub-section-lead">
      Start with Ambient and Dictation streaming clients most partners build first.
    </p>

    <div className="tut-hub-featured-grid">
      <a className="hp-io-method-card tut-hub-method-card" href="/documentation/tutorials/ambient-websocket-code-example" data-tut-card data-tut-featured data-langs="ts py go" data-product="ambient streaming" data-search="ambient streaming client websocket pcm clinical note session authenticate typescript python go">
        <div className="tut-hub-card-media" aria-hidden="true" />

        <div className="hp-io-method-card-body">
          <span className="hp-wn-badge hp-wn-badge-new">Ambient</span>
          <h3 className="hp-io-method-card-title">Build an Ambient Streaming Client</h3>

          <p className="hp-io-method-card-desc">
            Authenticate, create a session, stream PCM audio over WebSocket, and retrieve clinical note results.
          </p>

          <div className="hp-io-method-card-meta tut-hub-card-foot" aria-label="20 min, Intermediate, TypeScript, Python, Go">
            <div className="tut-hub-card-foot-meta">
              <span className="hp-io-method-card-meta-time">20 min</span>
              <span className="tut-hub-level">Intermediate</span>
            </div>

            <LangIcons langs="ts py go" />
          </div>
        </div>
      </a>

      <a className="hp-io-method-card tut-hub-method-card" href="/documentation/tutorials/dictation-websocket-code-example" data-tut-card data-tut-featured data-langs="ts py go" data-product="dictation streaming" data-search="dictation streaming client websocket transcription partial frames transcript typescript python go">
        <div className="tut-hub-card-media tut-hub-card-media--blue" aria-hidden="true" />

        <div className="hp-io-method-card-body">
          <span className="hp-wn-badge hp-wn-badge-new">Dictation</span>
          <h3 className="hp-io-method-card-title">Build a Dictation Streaming Client</h3>

          <p className="hp-io-method-card-desc">
            Create a transcription session, stream audio, read partial frames, and print the final transcript.
          </p>

          <div className="hp-io-method-card-meta tut-hub-card-foot" aria-label="15 min, Intermediate, TypeScript, Python, Go">
            <div className="tut-hub-card-foot-meta">
              <span className="hp-io-method-card-meta-time">15 min</span>
              <span className="tut-hub-level">Intermediate</span>
            </div>

            <LangIcons langs="ts py go" />
          </div>
        </div>
      </a>
    </div>
  </section>

  <section className="tut-hub-section" id="all-tutorials" aria-labelledby="tut-hub-all-title">
    <h2 className="tut-hub-section-title" id="tut-hub-all-title">All Tutorials</h2>

    <p className="tut-hub-section-lead">
      Browse every hands-on tutorial, then filter by product or language when you need a narrower path.
    </p>

    <p className="tut-hub-filter-note" data-tut-filter-note hidden />

    <div className="hp-io-method-grid tut-hub-card-grid" data-tut-all-grid data-tut-collapsed>
      <a className="hp-io-method-card tut-hub-method-card" href="/documentation/tutorials/ambient-websocket-code-example" data-tut-card data-langs="ts py go" data-product="ambient streaming" data-search="ambient streaming client websocket pcm clinical note session authenticate typescript python go">
        <div className="tut-hub-card-media" aria-hidden="true" />

        <div className="hp-io-method-card-body">
          <span className="hp-wn-badge hp-wn-badge-new">Ambient</span>
          <h3 className="hp-io-method-card-title">Build an Ambient Streaming Client</h3>

          <p className="hp-io-method-card-desc">
            Authenticate, create a session, stream PCM audio over WebSocket, and retrieve clinical note results.
          </p>

          <div className="hp-io-method-card-meta tut-hub-card-foot" aria-label="20 min, Intermediate, TypeScript, Python, Go">
            <div className="tut-hub-card-foot-meta">
              <span className="hp-io-method-card-meta-time">20 min</span>
              <span className="tut-hub-level">Intermediate</span>
            </div>

            <LangIcons langs="ts py go" />
          </div>
        </div>
      </a>

      <a className="hp-io-method-card tut-hub-method-card" href="/documentation/tutorials/dictation-websocket-code-example" data-tut-card data-langs="ts py go" data-product="dictation streaming" data-search="dictation streaming client websocket transcription partial frames transcript typescript python go">
        <div className="tut-hub-card-media tut-hub-card-media--blue" aria-hidden="true" />

        <div className="hp-io-method-card-body">
          <span className="hp-wn-badge hp-wn-badge-new">Dictation</span>
          <h3 className="hp-io-method-card-title">Build a Dictation Streaming Client</h3>

          <p className="hp-io-method-card-desc">
            Create a transcription session, stream audio, read partial frames, and print the final transcript.
          </p>

          <div className="hp-io-method-card-meta tut-hub-card-foot" aria-label="15 min, Intermediate, TypeScript, Python, Go">
            <div className="tut-hub-card-foot-meta">
              <span className="hp-io-method-card-meta-time">15 min</span>
              <span className="tut-hub-level">Intermediate</span>
            </div>

            <LangIcons langs="ts py go" />
          </div>
        </div>
      </a>

      <a className="hp-io-method-card tut-hub-method-card" href="/documentation/tutorials/form-filling-websocket-code-example" data-tut-card data-langs="ts py go" data-product="form streaming" data-search="form filling session client template structured form data websocket typescript python go">
        <div className="tut-hub-card-media" aria-hidden="true" />

        <div className="hp-io-method-card-body">
          <span className="hp-wn-badge hp-wn-badge-new">Form Filling</span>
          <h3 className="hp-io-method-card-title">Build a Form Filling Session Client</h3>

          <p className="hp-io-method-card-desc">
            Create a Form filling session, send template context, stream audio, and retrieve structured form data.
          </p>

          <div className="hp-io-method-card-meta tut-hub-card-foot" aria-label="20 min, Intermediate, TypeScript, Python, Go">
            <div className="tut-hub-card-foot-meta">
              <span className="hp-io-method-card-meta-time">20 min</span>
              <span className="tut-hub-level">Intermediate</span>
            </div>

            <LangIcons langs="ts py go" />
          </div>
        </div>
      </a>

      <a className="hp-io-method-card tut-hub-method-card" href="/documentation/tutorials/web-sdk-ambient-react" data-tut-card data-langs="ts" data-product="ambient web-sdk use-case" data-search="web sdk ambient react suki provider auth manager sukiassistant encounter use case" data-tut-extra>
        <div className="tut-hub-card-media tut-hub-card-media--blue" aria-hidden="true" />

        <div className="hp-io-method-card-body">
          <TutCardBadges product="Ambient" />

          <h3 className="hp-io-method-card-title">Build a Web SDK Ambient Session</h3>

          <p className="hp-io-method-card-desc">
            Authenticate, initialize the Web SDK in React, and mount SukiAssistant for an ambient encounter.
          </p>

          <div className="hp-io-method-card-meta tut-hub-card-foot" aria-label="15 min, Intermediate, TypeScript">
            <div className="tut-hub-card-foot-meta">
              <span className="hp-io-method-card-meta-time">15 min</span>
              <span className="tut-hub-level">Intermediate</span>
            </div>

            <LangIcons langs="ts" />
          </div>
        </div>
      </a>

      <a className="hp-io-method-card tut-hub-method-card" href="/documentation/tutorials/headless-ambient-hooks" data-tut-card data-langs="ts" data-product="ambient headless use-case" data-search="headless web sdk ambient hooks useAuth useAmbient useAmbientSession react beta use case" data-tut-extra>
        <div className="tut-hub-card-media" aria-hidden="true" />

        <div className="hp-io-method-card-body">
          <TutCardBadges product="Ambient" />

          <h3 className="hp-io-method-card-title">Build a Headless Ambient Recorder</h3>

          <p className="hp-io-method-card-desc">
            Use Headless hooks to sign in, create an ambient session, and control recording in a custom React UI.
          </p>

          <div className="hp-io-method-card-meta tut-hub-card-foot" aria-label="20 min, Intermediate, TypeScript">
            <div className="tut-hub-card-foot-meta">
              <span className="hp-io-method-card-meta-time">20 min</span>
              <span className="tut-hub-level">Intermediate</span>
            </div>

            <LangIcons langs="ts" />
          </div>
        </div>
      </a>

      <a className="hp-io-method-card tut-hub-method-card" href="/documentation/tutorials/dictation-sdk-chart-field" data-tut-card data-langs="ts" data-product="dictation sdk use-case" data-search="dictation sdk chart field in-field mode react textarea beta use case" data-tut-extra>
        <div className="tut-hub-card-media tut-hub-card-media--blue" aria-hidden="true" />

        <div className="hp-io-method-card-body">
          <TutCardBadges product="Dictation" />

          <h3 className="hp-io-method-card-title">Build Dictation into a Chart Field</h3>

          <p className="hp-io-method-card-desc">
            Mount Dictation in-field mode on a chart textarea with one shared DictationClient in React.
          </p>

          <div className="hp-io-method-card-meta tut-hub-card-foot" aria-label="15 min, Intermediate, TypeScript">
            <div className="tut-hub-card-foot-meta">
              <span className="hp-io-method-card-meta-time">15 min</span>
              <span className="tut-hub-level">Intermediate</span>
            </div>

            <LangIcons langs="ts" />
          </div>
        </div>
      </a>

      <a className="hp-io-method-card tut-hub-method-card" href="/documentation/tutorials/form-filling-sdk-ehr-handoff" data-tut-card data-langs="ts" data-product="form sdk use-case" data-search="form filling sdk ehr handoff structured data correlation_id react webhook use case" data-tut-extra>
        <div className="tut-hub-card-media" aria-hidden="true" />

        <div className="hp-io-method-card-body">
          <TutCardBadges product="Form filling" />

          <h3 className="hp-io-method-card-title">Build a Form Filling Session with EHR Handoff</h3>

          <p className="hp-io-method-card-desc">
            Open a Form filling session and map structured\_data to your EHR using correlation\_id.
          </p>

          <div className="hp-io-method-card-meta tut-hub-card-foot" aria-label="20 min, Intermediate, TypeScript">
            <div className="tut-hub-card-foot-meta">
              <span className="hp-io-method-card-meta-time">20 min</span>
              <span className="tut-hub-level">Intermediate</span>
            </div>

            <LangIcons langs="ts" />
          </div>
        </div>
      </a>

      <a className="hp-io-method-card tut-hub-method-card" href="/documentation/tutorials/web-sdk-pbc-ambient" data-tut-card data-langs="ts" data-product="ambient web-sdk use-case pbc" data-search="problem based charting pbc web sdk ambient diagnoses isPBNSection use case" data-tut-extra>
        <div className="tut-hub-card-media" aria-hidden="true" />

        <div className="hp-io-method-card-body">
          <TutCardBadges product="Ambient" />

          <h3 className="hp-io-method-card-title">Build Problem-Based Charting in Web SDK</h3>

          <p className="hp-io-method-card-desc">
            Mount Web SDK ambient with a PBN section and seed EMR diagnoses for problem-based notes.
          </p>

          <div className="hp-io-method-card-meta tut-hub-card-foot" aria-label="20 min, Intermediate, TypeScript">
            <div className="tut-hub-card-foot-meta">
              <span className="hp-io-method-card-meta-time">20 min</span>
              <span className="tut-hub-level">Intermediate</span>
            </div>

            <LangIcons langs="ts" />
          </div>
        </div>
      </a>

      <a className="hp-io-method-card tut-hub-method-card" href="/documentation/tutorials/webhook-notification-receiver" data-tut-card data-langs="ts py" data-product="webhooks use-case" data-search="webhook notification receiver hmac signature partner events success failure typescript python use case" data-tut-extra>
        <div className="tut-hub-card-media tut-hub-card-media--blue" aria-hidden="true" />

        <div className="hp-io-method-card-body">
          <TutCardBadges product="APIs" />

          <h3 className="hp-io-method-card-title">Build a Webhook Notification Receiver</h3>

          <p className="hp-io-method-card-desc">
            Verify HMAC signatures, parse partner notifications, and handle success and failure events.
          </p>

          <div className="hp-io-method-card-meta tut-hub-card-foot" aria-label="10 min, Beginner, TypeScript, Python">
            <div className="tut-hub-card-foot-meta">
              <span className="hp-io-method-card-meta-time">10 min</span>
              <span className="tut-hub-level">Beginner</span>
            </div>

            <LangIcons langs="ts py" />
          </div>
        </div>
      </a>
    </div>

    <button type="button" className="suki-use-case-press-load-more" data-tut-load-more>
      Load more
    </button>
  </section>
</div>
