Overview
What the Debriefer Blocks React SDK is, how it' s structured, and the mental model you need before you build.
@debriefer/blocks-react is a set of headless, intelligent form components. Headless means they
ship no styles — you bring your own, or use StyleKit to map
each primitive to your component library. Intelligent means any field can become conversational,
driven entirely by the agent.
The anatomy
Every Blocks app has the same four layers. Learn them once and every page in this reference fits the picture:
- Provider —
<DebrieferProvider>wraps your app, holds the config (which Form, auth, modalities, objective), and owns the session (one connection, one mic, one speaker). - Form —
<Form>is the container your Blocks live in. The living form, reclaimed. - Blocks — the primitives:
<Textarea>,<Select>,<Rating>, and the rest. Familiar shapes; intelligent underneath. - StyleKit — optional. Override the markup of any primitive — inputs and the conversational chrome — with your own components.
The mental model
There are exactly three ways to use Blocks, and they share one vocabulary. Read the model before the component pages — it's the thing that makes everything else obvious.
| Posture | You write | Good for |
|---|---|---|
| Bind | <Textarea id="reason" /> bound to a published Form | The common case — your Form is authored in Debriefer (GUI / API / MCP) |
| Author | <Textarea label="…" objective="…" /> with full props | Your JSX is the Form — it compiles to a blueprint |
| Auto | <Form /> with no children | Let the agent render and sequence the whole Form |
Components
Inputs
Textarea, Input, Select, Combobox, Radio, Checkbox, Slider, Rating, Ranking, CardSort
Display
Media, Prose
Structure
Field, Label, Description, Button
Intelligence
Trail, Chips, FollowUp, VoiceBar — the conversational chrome
New here? Start with Installation — you'll have an intelligent field rendering in about five minutes.