Frontend development can be a grind if you don’t play it smart, from TypeScript errors that break your flow, and general-purpose AI agents. After trying out Cursor, Claude Code, and GitHub Copilot, I decided to test Kombai, a frontend-specialized AI agent, to build the Frontend for my projects as I mostly build APIs, servers with my backend development skills.
Every new product launch needs a way to capture early interest, that’s where a waitlist website comes in. Instead of building the full product right away, you create a simple landing page where people can sign up, and stay informed for the product launch.
In this guide, we’ll build a waitlist website for a tech product,Futturee, the waitlist will have a landing page, a signup form, and a backend to store signups, all with Kombai.
Ready? Let’s get started!
Prerequisites
To follow along, make sure you have all of this
- Node and NPM/yarn installed on your computer
- An IDE like VS Code/Windsurf
- React/Next.js knowledge
- Knowledge of Express.js and Node.js
- A Kombai account, sign up here
The waitlist we are building will have these:
Frontend (Landing page)
- A clean landing page with a product headline and short description.
- A signup form where users can enter their email and a confirmation message after a successful signup
Backend (API & Storage)
- An API endpoint to handle form submissions.
- A database to store the email signups.
Project Setup
Now let’s get into building the project, we’ll start building the backend
Backend
Create a new folder, and open it in your command terminal. Then run these commands to create and navigate to the backend directory
mkdir waitlist-backend && cd waitlist-backend
npm init -y
Then install the needed dependencies for the project
npm install express cors mongoose dotenv
After the dependencies have been installed, create an .env file to securely store the environment variables:
PORT=5000
MONGO_URI=mongodb://127.0.0.1:27017/waitlist # local example
ADMIN_TOKEN=your-secret-token
Next, add the start script in package.json file like so:
"scripts": {
"start": "node index.js"
}
When building the backend for a project, the index.js file contains the main server code for the project, so in the root directory, create the file and enter this code below:
require("dotenv").config();
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
// --------------------------------------------
// Config
// --------------------------------------------
const PORT = process.env.PORT || 5000;
const MONGO_URI = process.env.MONGO_URI;
const ADMIN_TOKEN = process.env.ADMIN_TOKEN || null;
// --------------------------------------------
// Mongoose Setup
// --------------------------------------------
mongoose
.connect(MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log("✅ Connected to MongoDB"))
.catch((err) => {
console.error("❌ MongoDB connection failed:", err);
process.exit(1);
});
// Define schema & model
const waitlistSchema = new mongoose.Schema({
email: { type: String, required: true, unique: true, lowercase: true, trim: true },
joinedAt: { type: Date, default: Date.now },
});
const WaitlistEntry = mongoose.model("Waitlist", waitlistSchema);
// --------------------------------------------
// Express Setup
// --------------------------------------------
const app = express();
app.use(cors());
app.use(express.json());
// --------------------------------------------
// Routes
// --------------------------------------------
// Health check
app.get("/", (_req, res) => {
res.send("Waitlist API is running with MongoDB.");
});
app.post("/api/join", async (req, res) => {
try {
const { email } = req.body;
// Basic validation
if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
return res.status(400).json({ ok: false, message: "Invalid email address." });
}
// Normalize
const normalized = email.toLowerCase().trim();
// Try to save
const existing = await WaitlistEntry.findOne({ email: normalized });
if (existing) {
return res.status(200).json({ ok: true, message: "Already on the waitlist." });
}
await WaitlistEntry.create({ email: normalized });
return res.status(201).json({ ok: true, message: "Added to waitlist." });
} catch (err) {
console.error("Error adding to waitlist:", err);
return res.status(500).json({ ok: false, message: "Server error." });
}
});
app.get("/api/stats", async (_req, res) => {
try {
const count = await WaitlistEntry.countDocuments();
res.json({ ok: true, count });
} catch (err) {
console.error("Error fetching stats:", err);
res.status(500).json({ ok: false, message: "Server error." });
}
});
app.get("/api/waitlist", async (req, res) => {
if (!ADMIN_TOKEN) {
return res.status(404).json({ ok: false, message: "Admin route disabled." });
}
const token = req.header("x-admin-token");
if (token !== ADMIN_TOKEN) {
return res.status(401).json({ ok: false, message: "Unauthorized." });
}
try {
const entries = await WaitlistEntry.find().sort({ joinedAt: -1 });
res.json({ ok: true, data: entries });
} catch (err) {
console.error("Error fetching waitlist:", err);
res.status(500).json({ ok: false, message: "Server error." });
}
});
// --------------------------------------------
// Start Server
// --------------------------------------------
app.listen(PORT, () => {
console.log(`🚀 Server running on http://localhost:${PORT}`);
});
The script connects to MongoDB using Mongoose, stores waitlist signups in the "waitlist" collection, provides public endpoints for POST /api/join and GET /api/stats, and includes a protected admin endpoint for GET /api/waitlist
Frontend Setup With Kombai
Now that we have the backend for the waitlist application, let’s start building the Frontend waitlist with Kombai.
Again, are you ready? 😎
What is Kombai?
Kombai is an AI agent built specifically for frontend developers. Kombai works with your IDE, such as VS Code, Cursor, Windsurf, or Trae, so you never leave your workflow.
Kombai builds beautiful, functional frontends directly from Figma designs, plain text prompts or your existing code.
Learn more about Kombai: https://kombai.com/why
It understands your codebase and follows the best practices of 30+ libraries.
Kombai is backend-agnostic, ensuring a safe and seamless integration for full-stack developers. It doesn't interact with your database or server logic, allowing you to maintain control over your APIs while Kombai focuses on crafting the frontend layer.
Follow these steps below to get started with the frontend.
- Install Kombai as an extension in your preferred IDE and sign in from the Kombai side panel
Choose your preferred IDE to install Kombai
Depending on the IDE you’re using, when you sign up with your preferred method (Google, GitHub), it connects Kombai to your IDE and shows like so:
You can also install Kombai directly from the Extension marketplace of your IDE, if you’re using VS Code, go to the extensions tab, search for Kombai and install it:
- Create the frontend project (Next.js and Tailwind)
In your project’s root directory, run this command to create a Next.js app for the Frontend of the waitlist project.
npx create-next-app@latest
cd project_name
Note: With Kombai, you can choose the tech stack and framework you want to use for your Frontend
This means you get to decide if you want to use NextJS v15, as the framework, or GraphQL for the API framework or state management, App router as the Router, the Component library like Chakra UI, the Styles, Icon pack, giving you more flexibility
- Open the Kombai panel in your IDE and let it index the codebase
If you have an existing codebase, you got to first index the codebase with Kombai. Index in this context means Kombai reads through the files to understand their structure and context, such as; components, Tailwind configurations, and TypeScript types before implementing the tasks, ensuring accurate and codebase aligned code generation.
As shown here, Kombai is indexing the codebase
Then you input the first prompt to create the landing page for the waitlist, here is a prompt you can use, copy and paste it directly in your Kombai chat:
Goal: Create a minimal, production-ready waitlist landing page in my Next.js + TypeScript + Tailwind project.
Constraints:
- Detect whether this project uses the App Router (/app) or Pages Router (/pages) and place files accordingly.
- Create a responsive hero: product title, 1–2 line value prop, and primary CTA “Join the waitlist”.
- Keep styles clean and accessible (semantic tags, labels, aria-live for form messages).
- Use Tailwind classes; avoid third-party UI libraries.
- No placeholder lorem ipsum—write concise copy.
- Add a centered container with max-w-screen-md and generous spacing on mobile.
Deliverables:
- A top-level page component (app/page.tsx or pages/index.tsx).
- A simple Header and Footer as internal components for clarity.
- No external fonts or analytics yet.
Then Kombai shows you the Planning Phase; the plan it intends to follow to build the waitlist application, you can edit and refine the plan to meet your standards
It also shows you the artifacts (code files) that will be created for the Frontend it’s building
When you’re good with it, click on the Approve Plan & Start Coding button as shown above.
After Kombai is done generating the code files, and project requirements for the Futturee (let’s call the product we’re building the waitlist for Futturee) waitlist we are building, it shows a success message describing the features of the waitlist it built
To view each code file, click on the name of the file shown. As shown above, the files include the: Hero.tsx, Features.tsx, Testimonials.tsx, Footer.tsx, and the page.waitlist.tsx
Kombai also shows this modal for you to View and Save the code.
Here you can review the code, tell Kombai to make any adjustments or improvements
Kombai also shows you the Build & Config files used for the waitlist project like so:
Then you click on the Save button to proceed.
Run and previewing the waitlist frontend built with Kombai
Now that we have the waitlist ready, next is to run the application and preview it. If you’re conversant with Frontend technologies like Next/React, you should know how to run Next apps, if not you could simply ask Kombai, and it will list out the steps to run the app like so:
Basically, you open your terminal, navigate to the app directory with this command:
cd Futturee
Next you initialize the project:
npm init -y
After initializing the project it shows this output
Then you install the dependencies for the project:
npm install next@latest react@latest react-dom@latest typescript@latest @types/node@latest @types/react@latest @types/react-dom@latest tailwindcss@latest lucide-react@latest
After installation, next is to run the application, which is done with this command:
npm run dev
However, when we ran this, this error showed, which mention there is script not added to the package.json needed to run the app.
With Kombai, you can fix this error by copying the error message from the terminal, pasting it in the chat and prompting Kombai to fix it like so:
Kombai then proceeds to fix the errors
When it’s done fixing the errors, it shows a success message with a summary of what has been fixed and next steps to run the waitlist application
Now, we run the npm run dev command, and the app starts like so:
Copy the Local app URL: http://localhost:3000, and enter it in your browser to load the waitlist. When the application is running, the Waitlist we built with Kombai displays like so:
The waitlist frontend we built for Futturee is actually stunning and has an appealing UI, from the font to the typography and colour style!
Also with nice footer, including the waitlist CTA (Call to action)
Why Kombai Outperforms Cursor, Claude, and Copilot
Kombai shines where generic AI agents stumble, thanks to its frontend focus. Here’s why:
- Flexible Tech Stack, (That’s my favourite feature)
You can freely choose the stack you want to work with for your Fronted, like I mentioned here:
> With Kombai, you can choose the tech stack and framework you want to use for your Frontend. This means you get to decide if you want to use NextJS v15, as the framework, or GraphQL for the API framework or state management, App router as the Router, the Component library like Chakra UI, the Styles, Icon pack, giving you more flexibility. This beats the rigidity of generic tools, letting you tailor the vibe to your project.
- Clean, Maintainable Code
Trained on 30+ libraries’ best practices, Kombai separates UI from logic and reuses components, unlike Claude’s cluttered outputs.
- Specialized Tooling and High Compilation Success
Kombai had editable plans, which it shows you before starting a task with live previews, and error fixing ensure quality. Also, with a 100% compilation rate vs. Copilot’s 60%, Kombai’s code runs out of the box, thanks to auto-fixing TS/lint errors
- Repo Understanding
Kombai indexes your current codebase, reading, understanding and and matching the existing context, before building on it.
- Human-Like Context
Using human-tested RAGs, Kombai onboards you like a developer, reusing props and UI, unlike generic agents’ shallow grasp. Benchmark tests also show this: 72% code review pass rate on 200+ tasks, far ahead of SOTA models.
- Best Figma Interpretation
With Kombai’s engine you can extracts assets, UI’s directly from a Figam URL, and even connect your Figma directly with Kombai. This fixes messy layers (e.g., ungrouped nav), outperforming Cursor’s 75% fidelity and Claude’s 80% with 95% fidelity.
Here is a full preview of the Waitlist we built with Kombai:
And that’s it! We have built a Waitlist application with Kombai! Building a waitlist website may seem simple, but it touches the pain points that gives most coding agents issues: handling layouts, managing states, integrating forms/backends without having typescript errors, that’s where Kombai outperforms Cursor, Claude and Copilot for frontend development.
To learn more about Kombai and how it works under the hood, read the documentation.
While Cursor, Claude, and Copilot are solid all-rounders, Kombai’s frontend specialization approach delivered a cleaner UI, very few corrections and a smoother developer experience in building the frontend part in a full-stack application.
As software developers, we often have ideas for tech projects we want to ship, and these projects all need a Frontend and a Backend, not just any Frontend, one that is customizable to what we want. So instead of having generic UIs, try Kombai today, and build your next application!
Top comments (0)