AI Form Assistant

Two demos

The form builder

Add fields, pick types, set validation rules. The result is a JSON schema kept in localStorage, so a new form takes no code.

Filling it by conversation

The assistant asks, you answer however you like, and the fields update while you talk.

How the conversation writes to the form

Gemini 2.5 Flash runs the chat: fast and cheap enough to keep a back-and-forth conversation going. It sits behind the Vercel AI SDK, so swapping the model leaves the form code untouched.

Field updates happen through tool calls, not through parsing the model's prose. Each call carries a field name and a value, checked against the same Zod schema React Hook Form validates on. One sentence can fire several of those calls at once, which is how "my name is John Doe" reaches firstName and lastName in a single turn. When a value fails validation the assistant is told which field and why, so it asks again instead of dropping the answer.

Twelve field types ship with matching validation: text, textarea, email, phone, URL, number, date, time, checkbox, single choice, multiple choice, and a range slider.

Voice on both ends

Speech-to-text is the browser's SpeechRecognition API. In Chromium it runs on the device: no audio upload, no per-minute cost, works offline. Spoken output goes to OpenAI TTS-1 and plays back automatically, so the form can be finished without looking at the screen. That matters most on mobile, where forms hurt the most.

Where it fits

Beyond form filling

The system prompt and tools live in src/app/api/chat/route.ts. Edit those and the same conversation loop does other jobs: guiding someone toward a purchase while they fill the form, explaining what an option means before they pick it, suggesting a value from an earlier answer, or chaining several forms and showing fields only when they become relevant.

Stack

Next.js 16 with the App Router, TypeScript throughout, shadcn/ui and Tailwind for the interface. React Hook Form holds form state, Zod owns validation and the inferred types, and the schema persists in localStorage.

Open source

MIT licensed, on GitHub.

One caveat worth stating plainly: this is a demo and teaching repo. Field updates are applied client-side. In a product you are charging for, the write goes to the server first, where it can be validated and stored without trusting the browser.