DEV Community

Zonaib Bokhari
Zonaib Bokhari

Posted on

I built a form builder that lives inside your AI chat

#mcp #claude #webdev #opensource

Context switching is the thing that kills me.

I'm mid-conversation with Claude, figuring something out, and then I need to collect responses from a few people. So I open Typeform in another tab, build the form, copy the link, come back. By which point I've completely lost the thread of what I was thinking.

So one weekend I just decided to fix it for myself. The result is MCP Forms — you describe a form to Claude, it builds it and hands you a live link, and you can read the responses back later. All in the same chat window.

Here's what it actually looks like

You just talk to it:

Create a job application form. Ask for full name, email, and experience level 
(Junior / Mid / Senior). If they select Senior, show a field asking about 
their leadership experience.
Enter fullscreen mode Exit fullscreen mode

Claude calls the tool, the form gets generated, and you get a shareable link back — or an inline preview card if you're in a supported client:

Form creation demo

The form itself is clean, works on mobile, has a light/dark toggle. The conditional logic works exactly as you'd expect — select Senior, the leadership field appears:

Filling the form — conditional field appears when Senior is selected

When you want to see who filled it out:

Show me submissions for the job application form
Export as CSV
Enter fullscreen mode Exit fullscreen mode

Viewing submissions and exporting to CSV

The bit I find genuinely cool about this

Most MCP tools are wrappers around read operations. Search this, summarize that, fetch the other thing. What I liked about building this one is that the AI is actually creating something that persists — a real form at a real URL that other people can fill out, that collects real data.

It sounds small but it's a different kind of thing. The AI isn't just helping you think, it's helping you build.

How I built it

Stack is pretty simple:

Claude Desktop / Claude.ai / Cursor / any MCP client
        │
        │  MCP (stdio or streamable-http)
        ▼
Python MCP Server
        │
        │  HTTP
        ▼
ASP.NET 9 API (on Railway)
        │
        ├── Claude API → JSON form schema
        ├── SQLite for storage
        └── Scriban templates → HTML
Enter fullscreen mode Exit fullscreen mode

The flow that makes it work: when you describe a form, the API calls Claude with a prompt that returns a JSON schema — field types, labels, options, conditional rules. The form renderer takes that schema and generates HTML server-side using Scriban templates. Claude runs exactly once per form, at creation time. Loading the form page doesn't touch the AI API at all.

Conditional logic lives in the schema as showIf rules:

{
  "id": "leadership_experience",
  "type": "textarea",
  "label": "Describe your leadership experience",
  "showIf": { "field": "experience_level", "value": "Senior" }
}
Enter fullscreen mode Exit fullscreen mode

There's a bit of vanilla JS on the form that watches trigger fields and shows/hides dependents. One thing I got wrong the first time — I was using getElementById to find radio button groups, which doesn't work because radio inputs use name not id. Had to fall back to querySelectorAll('[name="..."]'). Classic.

On the security side: MCP endpoints are behind an API key, form view and submit are public (obviously — people need to fill out your forms), server-side validation mirrors the schema rules, rate limiting on submit, XSS handled by Scriban's auto-encoding. Nothing exotic, just the basics done properly.

No install needed if you just want to try it

The MCP server is hosted on Railway with streamable-http transport. Add it as a custom connector in Claude.ai:

https://mcp-forms-production-cdf7.up.railway.app/mcp
Enter fullscreen mode Exit fullscreen mode

Settings → Connectors → Add custom connector. Works the same way in ChatGPT, Cursor, Windsurf.

The webhook thing

Every form can have a webhook URL. On submission, the payload gets POSTed there. If it's a Slack incoming webhook URL, MCP Forms formats the payload as a proper Slack message automatically. Anything else gets raw JSON.

I'm pretty happy with this design decision — one feature, zero native integrations, but it unlocks Slack, Zapier, Make, n8n, and Google Sheets at once. You just tell Claude:

Create a contact form and send submissions to my Slack at 
https://hooks.slack.com/services/...
Enter fullscreen mode Exit fullscreen mode

Submissions land in Slack like:

New submission: Contact Form
• name: Jane Smith
• email: jane@example.com
• message: Interested in your services!
Submitted at 2026-01-15T10:32:00Z
Enter fullscreen mode Exit fullscreen mode

Try it / grab the code

github.com/xonaib/mcp-forms — MIT licensed

You'll need .NET 9, Python, uv, and an Anthropic API key. Self-hosting takes maybe 10 minutes following the README.

A few things still on the list: Notion integration, file upload fields, and proper multi-tenant auth (right now it's single-tenant — one database, one API key). Happy to take PRs or ideas.

Built this mostly on weekends and evening sessions between putting the kids to bed and falling asleep on the couch. If you try it and something's broken, open an issue — I'm actively working on it.

Top comments (0)