--- title: "Build with AI" description: "Connect a form to Forminit with an AI coding tool or app builder, using one setup prompt, the installable forminit-setup skill or the hosted guide at forminit.com/setup.md." url: https://forminit.com/docs/build-with-ai/ --- # Build with AI Forminit has one setup guide for AI agents, `forminit-setup`. It connects an existing form in your project to Forminit, creates one when there is none, or fixes a broken integration, and it keeps your design and logic as they are. It works with coding agents such as Claude Code, Codex, Cursor, GitHub Copilot, Antigravity and Windsurf, and with app builders such as Lovable, Bolt, v0 and Replit. --- ## The setup prompt Every form's page in the [Forminit dashboard](https://app.forminit.com) shows a setup prompt with that form's ID filled in. Copy it from there, or use this version, which asks you for the Form ID: ```text Connect my form to Forminit (forminit.com, a form backend). If I have no form yet, ask me which fields I want, then create it. Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com). Get the Forminit setup guide, then follow it: 1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md. 2. Otherwise read https://forminit.com/setup.md in full. 3. If you can do neither, stop and tell me. ``` To skip the question, replace the Form ID line with your own, for example `Form ID: abc12def345`. The prompt is the same for every tool. It gives the agent one of three routes to the same guide: 1. **Coding agents with a terminal** install the [`forminit-setup` skill](#install-the-skill) and read it from the project. 2. **App builders without a terminal** read the hosted copy at [forminit.com/setup.md](https://forminit.com/setup.md). 3. **Tools that can do neither** stop and say so, instead of guessing field names. --- ## What the agent does 1. Detects the stack and finds the form. 2. Sends you one plan: every input with its Forminit field name, what will change, and its questions. For each file input it asks whether it takes one file or several. Then it waits for your answer. 3. Renames inputs (or maps them in the submit handler) to Forminit's [field blocks](https://forminit.com/docs/form-blocks/): `fi-sender-email`, `fi-sender-phone`, `fi-select-*`, `fi-radio-*`, `fi-checkbox-*[]`, `fi-file-*` and the rest. 4. Wires the submit with the [Forminit SDK](https://forminit.com/docs/sdk/), disables the submit button while sending, and keeps your input when something fails. 5. Leaves your layout, styles, copy, validation and other logic alone, then asks you to send one test submission. The guide covers HTML, React, Next.js, Vue, Nuxt, Svelte, SvelteKit and Astro. When there is no code to edit, such as a chat or a website builder's custom code block, it returns a paste-ready HTML form. > **Note** > > The guide wires browser forms in public mode. For server-side submissions with an API key (protected mode, the Next.js proxy, or a Node.js or Python backend), follow the [Next.js](https://forminit.com/docs/nextjs/), [Node.js](https://forminit.com/docs/nodejs/) or [Python](https://forminit.com/docs/python/) guide. --- ## Install the skill The skill lives in the [forminit/skills](https://github.com/forminit/skills) repository on GitHub. Install it once and your agent picks it up whenever you ask about Forminit: ```bash npx skills add forminit/skills ``` This works with Claude Code, Codex, Cursor, GitHub Copilot, Antigravity, Windsurf, OpenCode and other agents that support [Agent Skills](https://agentskills.io). In Claude Code you can also install it as a plugin: ```bash claude plugin marketplace add forminit/skills ``` ```bash claude plugin install forminit@forminit ``` Then ask your agent "Connect my contact form to Forminit, Form ID abc12def345", or run `/forminit-setup abc12def345`. ## Hosted guide [forminit.com/setup.md](https://forminit.com/setup.md) is the same guide as a single page, with stack references under `forminit.com/setup/references/`. Use it with tools that can read a URL but cannot install skills. ## MCP server Connect Claude, ChatGPT, Codex, Cursor, VS Code, Antigravity or another AI tool to your Forminit account with the [MCP server](https://forminit.com/docs/mcp/) at `https://api.forminit.com/mcp`. The agent can then create the form itself, fetch this guide for your stack, and later read and triage the submissions, without you copying a Form ID. --- ## Prompt examples To have the agent build a new form, describe it in the first line and keep the rest of the prompt. Copy any of these and paste it into your AI tool. ### Newsletter signup with interest tags ```text Build a newsletter signup form with email, first name, and an interest area checkbox group (Product Updates, Engineering Blog, Design Inspiration, Case Studies, Industry News). Show a minimal inline success message after submit. Connect it to Forminit (forminit.com, a form backend). Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com). Get the Forminit setup guide, then follow it: 1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md. 2. Otherwise read https://forminit.com/setup.md in full. 3. If you can do neither, stop and tell me. ``` ### Freelance project request form ```text Build a freelance project request form with name, email, phone, a project type select (Website, Mobile App, Branding, UI/UX Audit, Consulting), a deadline date picker, a budget radio (Under $1K, $1K-$5K, $5K-$15K, $15K+), and a project brief textarea. Connect it to Forminit (forminit.com, a form backend). Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com). Get the Forminit setup guide, then follow it: 1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md. 2. Otherwise read https://forminit.com/setup.md in full. 3. If you can do neither, stop and tell me. ``` ### Course enrollment form ```text Build a course enrollment form with full name, email, phone, a course select (Intro to Python, Advanced JavaScript, Data Science Fundamentals, UX Design Workshop), a skill level radio (Beginner, Intermediate, Advanced), and a "Why do you want to take this course?" textarea. Connect it to Forminit (forminit.com, a form backend). Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com). Get the Forminit setup guide, then follow it: 1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md. 2. Otherwise read https://forminit.com/setup.md in full. 3. If you can do neither, stop and tell me. ``` ### Vendor application form with file upload ```text Build a vendor application form with company name, contact email, phone, website URL, a product category select (Food & Beverage, Handmade Goods, Clothing, Art & Prints, Jewelry, Other), a booth size radio (Small 6x6ft, Medium 8x8ft, Large 10x10ft), a product catalog file upload (PDF or images), and an "About your business" textarea. Connect it to Forminit (forminit.com, a form backend). Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com). Get the Forminit setup guide, then follow it: 1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md. 2. Otherwise read https://forminit.com/setup.md in full. 3. If you can do neither, stop and tell me. ``` ### Property maintenance request ```text Build a property maintenance request form with tenant name, email, phone, a unit number text field, an urgency radio (Low: within a week, Medium: within 48 hours, High: same day, Emergency: immediate), a category select (Plumbing, Electrical, HVAC, Appliance, Pest Control, General), a description textarea, and a photo upload for the issue (images only, multiple files). Connect it to Forminit (forminit.com, a form backend). Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com). Get the Forminit setup guide, then follow it: 1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md. 2. Otherwise read https://forminit.com/setup.md in full. 3. If you can do neither, stop and tell me. ``` --- ## LLM overview file Forminit also provides an `llms.txt` file that covers the full API, all features and all framework guides in a single document: ``` https://forminit.com/llms.txt ``` Use it when the AI needs to understand the whole Forminit platform. To wire a form, use the setup prompt above.