How I Built an AI Form Builder with Next.js 15 + Supabase + Claude API

#ai #claude #nextjs #showdev

The Problem

Google Forms is free but ugly and limited. Typeform looks great but costs $29/month minimum. Building custom forms takes hours of coding.

I wanted something in between — a tool where you describe what form you need, and AI builds it instantly.

So I built FormAI — an AI-powered form builder that creates smart forms from text descriptions in 10 seconds.

How It Works

You type: "Customer feedback form with star rating, comments box, and email follow-up"

FormAI's AI analyzes your description and generates:

The right field types (stars, textarea, email)
Validation rules (required fields, email format)
Conditional logic (show follow-up questions based on rating)
Professional design with your branding

In 10 seconds. No coding.

Tech Stack

Here's everything I used:

Next.js 15 (App Router) — framework
TypeScript — type safety
Supabase — auth, database, storage, realtime
Claude API — AI form generation
Tailwind CSS — styling
Vercel — hosting and deployment
Lemon Squeezy — payment processing
Sentry — error monitoring
Google Analytics — usage tracking

Total monthly cost to run: ~$20

The AI Architecture

The core of FormAI is the form generation pipeline:

User describes the form in natural language
I send the description to Claude API with a system prompt that includes form field types, validation rules, and design patterns
Claude returns structured JSON with the complete form schema
The frontend renders the form in a drag-and-drop editor
User customizes if needed, then publishes

The key insight: prompt engineering is 80% of the product quality. I spent more time refining the system prompt than writing actual code.

Here's a simplified version of how the AI call works:

const response = await anthropic.messages.create({
  model: "claude-haiku-4-5-20251001",
  max_tokens: 2048,
  system: `You are a form builder AI. Generate a complete form 
    based on the user's description. Return JSON with fields, 
    validation rules, and conditional logic.`,
  messages: [{ role: "user", content: userDescription }]
});

Supabase Setup

Supabase handles everything on the backend:

Auth: Google OAuth + email/password login
Database: PostgreSQL for forms, responses, user data
Storage: File uploads in form responses
Row Level Security: Each user only sees their own forms

The RLS policies were tricky at first but once set up, I never had to worry about authorization again. Supabase handles it at the database level.

Lessons Learned

1. Ship ugly, then improve
My first version looked terrible. But real users gave me feedback that shaped the product. Don't wait for perfection.

2. Supabase Auth + RLS saves weeks
Instead of building auth from scratch, Supabase gave me Google OAuth, email auth, and row-level security out of the box.

3. AI prompt engineering > code
The quality of my AI-generated forms improved 10x just by improving the system prompt. The code barely changed.

4. Next.js App Router has a learning curve
Server components, loading states, error boundaries — it's powerful but took time to understand properly.

5. Solo founder means you do everything
Design, code, marketing, support, payments, SEO, legal. There's no "that's not my job" when you're alone.

My Story

I'm a Pakistani developer working in a Korean factory on an E-9 manufacturing visa. I built FormAI at night after 10-hour shifts. No funding, no team, no CS degree.

If I can ship a SaaS product from a factory dormitory in Busan, you can build something too. The tools available today (Next.js, Supabase, AI APIs) make it possible for anyone to build production software.