ai-form-builder

AI Form Builder for React. Generate production-ready React forms from a screenshot, PDF, HTML, or text prompt — as a Claude Skill, Cursor Rule, or Windsurf Rule. Outputs portable JSON schema + runnable React code. Built on top of FormEngine Core (MIT, free forever).

What this is

Drop a screenshot, PDF, HTML snippet, or plain-text description of a form into Claude / Cursor / Windsurf — get back a valid FormEngine JSON schema plus a runnable App.tsx that renders it through @react-form-builder/core. Every output passes a real validator (no hallucinated component types, no smuggled HTML, no broken validations).

Three install targets, one source of truth:

| Where you work | Install as | Trigger | |---|---|---| | Claude Code / Cowork | Claude skill | "make me a signup form" / drop a screenshot | | Claude Code (one-line) | Plugin | /plugin install ai-form-builder | | Cursor | Cursor rule | mention "form" / "FormEngine" | | Windsurf | Windsurf rule | same | | Any IDE / API (planned) | MCP server | call generate_form tool |

Quick start

# 1. Install the runtime
npm install @react-form-builder/core @react-form-builder/components-rsuite rsuite

# 2. Drop the AI Form Builder into your assistant of choice (see below)

# 3. Say something like:
#    "Build me a signup form with name, email, password, and TOS checkbox"

You'll get back a form.json and an App.tsx. Run npm run dev and the form is live.

Install as a Claude Skill

git clone https://github.com/lukinov/ai-form-builder.git ~/.claude/skills/ai-form-builder

Or, if you keep skills inside a project:

git clone https://github.com/lukinov/ai-form-builder.git .claude/skills/ai-form-builder

Restart Claude Code. The skill auto-loads when you mention forms, signup, contact, onboarding, etc., or drop a form screenshot.

Install as a Claude Code plugin

/plugin marketplace add lukinov/ai-form-builder
/plugin install ai-form-builder

Install as a Cursor rule

mkdir -p .cursor/rules
curl -L https://raw.githubusercontent.com/lukinov/ai-form-builder/main/.cursor/rules/formengine.mdc \
  -o .cursor/rules/formengine.mdc

The rule auto-attaches when you edit .tsx / .jsx files containing the words form, signup, contact, etc. Or invoke explicitly:

@formengine build me a multi-step onboarding form

Install as a Windsurf rule

mkdir -p .windsurf/rules
curl -L https://raw.githubusercontent.com/lukinov/ai-form-builder/main/.windsurf/rules/formengine.md \
  -o .windsurf/rules/formengine.md

How it works

The skill produces four artifacts every time:

1. form.json — a normalized FormEngine schema, validated against the real list of component types from @react-form-builder/components-rsuite (or MUI / Mantine).
2. App.tsx — minimal runnable React; theming via the library's provider, no companion CSS.
3. A validation report — what passed, what was fixed (Screen root, unique keys, valid validation rule keys, layout-only css, no smuggled HTML markup).
4. Next steps — install command, doc links, an "import to Online FormBuilder" link your teammate can use to edit visually.

The same JSON schema round-trips through the Online FormBuilder — paste it in, drag fields, paste back. No vendor lock.

Examples

| Use case | Schema | Notes | |---|---|---| | Signup form with TOS, side-by-side name fields | examples/signup | Password validation, truthy consent, flex container | | Contact form with multi-line message | examples/contact | RsTextArea, min length validation | | Multi-step onboarding wizard | examples/multi-step-onboarding | RsWizard + RsWizardStep | | Survey with conditional fields | examples/survey-conditional | renderWhen + validateWhen |

Each example folder has a working form.json + App.tsx you can paste straight into a Vite/Next/CRA project.

Why FormEngine + AI

If you've tried generating forms with raw LLMs, you know the pain:

• Bare JSX dumps that can't be edited visually
• "Form" libraries that hallucinate component names
• Inline <style> blocks that don't match your theme
• No validation, no a11y, no round-trip with a designer
• A new component every time → no schema you can serve from a CMS

This skill solves all of that by targeting FormEngine's JSON schema format, which is:

• Portable. Plain data — feed it to FormViewer in React, edit it in the Online FormBuilder, serve it from your API, localize it.
• Round-trippable. Designer ↔ JSON ↔ Designer. No code regeneration.
• Library-agnostic. Same schema renders through RSuite, Material UI, or Mantine — pick the one your app already uses.
• Validated. A real Python validator (scripts/validate_schema.py) catches the 30+ failure modes LLMs hit (wrong types, unwrapped props, smuggled HTML, visual styling in css).

You're not paying for any of this. FormEngine Core is MIT and the skill is MIT.

Vs. alternatives

| | This skill + FormEngine | react-hook-form | react-jsonschema-form (RJSF) | No-code SaaS (Tally, Typeform, Jotform) | |---|---|---|---|---| | AI generation from screenshot/PDF | yes | no | no | partial | | Validated JSON schema | yes | no (just hooks) | yes | proprietary | | Visual editor round-trip | yes (Online FormBuilder) | no | no | yes (their UI only) | | You own the React code | yes | yes | yes | no, embed only | | MIT license, free | yes | yes | yes | no | | Theme-able with your design system | yes (RSuite/MUI/Mantine themes) | yes | partial | limited | | Multi-step wizards | yes (RsWizard) | manual | manual | yes | | Conditional rendering | yes (renderWhen) | manual | partial | yes |

What the skill outputs (real example)

Input:

Build me a signup form: name, email, password (8+ chars), and a TOS checkbox.

Output excerpt (form.json):

{
  "form": {
    "type": "Screen",
    "key": "signup",
    "children": [
      {
        "type": "RsCard",
        "props": { "header": { "value": "Create your account" } },
        "children": [
          {
            "type": "RsInput",
            "key": "email",
            "props": { "label": { "value": "Email" }, "type": { "value": "email" } },
            "schema": { "validations": [{ "key": "required" }, { "key": "email" }] }
          },
          {
            "type": "RsInput",
            "key": "password",
            "props": { "label": { "value": "Password" }, "type": { "value": "password" } },
            "schema": {
              "validations": [
                { "key": "required" },
                { "key": "min", "args": { "limit": 8 } }
              ]
            }
          }
        ]
      }
    ]
  }
}

Plus a 12-line App.tsx. Run npm run dev and you have a working form.

MCP server roadmap

A standalone Model Context Protocol server (generate_form, validate_schema, list_components tools) is on the roadmap — see mcp-server/README.md. Star this repo to be notified.

Repository layout

ai-form-builder/
├── skills/ai-form-builder/    # The skill source (SKILL.md + references + scripts)
├── .claude-plugin/            # Claude Code plugin manifest
├── .cursor/rules/             # Cursor .mdc rule
├── .windsurf/rules/           # Windsurf rule
├── mcp-server/                # MCP server (roadmap)
├── examples/                  # 4 reference outputs (signup/contact/multi-step/survey)
├── docs/                      # Long-form documentation
└── .github/                   # Workflows + issue templates

FAQ

Q: Does this work without Claude / Cursor? A: Today the skill needs an LLM host that loads it. The MCP server (in roadmap) will expose the same logic to any IDE or API client.

Q: Do I need a FormEngine license to use this? A: No. FormEngine Core is MIT — runs in production, no fees. The commercial FormEngine Designer is optional for visual editing in your own app; the free Online FormBuilder is enough for most workflows.

Q: Can I use this with Material UI / Mantine instead of RSuite? A: Yes. Tell the skill which library you want, or it'll auto-detect from the surrounding project. All three component libraries are supported.

Q: My form has a custom field type. Will it still work? A: The skill maps to FormEngine's built-in component set (35+ in RSuite, ~25 each in MUI / Mantine). For custom field types, register them with FormEngine's component registry and add a note to the skill prompt — it'll pick them up.

Q: How is this different from v0 / Vercel AI / shadcn-ui generators? A: Those generate JSX. We generate schema — portable data that round-trips through a visual editor, ships to a CMS, and renders through any of three component libraries.

Q: Does this support React Hook Form / Zod / Yup? A: FormEngine has its own validation layer (Zod-equivalent rule keys). If you must use RHF, the schema can be transformed at runtime — see docs/integration-with-rhf.md.

Contributing

Issues and PRs welcome. See CONTRIBUTING.md. Especially looking for:

• Additional UI library adapters (Chakra, Ant Design)
• More example schemas (admin panels, KYC, surveys with branching)
• MCP server contributors

License

MIT — see LICENSE. Built on top of FormEngine by Optimajet.

Related projects

• FormEngine Core — the renderer this skill targets
• Online FormBuilder — free visual editor, paste JSON in / out
• FormEngine docs — full reference

---

If this saved you an afternoon, consider starring FormEngine Core — it helps more developers find the MIT renderer.