Debriefer
React

Form

The container your Blocks live in — the living form, reclaimed. Also defines the props every Cell shares.

<Form> is the container your Blocks live in. It connects them to the session from <DebrieferProvider>, coordinates the conversation, and fires completion when the agent ends the Form.

Live preview

Renders your composed Blocks once the SDK is linked into the docs site. Until then the code samples are the source of truth.

Usage

import { Form, Textarea, Select, Button } from '@debriefer/blocks-react';

<Form onComplete={(result) => console.log(result)}>
  <Textarea id="cancel_reason" label="What made you cancel?" />
  <Select id="plan" label="Which plan were you on?" />
  <Button>Submit</Button>
</Form>;

Pass no children to let the agent render and sequence the whole Form (Auto posture):

<Form />

Props

PropTypeDescription
childrenReactNodeYour Blocks. Omit for Auto posture.
onComplete(result) => voidFires when the agent ends the Form.
classNamestringApplied to the rendered container.

<Form> is the hero name. DebrieferForm is exported as an alias if Form collides with another library in your file: import { DebrieferForm } from "@debriefer/blocks-react".

Cell props

Every Cell — <Textarea>, <Select>, <Rating>, and the rest — shares the props below. Individual component pages document only their affordance-specific props on top of these.

PropTypePostureDescription
idstringBind / AutoThe node key in the published Form this Cell binds to.
labelstringallThe field label. In Author mode it becomes the node's prompt text.
descriptionstringallHelper text rendered under the label.
objectivestringAuthor onlyWhat this field is trying to learn. Compiled into the blueprint; inert at runtime.
probingProbingConfigAuthor onlyWhether/how the agent probes. Compiled into the blueprint; inert at runtime.
typeNodeTypeAuthor onlyOverrides the node type the primitive maps to (rarely needed).
classNamestringallPassed to the rendered control (or its StyleKit slot).

There is deliberately no required, min, or validation prop that gates submission. Input constraints describe shape only (e.g. a Slider range). Whether an answer is sufficient is the agent's decision. See the one rule.

On this page