Generative form
A form the agent builds mid-conversation to collect exactly what it still needs, instead of asking one question at a time.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/generative-form-inline.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/generative-form-inline.json
Usage & API
Example
import { GenerativeForm } from "@/components/ai/generative-form-inline"
<GenerativeForm
title="…"
fields={[]}
values={values}
onChange={() => {}}
status="open"
onSubmit={() => {}}
onReopen={() => {}}
/>Props GenerativeForm
| Prop | Type & description | Required |
|---|---|---|
title | string | Required |
fields | FormField[] | Required |
values | FormValues | Required |
onChange | (id: string, value: FieldValue) => void | Required |
inferred | Record<string, { value: FieldValue; source: string }>Values the agent filled in itself, with where they came from. A field keeps its note while its value is unchanged. | Optional |
status | "open" | "sending" | "sent" | Required |
onSubmit | () => void | Required |
onReopen | () => void | Required |
submitLabel | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The inline card is titled by you and stacks every field. The date field opens a month grid with previous and next month, and busy days can show a dot. The count field has fewer and more buttons and shows its unit. Money has an amount and a currency menu. Select, chips and text use the placeholders you set. An inferred value keeps a note naming its source until it is edited. The footer submits with the label you pass, and mentions Ctrl and Enter. While status is sending, the button waits. Once sent, the answers are summarized and can be reopened.
Example
import { GenerativeSteps } from "@/components/ai/generative-form-steps"
<GenerativeSteps
title="…"
steps={[]}
fields={[]}
values={values}
onChange={() => {}}
status="open"
onSubmit={() => {}}
onReopen={() => {}}
/>Props GenerativeSteps
| Prop | Type & description | Required |
|---|---|---|
title | string | Required |
steps | FormStep[] | Required |
fields | FormField[] | Required |
values | FormValues | Required |
onChange | (id: string, value: FieldValue) => void | Required |
inferred | Record<string, { value: FieldValue; source: string }>Values the agent filled in itself, with where they came from. | Optional |
status | "open" | "sending" | "sent" | Required |
onSubmit | () => void | Required |
onReopen | () => void | Required |
submitLabel | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The stepped card uses the same fields, split by the steps you declare, each step a title and a list of field ids. A progress control shows which step is current. Moving on is Enter when the step is valid. A finished step can be edited without throwing away the others. Inferred notes, the currency menu, the date grid and the count stepper behave as they do in the single card. Submit still runs only at the end, with the same sending and sent states, and reopen brings the steps back.
Choosing a layout
Use it when the agent has stopped because it is missing a structured set of facts, and a free-text reply would just make it ask again. Dates, headcount, budget, a venue and a few tags are the kind of set the field types cover. Use steps when that set is long enough that one card is a wall. Use the inline card when five or six fields fit in the reply.
If the agent already drafted the action and the person only needs to correct a recipient or an argument, edit before run is the closer tool. If the pause is a yes or no on a side effect, the decision inbox is the closer one. A generative form collects values. It does not approve a tool call.
Does the form decide which questions to ask?
No. You pass the title, the fields and, for the stepped variant, which field ids sit on which step. Inferred values are also yours: a value plus the source line that should appear under the field until the person edits it.
What does the person get back after sending?
Status moves to sending, then sent. The card replaces the editors with the formatted answers, and onReopen returns it to open. The date is shown as a short weekday and day, money with its symbol, and the other kinds as the label or the text that was chosen.