Agent Form
experimentalA form an agent can fill in, read back and submit through the form's own handler — its fields read from the form, private ones never touched.
- AI
- 2 files
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add agent-formNo npm packages are needed beyond what Dowel already requires.
import { AgentForm } from "@/components/ui/agent-form";Default
Declarative
<AgentForm>
| Prop | Type | Default |
|---|---|---|
toolDescription (required)What submitting this form does, for the model: "Invite a teammate". | string | — |
toolName (required)Names the tools: "invite" gives invite_fill, invite_read and invite_submit. | string | — |
declarativeAlso describe the form to browser agents with WebMCP's declarative attributes. | boolean | false |
submitReversibilityWhat submitting does to the world. Unknown consequences are treated as permanent. | ToolReversibility | "irreversible" |
toolTitleHow the form is named to the person. Defaults to | string | — |
Adds no controls. Fields are described to the agent from their accessible names and descriptions, so a field with no label is as unclear to the agent as to a screen reader user — the form's accessibility is what the agent works from. Values are set through the same input and change events typing fires, so validation messages, live regions and aria-invalid respond to the agent exactly as they do to a person, and the errors the agent is told are the ones on screen. A field the agent fills is outlined while it works, and focus never moves. Passwords, one-time codes, card numbers and anything inside [data-agent-private] are never read or filled.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes