AI-Powered Form Generation

Generate fully functional forms from natural language descriptions using Groq AI

FastForms uses AI to transform your plain English descriptions into complete, validated form schemas. Simply describe what you need, and the system generates all fields, validation rules, and options automatically.

How It Works

The AI generation system is powered by the Groq SDK with the llama-3.3-70b-versatile model, designed specifically for structured JSON output.

1. Describe your form

   Users enter a natural language prompt describing the form they need. For example:

   • “Create a customer feedback form with name, email, rating, and comments”
   • “Job application form with personal info, work experience, and file upload”
   • “Event registration with attendee details and meal preferences”
2. AI processes the prompt

   The system sends your prompt to Groq AI with a specialized system prompt that ensures structured JSON output matching the form schema format.

   // lib/aiFormGeneration.ts:38-46
   const completion = await groq.chat.completions.create({
     messages: [
       { role: "system", content: systemPrompt },
       { role: "user", content: userPrompt }
     ],
     model: "llama-3.3-70b-versatile",
     temperature: 0.7,
     max_tokens: 2000,
     response_format: { type: 'json_object' }
   });
   
3. Schema validation

   The generated JSON is validated using Zod to ensure all fields meet requirements before creating the form in the database.

   // app/api/forms/generate/route.ts:22-23
   const schema = await generateFormSchema(prompt);
   const parsedSchema = validateFormSchema(schema);
   
4. Form creation

   The validated form is saved to PostgreSQL via Prisma with a unique slug and set to unpublished by default.

   // app/api/forms/generate/route.ts:25-32
   const form = await prisma.forms.create({
     data: {
       userId,
       title: parsedSchema.title,
       fields: parsedSchema.fields,
       isPublished: false,
     },
   });
   

Supported Field Types

The AI can generate 9 different field types, each with appropriate validation and options:

Text Fields

Type: text

Basic text input with optional placeholder and validation.

{
  "id": "full_name",
  "type": "text",
  "label": "Full Name",
  "required": true,
  "placeholder": "Enter your full name"
}

Email Fields

Type: email

Email input with built-in HTML5 validation.

{
  "id": "email_address",
  "type": "email",
  "label": "Email Address",
  "required": true,
  "placeholder": "[e-mail]"
}

Number Fields

Type: number

Numeric input with optional min/max validation.

{
  "id": "age",
  "type": "number",
  "label": "Age",
  "required": true,
  "validation": {
    "min": 0,
    "max": 100
  }
}

Date Fields

Type: date

Date picker input.

{
  "id": "birth_date",
  "type": "date",
  "label": "Date of Birth",
  "required": true
}

Textarea Fields

Type: textarea

Multi-line text input for longer responses.

{
  "id": "comments",
  "type": "textarea",
  "label": "Additional Comments",
  "required": false,
  "placeholder": "Share your thoughts..."
}

Select Dropdowns

Type: select

Dropdown with predefined options.

{
  "id": "country",
  "type": "select",
  "label": "Country",
  "required": true,
  "options": ["USA", "Canada", "UK", "Australia"]
}

Radio Buttons

Type: radio

Single selection from visible options.

{
  "id": "rating",
  "type": "radio",
  "label": "How satisfied are you?",
  "required": true,
  "options": ["Very Satisfied", "Satisfied", "Neutral", "Unsatisfied"]
}

Checkboxes

Type: checkbox

Multiple selections allowed.

{
  "id": "interests",
  "type": "checkbox",
  "label": "Select your interests",
  "required": false,
  "options": ["Sports", "Music", "Reading", "Travel"]
}

File Upload

Type: file

File upload input.

{
  "id": "resume",
  "type": "file",
  "label": "Upload Resume",
  "required": true
}

Field Rendering Status: While the validation schema supports all 9 field types, the current UI implementation fully supports text, email, textarea, number, select, radio, and checkbox types. The date and file types are validated but display as “Unsupported field type” in the form preview and public submission pages.

Example Prompts

Customer Feedback

Prompt:

Create a customer feedback form with name, email, 
satisfaction rating (1-5 stars), product quality rating, 
and a comments section

Generated Form:

• Full Name (text, required)
• Email (email, required)
• Satisfaction Rating (radio, 1-5 stars)
• Product Quality (select, Excellent/Good/Fair/Poor)
• Comments (textarea, optional)

Event Registration

Prompt:

Event registration form with attendee name, email, 
number of guests, meal preference (vegetarian, 
non-vegetarian, vegan), and dietary restrictions

Generated Form:

• Attendee Name (text, required)
• Email Address (email, required)
• Number of Guests (number, required)
• Meal Preference (radio, 3 options)
• Dietary Restrictions (textarea, optional)

Job Application

Prompt:

Job application form with personal details, position 
applying for, years of experience, skills (checkboxes), 
and resume upload

Generated Form:

• Full Name (text, required)
• Email (email, required)
• Position (select, multiple roles)
• Years of Experience (number, required)
• Skills (checkbox, multiple options)
• Resume (file, required)

AI System Prompt

The AI uses a carefully crafted system prompt to ensure consistent, valid output:

// lib/aiFormGeneration.ts:10-34
const systemPrompt = `
You are a form schema generator.
Generate a JSON form schema based on the user's requirements.

Return ONLY valid JSON in the following format:
{
  "title": "Form Title",
  "fields": [
  {
    "id" : "unique_field_id",
    "type": "text" | "number" | "email" | "date" | "select" | "checkbox" | "radio" | "textarea" | "file",
    "label": "Field Label",
    "required": true | false,
    "placeholder": "Placeholder text",
    "options": ["Option 1", "Option 2"] // Only for select, checkbox, radio types
    "validation": {
    "min" : 0,
    "max" : 100,
  }
}  ]
}
Support the following field types: text, number, email, date, select, checkbox, radio.
Make IDs unique and descriptive.
Ensure the JSON is well-formed.
`;

The response_format: { type: 'json_object' } parameter ensures Groq always returns valid JSON, reducing parsing errors.

Error Handling

The system handles multiple error scenarios:

Common Errors:

• Empty or missing prompt → 400 Bad Request
• Invalid JSON from AI → Form generation failed
• Schema validation failure → Specific validation error
• Unauthorized access → 401 Unauthorized

// lib/aiFormGeneration.ts:59-62
catch (error) {
  console.log("Groq API error : ", error);
  throw new Error("Error in generating form schema");
}

Schema Validation

All generated schemas are validated using Zod before database insertion:

// lib/validations.ts:4-28
const FormFieldSchema = z.object({
  id: z.string().min(1),
  type: z.enum([
    "text", "email", "date", "number", "textarea",
    "select", "radio", "checkbox", "file"
  ]),
  label: z.string().min(1),
  placeholder: z.string().optional(),
  required: z.boolean().optional(),
  options: z.array(z.string()).optional(),
  validation: z.object({
    min: z.number().optional(),
    max: z.number().optional(),
    minLength: z.number().optional(),
    maxLength: z.number().optional(),
  }).optional(),
});

The validator ensures that select, radio, and checkbox fields always have options, and that all field IDs are unique.

API Endpoint

POST /api/forms/generate

Request Body:

{
  "prompt": "Create a contact form with name, email, and message"
}

Response:

{
  "success": true,
  "formId": "cm123abc",
  "slug": "contact-form-abc123",
  "title": "Contact Form",
  "message": "Form generated successfully"
}

Implementation: app/api/forms/generate/route.ts