REST API ↗
Get started

Dialogue Web SDK

Embed an AI-moderated video interview anywhere on the web: a branded drop-in, a fully custom UI built on hooks, or a single script tag on a non-React page.

The Dialogue Web SDK runs an entire participant journey (consent, profile, screener, device check, the live LiveKit interview with an AI agent, and completion) inside the host page’s own main thread. You give it a studyId; it renders the rest.

The SDK is the frontend. Your backend mints a short-lived bootstrap token so the participant is authenticated. Everything participant-facing ships in these npm packages; the REST contract it speaks to is documented separately at docs.dialogueai.com.

What it does

  • Drives the full journey state machine — one screen per phase, transitions handled for you.
  • Owns the LiveKit connection, the AI agent bridge, mic/camera and screen-share capture.
  • Handles consent, the dynamic screener, eligibility, and per-step profile collection.
  • Ships 17 locales, the Dialogue brand theme, and a closed appearance API.
  • Keeps tokens in main-thread closure memory only, never in cookies or localStorage.

The packages

Three layers, strict dependency order. Pick the layer that matches how much UI you want to own.

dependency ordertext
@dialogueai/react-ui   →   @dialogueai/react   →   @dialogueai/web-sdk-core
   (styled UI)            (headless hooks)        (vanilla TS core)
@dialogueai/react-ui
The one prebuilt, Dialogue-branded interview. Drop in <Interview> and ship.
@dialogueai/react
Headless hooks + unstyled primitives. Build your own UI on the same contract.
@dialogueai/web-sdk-core
Framework-agnostic TypeScript core. REST, auth, state machine, LiveKit, types.
@dialogueai/loader
A single script tag installs window.Dialogue for non-React pages.

Three ways to integrate

Styled drop-in
Fastest path. The branded UI, themeable via appearance.
Headless hooks
Full control over markup. The styled layer is built on these exact hooks.
Vanilla loader
No React in the host. Imperative Dialogue('open', …) calls.

Next steps

Head to the Quickstart to render your first interview in a few minutes, or read Architecture to understand what runs where before you wire it up.