FormCraft AI

Turn natural-language prompts into customizable, shareable forms with AI.

FormCraft AI is a full-stack SaaS application that uses Google Gemini to help users create forms, customize their appearance, publish public links, collect responses, and review submission analytics. It also includes authentication, subscription management, and automated quality checks.

Live Demo · Source Code

---

📑 Table of Contents

• Overview
• Screenshots
• Features
• How It Works
• Technology Stack
• Testing and Code Quality
• Getting Started
• Environment Variables
• Database Setup
• Available Commands
• Project Structure
• Payment Flow
• Security Considerations
• Roadmap
• Contributing
• Author

---

Overview

Creating forms manually can be repetitive. FormCraft AI lets users describe what they need in natural language and uses Google Gemini to generate a structured form that they can review and customize.

The application brings the entire form creation workflow together in one place:

• Generate form fields from a natural-language prompt.
• Edit fields and customize the form's appearance.
• Publish forms through shareable public URLs.
• Collect submissions and review responses.
• Export responses to Excel and view analytics.
• Manage Free and Pro access through subscription functionality.

The project also includes unit and component tests, browser-based end-to-end tests, linting, production build verification, and a GitHub Actions CI workflow.

Live application	https://formcraft-ai-mocha.vercel.app
GitHub repository	https://github.com/Vishwak-Tech/ai-formbuilder

---

Screenshots

Landing Page	Dashboard
AI Form Generator	Public Form
Responses Dashboard	Analytics
Upgrade Page

---

Features

🤖 AI-Powered Form Generation

• Generate form definitions from natural-language prompts using Google Gemini.
• Convert generated structured content into editable form fields.
• Handle loading states and generation failures.

📝 Dynamic Form Builder

• Preview forms while editing.
• Render fields dynamically from the form definition.
• Edit field labels and remove fields.
• Customize themes, backgrounds, and form branding.

🌍 Publishing and Sharing

• Publish forms with shareable public URLs.
• Provide responsive public form pages.
• Validate responses before submission.

📥 Responses and Analytics

• Collect and manage form submissions.
• Review submissions from the dashboard.
• Export responses to Excel.
• View form response analytics.

🔐 Authentication

• Sign up and sign in with Clerk.
• Protect dashboard routes.
• Manage authenticated user sessions.

💳 Subscription Management

• Integrate Razorpay for payments.
• Verify payment signatures using HMAC.
• Support monthly Pro subscriptions.
• Track subscription status and expiry.
• Gate features based on Free and Pro access.

🎨 User Experience

• Neo-brutalism-inspired visual design.
• Responsive dashboard layouts.
• Mobile-friendly public forms.
• Interactive form creation and customization.

---

How It Works

1. Describe: The user enters a prompt explaining the form they need.
2. Generate: Google Gemini produces a structured form definition.
3. Validate: The generated content is parsed and validated.
4. Customize: The user edits fields and adjusts the form's appearance.
5. Publish: The form is made available through a public URL.
6. Collect: Respondents submit their answers.
7. Review: The owner reviews submissions, exports responses, and checks analytics.

Natural-language prompt
          ↓
     Google Gemini
          ↓
Parse and validate generated content
          ↓
       Save form
          ↓
   Edit and customize
          ↓
    Publish public URL
          ↓
  Collect form responses
          ↓
Review submissions and analytics

---

Technology Stack

Area	Technology
Framework	Next.js 16
UI library	React 19
Styling	Tailwind CSS 4
Authentication	Clerk
AI integration	Google Gemini
Database	Neon PostgreSQL
ORM	Drizzle ORM
Payments	Razorpay
Unit and component tests	Vitest, React Testing Library
End-to-end tests	Playwright
Linting	ESLint
CI	GitHub Actions
Deployment	Vercel

---

Testing and Code Quality

FormCraft AI includes automated tests and CI checks to help detect regressions during development.

Reported Test and Build Results

Check	Tool	Reported result
Unit and component tests	Vitest	✅ 38 tests passed
Component testing	React Testing Library	✅ Included in Vitest suite
Browser end-to-end tests	Playwright	✅ 8 tests passed
Linting	ESLint	✅ Passed
Production build	Next.js	✅ Passed
Continuous integration	GitHub Actions	✅ Successful workflow run

Note

These are the results documented for the project. Rerun the commands and inspect the latest workflow before relying on them as current status.

What Is Tested?

• Form creation dialog and user interactions.
• AI form generation loading and failure states.
• Form generation logic with mocked dependencies.
• API route behavior and payment verification.
• Subscription logic with mocked database queries.
• Homepage rendering and major sections.
• Access behavior for unauthenticated and authenticated dashboard users.
• Create Form dialog interactions in the browser.

Run Unit and Component Tests

npx vitest run

Run Vitest in watch mode during development:

npx vitest

Run End-to-End Tests

Install the required Playwright browser if needed:

npx playwright install chromium

Run the Chromium test suite with one worker:

npx playwright test --project=chromium --workers=1

Important

E2E prerequisite: Authenticated scenarios require a valid local Playwright authentication state. Keep authentication-state files and credentials out of version control.

Run Linting and Build Checks

npx eslint .
npm run build

Continuous Integration

The GitHub Actions workflow runs on pushes to main and on pull requests targeting main. The documented workflow:

1. Checks out the repository.
2. Sets up Node.js.
3. Installs dependencies using npm ci.
4. Runs ESLint.
5. Runs the Vitest suite.
6. Builds the production application.

Workflow configuration: .github/workflows/ci.yml

Warning

Current testing scope: The documented CI workflow does not run a separate live-database integration suite or the Playwright E2E suite. Database behavior in unit tests is mocked. Passing these checks does not establish that every production integration or payment scenario has been verified.

---

Getting Started

Follow these steps to run FormCraft AI locally.

Prerequisites

• Node.js version compatible with the project
• npm
• A Neon PostgreSQL database
• A Clerk application
• Google Gemini API access
• A Razorpay account (only if you want to use payment functionality)

1. Clone the Repository

git clone https://github.com/Vishwak-Tech/ai-formbuilder.git
cd ai-formbuilder

2. Install Dependencies

npm ci

3. Configure Environment Variables

Create a .env.local file in the project root and add the variables expected by the application. See Environment Variables.

4. Set Up the Database

After reviewing the schema changes and confirming that the connection points to your development database, run:

npm run db:push

5. Start the Development Server

npm run dev

Open http://localhost:3000 in your browser.

Try the Application

1. Create an account or sign in.
2. Open the dashboard.
3. Select Create AI Form.
4. Describe the form you want to generate.
5. Review and customize the generated fields.
6. Publish the form and share its public URL.
7. Review submissions in the dashboard.

Example prompt:

Create a customer feedback form for a restaurant with a rating,
comments, and contact information.

---

Environment Variables

The following variable names are documented by the current project. Confirm each name against the code before configuring a deployment.

NEXT_PUBLIC_DATABASE_URL_CONFIG=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_GEMINI_API_KEY=
NEXT_PUBLIC_RAZORPAY_KEY_ID=
RAZORPAY_KEY_SECRET=
NEXT_PUBLIC_APP_URL=http://localhost:3000

Important Configuration Notes

• General: Never commit .env.local, API secrets, database credentials, or real payment credentials. Variables prefixed with NEXT_PUBLIC_ can be exposed to browser code when referenced by client-side modules.
• Database: If NEXT_PUBLIC_DATABASE_URL_CONFIG contains a database connection string or credentials, rename it to a server-only variable and ensure it is only accessed by server-side code.
• Gemini: If NEXT_PUBLIC_GEMINI_API_KEY is used in browser code, the key may be exposed. Prefer making authenticated, validated requests through server-side code and keeping the key in a server-only environment variable.
• Clerk: Keep CLERK_SECRET_KEY on the server. The publishable key is intended for client-side configuration.
• Razorpay: Keep RAZORPAY_KEY_SECRET on the server. The key ID may be public, but payment verification must be performed on the server.
• App URL: Set the production application URL to the actual deployed origin.

Note

The variable names above preserve the supplied project's configuration. Review the implementation before changing names, since the code must be updated to match.

---

Database Setup

The project uses Neon PostgreSQL with Drizzle ORM. To push the configured schema to your database:

npm run db:push

Caution

Use this command only after confirming the target database and reviewing the schema changes. Prefer a development database while setting up the project locally.

---

Available Commands

Command	Purpose
npm run dev	Start the development server
npm run build	Create a production build
npx eslint .	Run ESLint
npx vitest	Run tests in watch mode
npx vitest run	Run tests once
npx playwright install chromium	Install the Chromium browser for Playwright
npx playwright test --project=chromium --workers=1	Run the Chromium E2E suite
npm run db:push	Push the Drizzle schema to the configured database

These commands reflect the supplied README. Check package.json and the current Playwright configuration if a command behaves differently in your checkout.

---

Project Structure

app/
├── api/
│   ├── create-order/
│   └── verify-payment/
├── dashboard/
│   ├── _components/
│   ├── analytics/
│   ├── responses/
│   └── upgrade/
├── aiform/
├── edit-form/
├── sign-in/
├── sign-up/
└── _components/
components/
└── ui/
configs/
├── index.js
└── schema.js
lib/
├── razorpay.js
└── subscription.js
e2e/
├── homepage.spec.js
├── dashboard.spec.js
└── create-form.spec.js
.github/
└── workflows/
    └── ci.yml
vitest.config.js
playwright.config.js

This is a high-level view of the structure documented for the project. Individual files may vary as the repository evolves.

---

Payment Flow

The documented Razorpay flow is:

User selects a Pro plan
          ↓
Create Razorpay order
          ↓
User completes payment
          ↓
Verify payment signature on the server
          ↓
Create or update subscription
          ↓
Enable Pro features

Important

Security requirement: Never treat a client-side payment success message as proof of payment. Verify the payment signature server-side and validate the order, amount, payment status, and association with the intended user before granting subscription access.

---

Security Considerations

The project integrates authentication, AI APIs, database access, public forms, and payments. Before using it with real users, review the following areas:

Area	Recommendation
Secrets	Keep database credentials, Clerk secret keys, Gemini keys, and Razorpay secrets server-side.
Authentication & authorization	Enforce ownership checks on form management, responses, analytics, and subscription operations. Hiding a UI element is not an authorization control.
Public form submissions	Validate submitted data on the server, enforce field and payload limits, and consider rate limiting and spam protection.
AI input and output	Treat prompts and generated content as untrusted. Validate the generated schema before saving or rendering it.
Payments	Verify signatures server-side and validate order identity, amount, status, and user association before updating subscriptions.
Database changes	Use the intended environment and review schema changes before applying them.
Testing	Add integration tests for critical database and payment paths, and include E2E tests in CI when the required authentication setup is available.

Note

These are recommended review areas, not claims that every item is already implemented or that a vulnerability has been confirmed.

---

Roadmap

Version 1.1

• Improve analytics and response insights
• Add more AI form templates
• Improve dashboard usability
• Expand automated test coverage

Version 2.0

• Authentication-required public forms
• Team workspaces and collaboration
• Email notifications
• AI-powered response insights
• PDF export
• Custom domains
• Webhooks and API access

---

Contributing

Contributions, bug reports, and suggestions are welcome.

1. Fork the repository.

2. Create a feature branch:

   git checkout -b feature/my-feature

3. Make your changes and run the relevant checks:

   npx eslint .
   npx vitest run
   npm run build

4. Commit your changes:

   git commit -m "feat: describe your change"

5. Push your branch:

   git push origin feature/my-feature

6. Open a pull request with a clear description of the change.

---

Author

Vishwak Koleti

• GitHub: Vishwak-Tech
• LinkedIn: www.linkedin.com/in/vishwak-koleti-tech

⭐ Support

If you find FormCraft AI useful:

• Star the repository.
• Fork the project.
• Report bugs or suggest improvements.

---

Built with Next.js, React, Tailwind CSS, Google Gemini, Clerk, Drizzle ORM, Neon PostgreSQL, Razorpay, Vitest, Playwright, and GitHub Actions.