Loading...
Loading...
> Generate production-ready React Hook Form + Zod code from natural language.
The AI Form Generator allows you to instantly create complex forms by describing them in plain English. It outputs a complete Zod schema for validation and a fully accessible React component using shadcn/ui primitives. Perfect for rapid prototyping or building internal tools.
DESC: Import the generator into your admin or tool page.
1import { AiForms } from '@/components/library/ai-forms';
Provide a generation handler to connect to your AI backend.
1export default function GeneratorPage() {2 const handleGenerate = async (prompt) => {3 const res = await fetch('/api/ai/generate-form', {4 method: 'POST',5 body: JSON.stringify({ prompt })6 });7 return await res.json();8 };910 return <AiForms onGenerate={handleGenerate} />;11}
| Option | Type | Default | Description |
|---|---|---|---|
| initialForm | GeneratedForm | DEMO_FORM | Initial form state to display on load. |
| onGenerate | function | undefined | Async callback that returns a GeneratedForm object. |
The generator expects the AI to return data matching this interface:
interface GeneratedForm {
name: string; // e.g. "ContactForm"
description: string; // e.g. "A simple contact form"
submitLabel: string; // e.g. "Send Message"
fields: {
name: string; // e.g. "email"
label: string; // e.g. "Email Address"
type: "text" | "email" | "password" | "textarea" | ...;
required: boolean;
placeholder?: string;
options?: { label: string; value: string }[]; // For select/radio
}[];
}