Fieldset - AI-native form platform using WebMCP

Inspiration

Every team form carries the same hidden tax. Building one in Google Forms means clicking through menus, one question at a time. Filling one means retyping details you've given a hundred times. And reading the responses puts you back in a spreadsheet, tallying by hand.

WebMCP made us realize all three chores could collapse into one. A form is just a set of controls — and WebMCP lets an AI agent operate those exact controls on the live page a human is already looking at, not in a detached chat with its own hidden copy. So we built forms that you and your agent work on together.

What it does

Fieldset is an agent-native form platform. Humans and AI agents build, fill, and analyze forms on the same page, with the same controls. Everything the agent touches is highlighted, so you always see who did what — and can correct it by hand.

• Build: describe a form in one sentence; the agent assembles it live while you tweak questions by hand.
• Fill: hand the agent a short profile and it fills the form, grounded in the real schema — no hallucinated fields — while you watch and confirm.
• Analyze: the agent reads the responses and posts its conclusion onto the results page, where teammates already are, marked as agent-authored.

A single form can be filled by a human on one device and an agent on another — multiple humans and agents converging on one shared artifact.

🔌 Why it's a strong fit for WebMCP

Forms are the web's most universal collaborative surface. Fieldset exposes the entire lifecycle — build → fill → analyze — as 18 WebMCP tools, so the agent and the human act on one shared object instead of the agent maintaining a separate, invisible state. Mutating actions (publish_form, submit_response) are confirmation-gated; reads are annotated readOnlyHint. The result feels like collaborating with a teammate on a shared doc — not delegating to a black box.

How we built it

• Next.js (App Router) + React + TypeScript. Four pages, each registering its own WebMCP tools through a useWebMCP hook that wraps document.modelContext.registerTool().
• Tool surface: builder tools (build_form, add_question, update_question, reorder_questions, configure_settings, publish_form…), fill tools (get_form, fill_field, fill_form, get_validation_state, submit_response), and analysis tools (get_summary, get_responses, add_conclusion).
• Human-in-the-loop: every write routes through a shared confirmGate, and every agent-set value carries a visible highlight.
• Conditional logic: dependent questions (e.g. cuisine → mains) resolve their options live from another answer.
• Persistence: Upstash Redis (with an in-memory fallback for local dev).
• Deployed on Vercel; works in ChatGPT's in-app browser and Chrome with WebMCP enabled.

Challenges we ran into

• Duplicate tool registration under React Strict Mode → solved with unregister-before-register plus a live-tools guard.
• Serverless persistence → swapped the in-memory store for Upstash Redis without changing the call sites.
• "Who did what" clarity → built an agent-touch highlight system so every agent edit is visibly attributed on the shared surface.
• Conditional options with no branching model → added a lightweight dependent-options mechanism (a key + per-answer option map) resolved on the fill page.
• Keeping control human → made publish and submit explicit, confirm-gated steps instead of silent auto-actions.

Accomplishments that we're proud of

• The whole form lifecycle is agent-operable — build, fill, and analyze, exposed as 18 WebMCP tools. Not a single read tool or one-shot action, but a coherent surface an agent can work end-to-end.
• A genuinely shared human + agent canvas. Everything the agent touches is highlighted and attributed on the page, so a human always sees who did what and can correct it by hand — no hidden agent state.
• Human-in-the-loop by design. Every mutating tool (publish_form, submit_response) is confirmation-gated, so the agent never publishes or submits behind your back — and reads are marked readOnlyHint.
• Grounded filling, no hallucinated fields. Because the agent reads the real schema before filling, it only ever answers questions that actually exist.
• Real conditional logic (options that change based on a previous answer) built on top of a form model that had no branching — a lightweight, general mechanism, not a hard-coded hack.
• A complete, deployed product — not a proof of concept. Redis-backed persistence, a polished light/dark theme, four ready-to-try example forms, and it runs end-to-end in ChatGPT's in-app browser and Chrome + WebMCP.

What we learned

• WebMCP's tool-registration lifecycle matters: React Strict Mode's double-mount caused InvalidStateError: Duplicate tool name, which taught us to unregister before re-registering and guard live tools.
• Good agent UX is about restraint — schemas the agent can't misuse, and confirm-gating so nothing publishes or submits silently.
• Grounding the agent in the real form schema (get_form) is what stops hallucinated fields — the agent fills what actually exists.
• Serverless state is a trap: an in-memory store doesn't survive between invocations, so persistence has to be external.

What's next for Fieldset - AI-native form platform using WebMCP

Adaptive "interview" forms that change as they're answered, branching logic, live multi-responder aggregation, and real fulfillment (e.g. Shopify) for order-style forms.

🧰 Built with

Next.js · React · TypeScript · WebMCP · Upstash Redis · Vercel

🔗 Live demo · Demo video · Source

Built With

• cloudflare
• javascript
• mcp
• next.js
• node.js
• openai
• react
• redis
• tailwindcss
• typescript
• upstash
• vercel
• webmcp