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

# Cookbooks

> Short recipes for common Suki integration problems. Each cookbook solves one task with copy-paste code.

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 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>;

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 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>}
  </div>;

export const CookbookBadges = ({workflow, surface}) => {
  const surfaces = String(surface || '').split('·').map(s => s.trim()).filter(Boolean);
  const surfaceClass = label => {
    const key = label.toLowerCase().replace(/\s+/g, '-');
    if (key === 'api') return 'cookbook-hub-badge-surface--api';
    if (key === 'sdk' || key === 'web-sdk') return 'cookbook-hub-badge-surface--sdk';
    if (key === 'tutorial') return 'cookbook-hub-badge-surface--tutorial';
    return 'cookbook-hub-badge-surface--api';
  };
  return <div className="tut-hub-card-badges">
      {workflow ? <span className="hp-wn-badge hp-wn-badge-new">{workflow}</span> : null}
      {surfaces.map(label => <span key={label} className={`hp-wn-badge cookbook-hub-badge-surface ${surfaceClass(label)}`}>
          {label}
        </span>)}
    </div>;
};

<div className="hp-wrap cookbook-hp-wrap tut-hub-wrap cookbook-hub-wrap" data-disable-read-time="true" data-tut-hub data-cookbook-hub>
  <div className="sdk-overview-container">
    <h1 id="cookbook-hub-page-title" className="sdk-overview-main-title">
      Cookbooks
    </h1>

    <p className="sdk-overview-text">
      Cookbooks are short recipes for common Suki integration problems. Each cookbook solves one task with copy-paste code examples. Use tutorials when you need a full end-to-end lesson.
    </p>

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

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

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

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

          <div className="release-notes-filter-dropdown" data-tut-dropdown="product">
            <button type="button" id="cookbook-hub-product-trigger" className="release-notes-filter-dropdown-trigger" aria-haspopup="listbox" aria-expanded="false" aria-controls="cookbook-hub-product-listbox" aria-labelledby="cookbook-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="cookbook-hub-product-listbox" className="release-notes-filter-dropdown-list" role="listbox" aria-labelledby="cookbook-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">12</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">7</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="authentication" aria-selected="false">
                  <span className="tut-hub-filter-opt-label">Authentication</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>
            </ul>
          </div>
        </div>

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

          <div className="release-notes-filter-dropdown" data-tut-dropdown="lang">
            <button type="button" id="cookbook-hub-lang-trigger" className="release-notes-filter-dropdown-trigger" aria-haspopup="listbox" aria-expanded="false" aria-controls="cookbook-hub-lang-listbox" aria-labelledby="cookbook-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="cookbook-hub-lang-listbox" className="release-notes-filter-dropdown-list" role="listbox" aria-labelledby="cookbook-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">12</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">12</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">11</span>
                </button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <section className="tut-hub-section cookbook-hub-featured" aria-label="Featured Cookbooks and Tutorial">
      <div className="cookbook-hub-featured-split">
        <div className="cookbook-hub-featured-col">
          <h2 className="tut-hub-section-title cookbook-hub-col-title" id="cookbook-hub-featured-title">Featured Cookbooks</h2>

          <div className="cookbook-hub-featured-list">
            <a className="cookbook-hub-list-card" href="/documentation/cookbooks/pass-emr-encounter-id" data-tut-card data-tut-featured data-langs="ts py" data-product="ambient" data-search="emr encounter id shared note composition interoperability mobile web api">
              <div className="cookbook-hub-list-card-top">
                <h3 className="cookbook-hub-list-card-title">Share One Note Across Products</h3>
              </div>

              <p className="cookbook-hub-list-card-desc">
                Share one note with emr\_encounter\_id.
              </p>

              <div className="cookbook-hub-list-card-foot" aria-label="Ambient, 5 min, TypeScript, Python">
                <div className="tut-hub-card-foot-meta">
                  <span className="hp-wn-badge hp-wn-badge-new">Ambient</span>
                  <span className="hp-io-method-card-meta-time">5 min</span>
                </div>

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

            <a className="cookbook-hub-list-card" href="/documentation/cookbooks/resolve-session-conflict" data-tut-card data-tut-featured data-langs="ts py" data-product="ambient" data-search="remote session conflict end session modality create retry">
              <div className="cookbook-hub-list-card-top">
                <h3 className="cookbook-hub-list-card-title">Clear a Remote Session Conflict</h3>
              </div>

              <p className="cookbook-hub-list-card-desc">
                End remote session, then retry.
              </p>

              <div className="cookbook-hub-list-card-foot" aria-label="Ambient, 5 min, TypeScript, Python">
                <div className="tut-hub-card-foot-meta">
                  <span className="hp-wn-badge hp-wn-badge-new">Ambient</span>
                  <span className="hp-io-method-card-meta-time">5 min</span>
                </div>

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

            <a className="cookbook-hub-list-card" href="/documentation/cookbooks/bearer-provider-id-on-login" data-tut-card data-tut-featured data-langs="ts py" data-product="authentication" data-search="bearer provider id login register partner token">
              <div className="cookbook-hub-list-card-top">
                <h3 className="cookbook-hub-list-card-title">Add provider\_id to Bearer Login</h3>
              </div>

              <p className="cookbook-hub-list-card-desc">
                Send provider\_id on Bearer login.
              </p>

              <div className="cookbook-hub-list-card-foot" aria-label="Authentication, 5 min, TypeScript, Python">
                <div className="tut-hub-card-foot-meta">
                  <span className="hp-wn-badge hp-wn-badge-new">Authentication</span>
                  <span className="hp-io-method-card-meta-time">5 min</span>
                </div>

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

        <div className="cookbook-hub-featured-col">
          <h2 className="tut-hub-section-title cookbook-hub-col-title" id="cookbook-hub-spotlight-title">Featured Tutorial</h2>

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

            <div className="hp-io-method-card-body">
              <CookbookBadges workflow="Ambient" surface="Tutorial" />

              <h3 className="hp-io-method-card-title">Build an Ambient Streaming Client</h3>

              <p className="hp-io-method-card-desc">
                Stream ambient audio, then retrieve notes.
              </p>

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

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

    <section className="tut-hub-section" id="all-cookbooks" aria-labelledby="cookbook-hub-all-title">
      <h2 className="tut-hub-section-title" id="cookbook-hub-all-title">All Cookbooks</h2>

      <p className="tut-hub-section-lead">
        Browse every cookbook. Filter by product or language when you know which use case you are building against.
      </p>

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

      <div className="hp-io-method-grid tut-hub-card-grid" data-cookbook-all-grid data-tut-collapsed>
        <a className="hp-io-method-card tut-hub-method-card" href="/documentation/cookbooks/pass-emr-encounter-id" data-tut-card data-langs="ts py" data-product="ambient" data-search="emr encounter id shared note composition interoperability mobile web api">
          <div className="tut-hub-card-media" aria-hidden="true" />

          <div className="hp-io-method-card-body">
            <CookbookBadges workflow="Ambient" surface="API" />

            <h3 className="hp-io-method-card-title">Share One Note Across Products</h3>

            <p className="hp-io-method-card-desc cookbook-hub-card-desc">
              Share one note with emr\_encounter\_id.
            </p>

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

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

        <a className="hp-io-method-card tut-hub-method-card" href="/documentation/cookbooks/resolve-session-conflict" data-tut-card data-langs="ts py" data-product="ambient" data-search="remote session conflict end session modality create retry">
          <div className="tut-hub-card-media tut-hub-card-media--blue" aria-hidden="true" />

          <div className="hp-io-method-card-body">
            <CookbookBadges workflow="Ambient" surface="API" />

            <h3 className="hp-io-method-card-title">Clear a Remote Session Conflict</h3>

            <p className="hp-io-method-card-desc cookbook-hub-card-desc">
              End remote session, then retry.
            </p>

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

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

        <a className="hp-io-method-card tut-hub-method-card" href="/documentation/cookbooks/get-note-content-by-composition-id" data-tut-card data-langs="ts py" data-product="ambient" data-search="composition id note id get note content retrieve">
          <div className="tut-hub-card-media" aria-hidden="true" />

          <div className="hp-io-method-card-body">
            <CookbookBadges workflow="Ambient" surface="API" />

            <h3 className="hp-io-method-card-title">Fetch Note Content with composition\_id</h3>

            <p className="hp-io-method-card-desc cookbook-hub-card-desc">
              Retrieve the note with composition\_id.
            </p>

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

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

        <a className="hp-io-method-card tut-hub-method-card" href="/documentation/cookbooks/wait-for-status-before-retrieve" data-tut-card data-langs="ts py" data-product="ambient" data-search="poll status completed retrieve empty content generation">
          <div className="tut-hub-card-media tut-hub-card-media--blue" aria-hidden="true" />

          <div className="hp-io-method-card-body">
            <CookbookBadges workflow="Ambient" surface="API" />

            <h3 className="hp-io-method-card-title">Poll Session Status Before Fetching Content</h3>

            <p className="hp-io-method-card-desc cookbook-hub-card-desc">
              Poll until status is completed.
            </p>

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

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

        <a className="hp-io-method-card tut-hub-method-card" href="/documentation/cookbooks/seed-patient-context-for-web-sdk" data-tut-card data-langs="ts py" data-product="ambient" data-search="seed patient context web sdk profile mount empty" data-tut-extra>
          <div className="tut-hub-card-media" aria-hidden="true" />

          <div className="hp-io-method-card-body">
            <CookbookBadges workflow="Ambient" surface="API · Web SDK" />

            <h3 className="hp-io-method-card-title">Seed Patient Context for the Web SDK</h3>

            <p className="hp-io-method-card-desc cookbook-hub-card-desc">
              Seed patient context for Web SDK.
            </p>

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

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

        <a className="hp-io-method-card tut-hub-method-card" href="/documentation/cookbooks/bearer-provider-id-on-login" data-tut-card data-langs="ts py" data-product="authentication" data-search="bearer provider id login register partner token" data-tut-extra>
          <div className="tut-hub-card-media tut-hub-card-media--blue" aria-hidden="true" />

          <div className="hp-io-method-card-body">
            <CookbookBadges workflow="Authentication" surface="API" />

            <h3 className="hp-io-method-card-title">Add provider\_id to Bearer Login</h3>

            <p className="hp-io-method-card-desc cookbook-hub-card-desc">
              Send provider\_id on Bearer login.
            </p>

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

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

        <a className="hp-io-method-card tut-hub-method-card" href="/documentation/cookbooks/dictation-onsubmit-chart-field" data-tut-card data-langs="ts" data-product="dictation" data-search="dictation onsubmit chart field ehr write text" data-tut-extra>
          <div className="tut-hub-card-media" aria-hidden="true" />

          <div className="hp-io-method-card-body">
            <CookbookBadges workflow="Dictation" surface="SDK" />

            <h3 className="hp-io-method-card-title">Write Dictation Text to an EHR Field</h3>

            <p className="hp-io-method-card-desc cookbook-hub-card-desc">
              Write Dictation text with onSubmit.
            </p>

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

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

        <a className="hp-io-method-card tut-hub-method-card" href="/documentation/cookbooks/end-ambient-after-streaming" data-tut-card data-langs="ts py" data-product="ambient" data-search="end ambient session RU9G websocket close rest" data-tut-extra>
          <div className="tut-hub-card-media tut-hub-card-media--blue" aria-hidden="true" />

          <div className="hp-io-method-card-body">
            <CookbookBadges workflow="Ambient" surface="API" />

            <h3 className="hp-io-method-card-title">End Ambient After Streaming</h3>

            <p className="hp-io-method-card-desc cookbook-hub-card-desc">
              Send RU9G, then end session.
            </p>

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

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

        <a className="hp-io-method-card tut-hub-method-card" href="/documentation/cookbooks/browser-websocket-auth" data-tut-card data-langs="ts py" data-product="ambient" data-search="browser websocket auth sec-websocket-protocol SukiAmbientAuth" data-tut-extra>
          <div className="tut-hub-card-media" aria-hidden="true" />

          <div className="hp-io-method-card-body">
            <CookbookBadges workflow="Ambient" surface="API" />

            <h3 className="hp-io-method-card-title">Authenticate Browser WebSocket Handshake</h3>

            <p className="hp-io-method-card-desc cookbook-hub-card-desc">
              Auth browser WebSocket with protocols.
            </p>

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

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

        <a className="hp-io-method-card tut-hub-method-card" href="/documentation/cookbooks/register-then-login" data-tut-card data-langs="ts py" data-product="authentication" data-search="register then login provider_not_registered suki_token" data-tut-extra>
          <div className="tut-hub-card-media tut-hub-card-media--blue" aria-hidden="true" />

          <div className="hp-io-method-card-body">
            <CookbookBadges workflow="Authentication" surface="API" />

            <h3 className="hp-io-method-card-title">Register Provider Then Login</h3>

            <p className="hp-io-method-card-desc cookbook-hub-card-desc">
              Register first, then call login.
            </p>

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

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

        <a className="hp-io-method-card tut-hub-method-card" href="/documentation/cookbooks/end-dictation-with-audio-end" data-tut-card data-langs="ts py" data-product="dictation" data-search="dictation AUDIO_END websocket end transcription session" data-tut-extra>
          <div className="tut-hub-card-media" aria-hidden="true" />

          <div className="hp-io-method-card-body">
            <CookbookBadges workflow="Dictation" surface="API" />

            <h3 className="hp-io-method-card-title">End Dictation with AUDIO\_END</h3>

            <p className="hp-io-method-card-desc cookbook-hub-card-desc">
              Use AUDIO\_END, not ambient RU9G.
            </p>

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

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

        <a className="hp-io-method-card tut-hub-method-card" href="/documentation/cookbooks/verify-webhook-hmac-signature" data-tut-card data-langs="ts py" data-product="webhooks" data-search="webhook hmac signature X-API-Key generated-at raw body" data-tut-extra>
          <div className="tut-hub-card-media tut-hub-card-media--blue" aria-hidden="true" />

          <div className="hp-io-method-card-body">
            <CookbookBadges workflow="Webhooks" surface="API" />

            <h3 className="hp-io-method-card-title">Verify Webhook HMAC Signature</h3>

            <p className="hp-io-method-card-desc cookbook-hub-card-desc">
              Verify HMAC before parsing JSON.
            </p>

            <div className="hp-io-method-card-meta tut-hub-card-foot" aria-label="5 min, TypeScript, Python">
              <div className="tut-hub-card-foot-meta">
                <span className="hp-io-method-card-meta-time">5 min</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>
</div>
