Debriefer
React

DebrieferProvider

The root provider — holds your config and owns the session (one connection, one mic, one speaker).

<DebrieferProvider> wraps your app. It holds the configuration, connects to Debriefer, and owns the session-level concerns that must be shared across every Cell: the transport connection and the modality controller (one microphone, one speaker). Mount it once, near the root.

Live preview

A configured provider has no visual output of its own. The values below feed every Cell beneath it.

Usage

import { DebrieferProvider } from '@debriefer/blocks-react';

<DebrieferProvider
  config={{
    formId: 'form_1234',
    sessionToken,
    objective: 'Understand why customers churn',
    modalities: ['text', 'voice'],
    defaultModality: 'text',
    styleKit,
  }}
>
  <App />
</DebrieferProvider>;

Config

FieldTypeRequiredDescription
formIdstringThe published Form this session binds to.
sessionTokenstringShort-lived, Form-scoped token, minted on your server. Never ship a secret key.
objectivestringHuman-readable context for display (intro screens, etc). The agent owns the real objective — this never drives decisions.
modalities("text" | "voice")[]Which input channels the respondent may use. Default ["text"].
defaultModality"text" | "voice"Which channel is active first.
styleKitStyleKitOverride the markup of any primitive. See StyleKit.
localestringBCP-47 locale for built-in copy and formatting.

Injected dependencies (advanced)

Some capabilities are injected, never bundled — same pattern as the rest of the SDK. Pass them as props on the provider:

PropPurpose
transportSupply a custom transport adapter. Defaults to REST + SSE.
speechSourceSupply a speech-to-text source to enable voice. The SDK bundles no STT engine.
iconsSupply icon components used by styled Blocks.
<DebrieferProvider
  config={
    {
      /* … */
    }
  }
  speechSource={new WebSpeechInput()}
>
  <App />
</DebrieferProvider>

The exact config shape is being finalised against the SDK. Field names here reflect the intended developer experience; treat this page as the target contract.

  • The model — Bind / Author / Auto
  • Form — the container that goes inside the provider
  • useDebriefer — read session state from any component

On this page