Installation
Install the Debriefer Blocks React SDK, wrap your app, and render your first intelligent field in five minutes.
Install the package
npm install @debriefer/blocks-react@debriefer/blocks-react is headless — it pulls in no CSS and no UI library. You bring the styling
(or use StyleKit).
Mint a session token (server-side)
Blocks talk to Debriefer with a short-lived, Form-scoped session token — never your secret API key. Mint it on your server and hand it to the browser:
const { sessionToken } = await debriefer.forms.createSession({
formId: 'form_1234',
});
// return sessionToken to your clientNever ship a secret key (sk_…) to the browser. The session token is safe to
expose — it's scoped to one Form and expires.
Wrap your app in the Provider
<DebrieferProvider> holds your config and owns the session. Mount it once, near the root.
import { DebrieferProvider } from '@debriefer/blocks-react';
export function App({ sessionToken }: { sessionToken: string }) {
return (
<DebrieferProvider
config={{
formId: 'form_1234',
sessionToken,
objective: 'Understand why customers churn',
modalities: ['text'],
}}
>
<Survey />
</DebrieferProvider>
);
}Drop in a Form and a Cell
Write it like an ordinary form. Each field binds to a node in your published Form by id.
import { Form, Textarea, Button } from '@debriefer/blocks-react';
function Survey() {
return (
<Form>
<Textarea id="cancel_reason" label="What made you cancel?" />
<Button>Submit</Button>
</Form>
);
}That's a working intelligent field. When the respondent answers, the agent appraises it and may probe — the follow-up renders right inside the field, no extra code.
Style it (optional)
Headless means it's unstyled by default. Map each primitive to your own components with a StyleKit:
<DebrieferProvider config={{ formId, sessionToken, styleKit }}>
<Survey />
</DebrieferProvider>