Skip to main content

Watch an agent fill a real form

· 2 min read
Vivek Gudapuri
Vivek Gudapuri
Building Distri in public

Most "AI form" demos are a video. This one is the real thing: the product component below is the same React form you'd ship, the panel on the right is Distri's real @distri/react transcript, and the run between them is recorded, it plays back through the actual components, so what you see is exactly what a user would see.

Watch the agent read one paragraph of prose and file a complete security incident report.

Recorded run, the agent calls fill_field for each field, then submit_form. Scrub the tape to replay any step.

Notice the moment that matters: when fill_field runs, the tool call leaves the transcript, crosses the seam, and the field on the left lights up amber. That crossing, the agent reaching out of the chat and touching your app, is the whole point of embedding.

How it's built​

The agent is a markdown file. Frontmatter sets behaviour; the body is the prompt.

---
name = "form_filler_agent"
description = "Fills out forms through natural conversation"
max_iterations = 5

[tools]
external = ["*"]

[model_settings]
model = "gpt-4.1-mini"
---

# ROLE
You fill out security incident report forms based on user descriptions.
Extract relevant information from natural conversation and fill fields accurately.

The form's capabilities are handed to the agent as client-side tools, plain functions that run in the browser and mutate your React state:

const tools: DistriFnTool[] = [
  {
    name: 'fill_field',
    description: 'Fill a specific form field',
    parameters: {
      type: 'object',
      properties: { field_name: { type: 'string' }, value: { type: 'string' } },
      required: ['field_name', 'value'],
    },
    handler: async ({ field_name, value }) => {
      formRef.current?.setValue(field_name, value);
      return `Field "${field_name}" set to "${value}"`;
    },
  },
  // get_form_values, clear_form, submit_form ...
];

And you wire it in with the drop-in <Chat /> component:

<DistriProvider config={{ baseUrl: API_URL, clientId: CLIENT_ID }}>
  <IncidentForm ref={formRef} />
  <Chat agentId="form_filler_agent" externalTools={tools} theme="dark" />
</DistriProvider>

That's the entire integration: an agent definition, a handful of tools that are just your product's functions, and one component. The agent decides when to call each tool; your code decides what the tool does.

Try it yourself​

curl -fsSL https://distri.dev/install.sh | sh

Then explore the full sample with its source, read the docs, or see the other recorded runs, reconciling two ledgers, clearing a bank statement, and consolidating subsidiary reports.