> ## 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 Web SDK

> Embed Suki's ambient intelligence capabilities in your web app with pre-built UI components

export const SdkAvailableIn = ({platforms = ""}) => {
  const PLATFORM_META = {
    javascript: {
      title: "JavaScript",
      brand: "javascript",
      src: "/documentation/assets/lang-icons/javascript.svg"
    },
    react: {
      title: "React",
      brand: "react",
      src: "/documentation/assets/lang-icons/react.svg"
    },
    swift: {
      title: "Swift",
      brand: "swift",
      src: "/documentation/assets/lang-icons/swift.svg"
    }
  };
  const keys = Array.isArray(platforms) ? platforms.map(key => String(key).toLowerCase().trim()).filter(Boolean) : String(platforms || "").split(",").map(key => key.toLowerCase().trim()).filter(Boolean);
  const items = keys.map(key => PLATFORM_META[key]).filter(Boolean);
  if (!items.length) return null;
  const label = items.map(item => item.title).join(", ");
  return <div className="sdk-intro-available" aria-label={`Available in ${label}`}>
      <span className="sdk-intro-available__label">Available in</span>
      <span className="sdk-intro-available__icons">
        {items.map(item => <span key={item.brand} className="sdk-intro-available__icon" title={item.title} data-platform-brand={item.brand}>
            <img src={item.src} alt="" width="14" height="14" noZoom />
          </span>)}
      </span>
    </div>;
};

export const AgentPrompt = ({id, collapseAfter = 2}) => {
  const [expanded, setExpanded] = useState(false);
  const [copied, setCopied] = useState(false);
  const __AGENT_PROMPT_DATA__ = {
    "DOCS_ORIGIN": "https://developer.suki.ai",
    "AGENT_PROMPTS": {
      "web-sdk": {
        "path": "web-sdk",
        "skillIds": ["suki-web-sdk"],
        "intro": "Help me add the Suki Web SDK to my web app so clinicians can run Ambient sessions with Suki's pre-built UI. I am a Suki partner with `partnerId` and `partnerToken`. Then:",
        "steps": ["Install `@suki-sdk/react` and `@suki-sdk/core` for React, or `@suki-sdk/js` and `@suki-sdk/core` for JavaScript.", "Create `SukiAuthManager` with `partnerId`, `partnerToken`, and provider fields, then initialize the SDK.", "Mount `SukiAssistant` (React) or the JS mount API with encounter context and run an Ambient session end to end.", "Handle note submission and write results back to my EHR when applicable."]
      },
      "headless-web-sdk": {
        "path": "headless-web-sdk",
        "skillIds": ["suki-headless-web-sdk"],
        "intro": "Help me add the Suki Headless Web SDK to my React app so I own the UI and use hooks for Ambient auth, sessions, and recording. I am a Suki partner with `partnerId` and `partnerToken`. Then:",
        "steps": ["Install `@suki-sdk/platform-react`.", "Create a `PlatformClient` and wrap the app with `PlatformClientProvider`.", "Authenticate with `useAuth`, create a session with `useAmbient`, then control recording with `useAmbientSession` (start, pause, resume, submit).", "Wire a minimal end-to-end Ambient flow and handle note retrieval or EHR write-back."]
      },
      "mobile-sdk": {
        "path": "mobile-sdk",
        "skillIds": ["suki-mobile-sdk"],
        "intro": "Help me add the Suki Mobile SDK to my native iOS app for Ambient documentation. I build the UI; the SDK manages sessions, recording, and note generation. I am a Suki partner with Partner credentials. Then:",
        "steps": ["Download `SukiAmbientCore.framework`, add it to Xcode, and set Embed and Sign.", "Add `NSMicrophoneUsageDescription` to `Info.plist`.", "Configure the SDK with Partner credentials and a `TokenProvider` that returns a valid Partner Token.", "Create an Ambient session, start and stop recording, then retrieve generated note content for EHR write-back."]
      },
      "dictation-sdk": {
        "path": "dictation-sdk",
        "skillIds": ["suki-dictation-sdk"],
        "intro": "Help me add the Suki Dictation SDK to my web app with Suki's hosted iframe UI for In-field or Scratchpad Dictation. I am a Suki partner with `partnerId` and `partnerToken`. Then:",
        "steps": ["Install `@suki-sdk/dictation` and `@suki-sdk/core` for JavaScript, or `@suki-sdk/dictation-react`, `@suki-sdk/dictation`, and `@suki-sdk/core` for React.", "Create a long-lived `SukiAuthManager` and one `DictationClient` per page scope (do not recreate on every render).", "Mount In-field or Scratchpad Dictation with encounter context and handle transcript callbacks into chart fields.", "Reuse the same client across fields; only change the target field or container."]
      },
      "form-filling-sdk": {
        "path": "form-filling-sdk",
        "skillIds": ["suki-form-filling-sdk"],
        "intro": "Help me add the Suki Form filling SDK to my web app so clinicians can complete Medical form templates by voice with Suki's hosted iframe UI. I am a Suki partner with `partnerId`, `partnerToken`, and `form_template_ids`. Then:",
        "steps": ["Install `@suki-sdk/form-filling` and `@suki-sdk/core` for JavaScript, or `@suki-sdk/form-filling-react` and `@suki-sdk/core` for React.", "Create `SukiAuthManager` and `FormFillingClient` with Partner credentials.", "Start a session with `form_template_ids` and my encounter ID as `correlation_id`.", "Handle submit callbacks or webhook results and map structured form data into my EHR."]
      },
      "ambient": {
        "path": "documentation/concepts/ambient-clinical-notes",
        "skillIds": ["suki-ambient"],
        "intro": "Help me integrate Suki Ambient clinical documentation so I can generate structured clinical notes from patient-provider conversations. I am a Suki partner. Choose the right path (Partner APIs or an SDK), then:",
        "steps": ["Confirm Partner onboarding, JWKS, and credentials for staging (`https://sdp.suki-stage.com`).", "Create an ambient session, optionally seed visit context, then stream audio over `/ws/stream`.", "End the session, wait for processing (poll status or webhook), then retrieve note content and transcript.", "If I need a headed UI, use the Web SDK; if I own the UI in React, use the Headless Web SDK; for iOS, use the Mobile SDK."]
      },
      "form-filling": {
        "path": "documentation/concepts/form-filling",
        "skillIds": ["suki-form-filling"],
        "intro": "Help me integrate Suki Form filling so I can capture structured medical form data from visit conversation. I am a Suki partner with Medical form template IDs (`form_template_id` UUIDs). Then:",
        "steps": ["Choose Partner APIs, the Form filling SDK, or Form filling inside the Web SDK based on whether I own the UI.", "Create a Form filling session and provide `form_template_id` values (or a partner dynamic form schema) before streaming.", "Stream audio over `/ws/stream` with the Form filling `ambient_session_id`, then end the session.", "Retrieve structured form output and map fields into my EHR."]
      },
      "dictation": {
        "path": "documentation/concepts/dictation",
        "skillIds": ["suki-dictation"],
        "intro": "Help me integrate Suki Audio Dictation so providers can convert speech into real-time text in my application. I am a Suki partner. Then:",
        "steps": ["Choose Partner APIs, the Dictation SDK, or Dictation inside the Web SDK based on whether I own the UI.", "Create a Dictation session, then stream audio over WebSocket.", "Handle partial and final transcript frames and place text into the target chart field or UI.", "Complete the stream cleanly and end the session with REST when finished."]
      },
      "patient-summary": {
        "path": "documentation/concepts/patient-summary",
        "skillIds": ["suki-patient-summary"],
        "intro": "Help me integrate Suki Patient Summary so I can generate pre-visit and full patient summaries from Clinical Knowledge Graph (CKG) data. I am a Suki partner. Then:",
        "steps": ["Authenticate and obtain an `sdp_suki_token`.", "Request a CKG upload URL, upload a FHIR R4 bundle, and poll ingestion status until complete.", "Trigger summary generation for an encounter and practitioner pair, then poll job status.", "Retrieve the full Patient Summary or pre-visit section (or show it on the Web SDK patient profile)."]
      },
      "audio-streaming": {
        "path": "documentation/how-to/audio-streaming",
        "skillIds": ["suki-audio-streaming"],
        "intro": "Help me implement Suki Partner API audio streaming so I can create a session, open a WebSocket, send live audio frames, and complete the session cleanly. I am a Suki partner. Then:",
        "steps": ["Authenticate and create an Ambient or Dictation session with REST to get the session ID.", "Open `wss://sdp.suki-stage.com/ws/stream` (or production) and send JSON text frames for that product's wire format.", "Send audio as required (for example LINEAR16 PCM for Ambient), plus control events for the product.", "End the stream cleanly, finish the session with REST, then retrieve results or wait for a webhook."]
      },
      "webhooks": {
        "path": "documentation/webhook",
        "skillIds": ["suki-webhooks"],
        "intro": "Help me add a Suki notification webhook so my app receives push events when Ambient sessions complete or fail. I am a Suki partner with a signing secret from onboarding. Then:",
        "steps": ["Provide Suki an HTTPS callback URL during partner onboarding (one URL per partner).", "Implement a POST endpoint that verifies the HMAC signature with my partner secret.", "Parse the event payload, process supported event types, and return a successful HTTP response.", "Test with a real Ambient session end-to-end and handle retries safely."]
      },
      "faqs": {
        "path": "documentation/references/faqs",
        "skillIds": [],
        "intro": "Help me answer common Suki for Partners integration questions using the published FAQ topics. Prefer official docs over guesses. Then:",
        "steps": ["Connect Documentation MCP: `https://developer.suki.ai/documentation/references/mcp`.", "Use `https://developer.suki.ai/llms.txt` to find the right FAQ or guide page.", "Start from this FAQs hub and open the matching topic (general, authentication, security, Ambient, Form filling, Dictation, SDKs, or webhooks).", "Cite the FAQ or guide URL in your answer, and escalate to partner support only when the docs do not cover the question."]
      },
      "api-reference": {
        "path": "api-reference/overview",
        "skillIds": ["suki-ambient-api", "suki-dictation-api"],
        "intro": "Help me integrate Suki Ambient and Dictation Partner APIs so I can create sessions, stream audio over WebSocket, and retrieve notes or transcripts. I am a Suki partner. Then:",
        "steps": ["Authenticate and obtain an `sdp_suki_token` on staging (`https://sdp.suki-stage.com`).", "For Ambient: create a session, stream over `/ws/stream`, end the session, then retrieve note content (or use a webhook).", "For Dictation: create a Dictation session, stream audio, and handle partial and final transcript frames.", "Follow the Ambient API quickstart for a complete staging script before production."]
      },
      "form-filling-api": {
        "path": "form-filling-api-reference/overview",
        "skillIds": ["suki-form-filling-api"],
        "intro": "Help me integrate Suki Form filling Partner APIs so I can create Form filling sessions, stream audio, and retrieve structured form output. I am a Suki partner with `form_template_id` values (or a dynamic form schema). Then:",
        "steps": ["Authenticate and obtain an `sdp_suki_token` on staging.", "Create a Form filling session and seed `form_template_id` (or partner schema) context.", "Stream audio over `/ws/stream` using the Form filling `ambient_session_id`, then end the session.", "Retrieve structured form output (or rely on a webhook) and map fields into my EHR."]
      },
      "patient-summary-api": {
        "path": "patient-summary-api-reference/overview",
        "skillIds": ["suki-patient-summary-api"],
        "intro": "Help me integrate Suki Patient Summary Partner APIs so I can ingest FHIR into CKG, generate summaries, and retrieve structured sections. I am a Suki partner. Then:",
        "steps": ["Authenticate and obtain an `sdp_suki_token`.", "Request a CKG upload URL, upload a FHIR R4 bundle, and poll ingestion status.", "Trigger summary generation for an encounter and practitioner pair, then poll the job.", "Retrieve the full Patient Summary or pre-visit section from the Summaries APIs."]
      }
    }
  };
  const entry = id ? __AGENT_PROMPT_DATA__.AGENT_PROMPTS[id] : null;
  if (!entry) {
    return <div className="suki-agent-prompt suki-agent-prompt--error" data-suki-agent-prompt>
        <div className="suki-agent-prompt__body">
          <p className="suki-agent-prompt__intro">
            Agent Prompt <code>{id || "(missing id)"}</code> is not in the registry. Run{" "}
            <code>npm run sync:agent-prompts</code>.
          </p>
        </div>
      </div>;
  }
  const docsOrigin = __AGENT_PROMPT_DATA__.DOCS_ORIGIN || "https://developer.suki.ai";
  const skillIds = Array.isArray(entry.skillIds) ? entry.skillIds : [];
  let skillCmd = `npx skills add ${docsOrigin}`;
  for (let i = 0; i < skillIds.length; i++) {
    skillCmd += ` --skill ${skillIds[i]}`;
  }
  const intro = entry.intro || "";
  const steps = [];
  if (skillIds.length > 0) {
    steps.push(`Run \`${skillCmd}\`.`);
  }
  if (Array.isArray(entry.steps)) {
    for (let i = 0; i < entry.steps.length; i++) steps.push(entry.steps[i]);
  }
  const reference = `${docsOrigin}/${entry.path}.md`;
  const renderInlineCode = text => {
    if (!text) return null;
    const parts = String(text).split(/(`[^`]+`)/g);
    return parts.map((part, i) => {
      if (part.startsWith("`") && part.endsWith("`") && part.length > 2) {
        return <code className="suki-agent-prompt__code" key={i}>
            {part.slice(1, -1)}
          </code>;
      }
      return part ? <span key={i}>{part}</span> : null;
    });
  };
  const copyText = (() => {
    const lines = [intro, ""];
    steps.forEach((step, i) => {
      lines.push(`${i + 1}. ${step}`);
    });
    if (reference) {
      lines.push("");
      lines.push("REFERENCE");
      lines.push(reference);
    }
    return lines.join("\n");
  })();
  const canCollapse = steps.length > collapseAfter;
  const visibleSteps = !canCollapse || expanded ? steps : steps.slice(0, collapseAfter);
  const handleCopy = () => {
    const done = () => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    };
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(copyText).then(done).catch(() => {});
      return;
    }
    const textarea = document.createElement("textarea");
    textarea.value = copyText;
    textarea.setAttribute("readonly", "");
    textarea.style.position = "fixed";
    textarea.style.left = "-9999px";
    document.body.appendChild(textarea);
    textarea.select();
    try {
      document.execCommand("copy");
      done();
    } catch (e) {} finally {
      document.body.removeChild(textarea);
    }
  };
  return <div className={`suki-agent-prompt${canCollapse && !expanded ? " is-collapsed" : ""}${copied ? " is-copied" : ""}`} data-suki-agent-prompt data-agent-prompt-id={id}>
      <div className="suki-agent-prompt__header">
        <span className="suki-agent-prompt__label">
          Using AI coding tools, Try Agent prompt
        </span>
        <button type="button" className="suki-agent-prompt__copy size-6.5 flex items-center justify-center rounded-md group/copy-button" onClick={handleCopy} aria-label={copied ? "Copied" : "Copy agent prompt"} data-tooltip={copied ? "Copied" : "Copy"}>
          {copied ? <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4 shrink-0 text-primary dark:text-primary-light">
              <path d="M2.75 9.5L6.5 13.25L15.25 4.5" />
            </svg> : <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4 shrink-0 text-gray-400 group-hover/copy-button:text-gray-500 dark:text-white/40 dark:group-hover/copy-button:text-white/60">
              <path d="M14.25 5.25H7.25C6.14543 5.25 5.25 6.14543 5.25 7.25V14.25C5.25 15.3546 6.14543 16.25 7.25 16.25H14.25C15.3546 16.25 16.25 15.3546 16.25 14.25V7.25C16.25 6.14543 15.3546 5.25 14.25 5.25Z" />
              <path d="M2.80103 11.998L1.77203 5.07397C1.61003 3.98097 2.36403 2.96397 3.45603 2.80197L10.38 1.77297C11.313 1.63397 12.19 2.16297 12.528 3.00097" />
            </svg>}
        </button>
      </div>

      <div className="suki-agent-prompt__body">
        <div className={`suki-agent-prompt__shimmer not-prose${canCollapse && !expanded ? " is-shimmering" : ""}`}>
          {intro ? <p className="suki-agent-prompt__intro">{renderInlineCode(intro)}</p> : null}
          {visibleSteps.length > 0 ? <ol className="suki-agent-prompt__steps">
              {visibleSteps.map((step, i) => <li key={i}>{renderInlineCode(step)}</li>)}
            </ol> : null}
        </div>
        {reference && (!canCollapse || expanded) ? <div className="suki-agent-prompt__reference">
            <div className="suki-agent-prompt__reference-label">REFERENCE</div>
            <a className="link" href={reference} target="_blank" rel="noopener noreferrer">
              {reference}
            </a>
          </div> : null}
        {canCollapse && !expanded ? <div className="suki-agent-prompt__fade" aria-hidden="true" /> : null}
      </div>

      {canCollapse ? <div className="suki-agent-prompt__footer">
          <button type="button" className="suki-agent-prompt__toggle" onClick={() => setExpanded(v => !v)} aria-expanded={expanded}>
            <span>{expanded ? "Show less" : "Show more"}</span>
            <svg className={`suki-agent-prompt__chevron${expanded ? " is-up" : ""}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
              <polyline points="6 9 12 15 18 9" />
            </svg>
          </button>
        </div> : null}
    </div>;
};

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

<div className="web-sdk-intro">
  <div className="web-sdk-intro__copy">
    <p>
      Integrate with the Suki Web SDK to get Suki's ACI capabilities, such as Ambient documentation, in a headed JavaScript and React SDK with components, APIs, and hooks, and embed a pre-built clinician UI in your web app.
    </p>

    <SdkAvailableIn platforms="javascript,react" />

    <p className="web-sdk-intro__usecase">
      <a href="/documentation/get-started/use-case?workflow=ambient">Find your use case →</a>
    </p>
  </div>

  <div className="web-sdk-intro__visual">
    <img className="sdk-intro-img sdk-intro-img--light" src="https://mintcdn.com/suki-1e08f176/lvYgcCHuTl-P7Ja6/web-sdk/assets/web-sdk-intro.png?fit=max&auto=format&n=lvYgcCHuTl-P7Ja6&q=85&s=db9275ce88aef993506427134789009f" alt="Suki Web SDK Ambient assistant embedded in a clinical note" width="2800" height="1640" data-path="web-sdk/assets/web-sdk-intro.png" />

    <img className="sdk-intro-img sdk-intro-img--dark" src="https://mintcdn.com/suki-1e08f176/lvYgcCHuTl-P7Ja6/web-sdk/assets/web-sdk-intro-dark.png?fit=max&auto=format&n=lvYgcCHuTl-P7Ja6&q=85&s=cf2cfecb08427e45d578fba5b491b4ca" alt="Suki Web SDK Ambient assistant embedded in a clinical note" width="2800" height="1640" data-path="web-sdk/assets/web-sdk-intro-dark.png" />
  </div>
</div>

<Callout icon="handshake" color="orange">
  **Are you a Suki partner?**

  To use any Suki API or SDK, you must be a Suki partner. Contact the partnership team to begin the onboarding process. They help you set up your authentication system and get started with the Suki APIs and SDKs.

  <div style={{ marginTop: '0.75rem' }}>
    <a className="doc-guide-btn partner-contact-cta" href="https://www.suki.ai/contact-us/" target="_blank" rel="noopener noreferrer">
      Contact Partnership Team
    </a>
  </div>
</Callout>

<AgentPrompt id="web-sdk" />

## Get started

Confirm requirements, install the SDK, authenticate, and run your first Ambient session.

<Columns cols={3}>
  <Card title="Introduction" icon="book" href="/web-sdk/overview" arrow={true}>
    <p>Learn how the Web SDK works and when to use it in your application.</p>
  </Card>

  <Card title="Prerequisites" icon="list-check" href="/web-sdk/prerequisites" arrow={true}>
    <p>Confirm Partner credentials, browser support, and setup requirements before you install.</p>
  </Card>

  <Card title="Install the SDK" icon="download" href="/web-sdk/installation" arrow={true}>
    <p>Install the JavaScript or React package and add the SDK to your application.</p>
  </Card>

  <Card title="Authenticate" icon="key" href="/web-sdk/authentication" arrow={true}>
    <p>Learn how Partner Tokens and provider identity work in the Web SDK.</p>
  </Card>

  <Card title="Run Your First Session" icon="rocket" href="/web-sdk/quickstart" arrow={true}>
    <p>Initialize, mount, and run the Web SDK session end to end.</p>
  </Card>
</Columns>

## Choose a workflow

Choose the clinician workflow you want to add first. Use Ambient to capture visits. Add Dictation or Form filling when your application needs those flows.

<Columns cols={3}>
  <Card title="Ambient" icon="file-medical" href="/web-sdk/guides/ambient" arrow={true}>
    <p>Learn how Ambient sessions capture conversations and generate clinical notes.</p>
  </Card>

  <Card title="Dictation" icon="microphone" href="/web-sdk/dictation-overview" arrow={true}>
    <p>Use built-in Dictation while clinicians create or edit notes.</p>
  </Card>

  <Card title="Form Filling" icon="file-pen" href="/web-sdk/form-filling-overview" arrow={true}>
    <p>Capture structured medical form data with Form filling in the Web SDK.</p>
  </Card>

  <Card title="Patient Summary" icon="list-check" href="/web-sdk/guides/patient-summary" arrow={true}>
    <p>Show pre-visit Patient Summary on the headed patient profile.</p>
  </Card>
</Columns>

## Build and customize Web SDK

After your workflow is running, wire the session lifecycle, handle note submission, and adapt the UI to your application.

<Columns cols={3}>
  <Card title="Create Session" icon="play" href="/web-sdk/guides/ambient-implementation" arrow={true}>
    <p>Create an Ambient session, start recording, and pass encounter context.</p>
  </Card>

  <Card title="Session Status and Events" icon="clock" href="/web-sdk/guides/ambient-session-status" arrow={true}>
    <p>Track session lifecycle, status, and events during an Ambient session.</p>
  </Card>

  <Card title="Note Management" icon="file-lines" href="/web-sdk/guides/note-management" arrow={true}>
    <p>Review, edit, and submit notes, then write content back to your EHR.</p>
  </Card>

  <Card title="Dictation for JavaScript" icon="js" href="/web-sdk/guides/dictation-javascript" arrow={true}>
    <p>Add Dictation to a JavaScript Web SDK integration.</p>
  </Card>

  <Card title="Dictation for React" icon="react" href="/web-sdk/guides/dictation-react" arrow={true}>
    <p>Add Dictation to a React Web SDK integration.</p>
  </Card>

  <Card title="Form Filling for JavaScript" icon="js" href="/web-sdk/guides/form-filling-javascript" arrow={true}>
    <p>Add Form filling to a JavaScript Web SDK integration.</p>
  </Card>

  <Card title="Form Filling for React" icon="react" href="/web-sdk/guides/form-filling-react" arrow={true}>
    <p>Add Form filling to a React Web SDK integration.</p>
  </Card>

  <Card title="Branding and Layout" icon="paint-brush" href="/web-sdk/guides/branding" arrow={true}>
    <p>Customize theme and layout options for the Web SDK UI.</p>
  </Card>

  <Card title="Minimized Layout" icon="window-minimize" href="/web-sdk/minimized-layout/overview" arrow={true}>
    <p>Embed a compact Web SDK layout when space in your UI is limited.</p>
  </Card>

  <Card title="Minimized Layout Implementation" icon="wrench" href="/web-sdk/minimized-layout/implementation" arrow={true}>
    <p>Implement the minimized layout in your application.</p>
  </Card>
</Columns>

## Web SDK capabilities

Add these capabilities when your Ambient workflow needs more clinical depth, care settings, or session reliability.

<Columns cols={3}>
  <Card title="Medication Orders" icon="pills" href="/web-sdk/medication-orders/overview" arrow={true}>
    <p>Capture medication order content from Ambient sessions in the Web SDK.</p>
  </Card>

  <Card title="Problem-Based Charting" icon="notes-medical" href="/web-sdk/guides/ambient-problem-based-charting" arrow={true}>
    <p>Pass problem context so Ambient notes organize findings around diagnoses.</p>
  </Card>

  <Card title="Interoperability" icon="share-nodes" href="/web-sdk/guides/ambient-interoperability" arrow={true}>
    <p>Continue the same clinical note across Ambient APIs, Mobile SDK, and Web SDK.</p>
  </Card>

  <Card title="Multilingual Sessions" icon="language" href="/web-sdk/guides/ambient-multilingual" arrow={true}>
    <p>Configure language options for Ambient sessions in the Web SDK.</p>
  </Card>

  <Card title="Telehealth" icon="video" href="/web-sdk/guides/telehealth" arrow={true}>
    <p>Use the Web SDK in telehealth workflows.</p>
  </Card>

  <Card title="Session Recovery" icon="arrows-rotate" href="/web-sdk/guides/ambient-session-recovery" arrow={true}>
    <p>Recover or continue an Ambient session when recording is interrupted.</p>
  </Card>

  <Card title="Offline Mode" icon="wifi" href="/web-sdk/guides/ambient-offline-mode" arrow={true}>
    <p>Buffer audio during network interruptions and sync when connectivity returns.</p>
  </Card>
</Columns>

## API references

Use the API reference when you need exact types, methods, or component contracts. For React, start with Hooks, Providers, and Components. For JavaScript, start with Classes and Functions. Types apply to both.

<Columns cols={3}>
  <Card title="Types" icon="code" href="/web-sdk/api-reference/types" arrow={true}>
    <p>Browse Web SDK types for initialization, data models, and events.</p>
  </Card>

  <Card title="Hooks" icon="react" href="/web-sdk/api-reference/hooks" arrow={true}>
    <p>Use React hooks for Ambient, auth, and session workflows.</p>
  </Card>

  <Card title="Providers" icon="cubes" href="/web-sdk/api-reference/providers" arrow={true}>
    <p>Wrap your application with Web SDK providers for React integrations.</p>
  </Card>

  <Card title="Components" icon="puzzle-piece" href="/web-sdk/api-reference/components" arrow={true}>
    <p>Use Web SDK UI components in React applications.</p>
  </Card>

  <Card title="Functions" icon="function" href="/web-sdk/api-reference/functions" arrow={true}>
    <p>Call Web SDK functions for mount, session control, and configuration.</p>
  </Card>

  <Card title="Classes" icon="cube" href="/web-sdk/api-reference/classes" arrow={true}>
    <p>Use Web SDK classes in JavaScript integrations.</p>
  </Card>
</Columns>

## Resources

Use these resources when you need examples, tutorials, troubleshooting help, release details, or support for an existing integration.

<Columns cols={3}>
  <Card title="Examples" icon="laptop-code" href="/web-sdk/examples/basic-usage" arrow={true}>
    <p>Browse Web SDK examples for common integration patterns.</p>
  </Card>

  <Card title="React Tutorial" icon="graduation-cap" href="/documentation/tutorials/web-sdk-ambient-react" arrow={true}>
    <p>Build an Ambient session with the Web SDK in React.</p>
  </Card>

  <Card title="PBC Tutorial" icon="graduation-cap" href="/documentation/tutorials/web-sdk-pbc-ambient" arrow={true}>
    <p>Build Problem-Based Charting with the Web SDK.</p>
  </Card>

  <Card title="Error Handling" icon="triangle-exclamation" href="/web-sdk/guides/error-handling" arrow={true}>
    <p>Handle Web SDK errors during initialization, sessions, and submission.</p>
  </Card>

  <Card title="Token Refresh" icon="rotate" href="/web-sdk/guides/token-refresh" arrow={true}>
    <p>Keep Partner Tokens valid during long-running Web SDK sessions.</p>
  </Card>

  <Card title="FAQs" icon="circle-question" href="/web-sdk/faqs/general" arrow={true}>
    <p>Find answers to general, technical, implementation, and onboarding questions.</p>
  </Card>

  <Card title="Changelog" icon="clock-rotate-left" href="/web-sdk/product-updates/changelog" arrow={true}>
    <p>Track Web SDK releases, enhancements, and breaking changes.</p>
  </Card>

  <Card title="Migration Guides" icon="arrow-up" href="/web-sdk/product-updates/migration-to-v3" arrow={true}>
    <p>Upgrade an existing Web SDK integration to a newer version.</p>
  </Card>

  <Card title="Support" icon="life-ring" href="/documentation/references/support" arrow={true}>
    <p>Contact Suki for partner documentation and SDK support.</p>
  </Card>
</Columns>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.