How to Build an AI Agent that Builds Full-Stack Apps

An open-source starter kit for building a “Lovable.dev”-style AI agent

More and more, we’re seeing AI agents build entire applications from a single prompt. Platforms like Lovable.dev and Manus are pioneering this space, many of them are using TiDB Cloud to power their data layer. So, we decided to build one too, as a public, open-source kit you can use as a starting point to build your own AI-driven development platform.

The code is now public and open-sourced here: https://github.com/pingcap/full-stack-app-builder-ai-agent

---

What can this agent do?

This agent is an AI chat app and codegen platform that ties together everything you need to prompt (aka. vibe code) complete web applications end-to-end. It can:

• Generate complete web apps from a prompt. You describe what you want to build, and the agent scaffolds it automatically with the correct files, dependencies, and setup.
• Provision a TiDB Cloud database automatically. Every generated project gets its own TiDB Cloud cluster — database, schema, and connection string fully preconfigured. Each instruction within the same project is versioned as a separate TiDB Cloud branch, ensuring isolated and trackable iterations.
• Track project versions. The agent stores every generated app and its database credentials (user, password, branch info), so you can revisit previous versions or roll back safely. Most importantly, your database always stays in sync with the selected project version.
• Run and preview apps instantly. Test each generated project directly from the UI or open the preview URL immediately.
• Keep context between generations. The agent remembers your previous instructions and builds on them, enabling iterative refinement instead of isolated one-shot generations.
• Scale down when idle. Each generated app uses TiDB Cloud, which automatically scales to zero when unused.

Architecture Overview

This architecture transforms natural-language prompts into production-ready web apps by combining:

• Codex (gpt-5.1-codex) or Claude Code for reasoning and codegen
• TiDB Cloud for cluster-level, branchable data environments
• Kysely for type-safe SQL
• Vercel for execution and deployment
• GitHub for version control

At the center of this stack is TiDB Cloud, acting as the central nervous system for the entire operation. It serves as both the control-plane database for the platform itself and provides the branchable, on-demand data environments for every app the agent generates.

How It Works: The Agent’s End-to-End Flow

Part 1: The Agent’s Toolkit

Before the agent can generate or deploy anything, it must authenticate itself against all the external systems it orchestrates. These credentials form the control plane — the unified interface through which the agent provisions environments, generates code, manages data, and ships applications.

The agent requires:

• GitHub Token: Creates repositories, pushes generated code, and manages branches. GitHub becomes the source of truth for code checkpoints.
• Vercel Token: Creates ephemeral sandboxes, uploads build artifacts, and deploys web apps. Vercel acts as the execution layer.
• Codex or Claude Code API Keys: Enable reasoning and planning. The model acts as the brain of the system.
• TiDB Cloud API Keys: Allow the agent to programmatically create, manage, and branch TiDB Cloud clusters, providing isolated data environments and the backbone for safe iteration.

Together, these credentials let the agent fully automate the lifecycle: plan → provision → generate → migrate → deploy → iterate.

Part 2: The App-Building Workflow in Action

Step 1 — Prompt

User: “Build a Todo List app.”

Step 2 — Plan

The model analyzes requirements and generates an execution plan.

Step 3 — Provision

The agent creates a new TiDB Cloud cluster, a Vercel Sandbox, and sets environment variables.

Step 4 — Generate Code

Codex / Claude Code generates the application code (pages, components, API routes) and the Kysely schema & migration files.

Step 5 — Database Migration

Kysely applies typed migrations to the TiDB Cloud cluster.

Step 6 — Deploy

The agent commits to GitHub and triggers a Vercel deployment.

Step 7 — Iterate with follow-up instruction

For example: “Add a username field.”

The agent creates a newTiDB Cloud branch, updates the schema, regenerates and applies migrations, updates the UI/API code, and redeploys. Everything stays isolated and reversible.

Magic Features: Where It All Clicks

Technique 1: Syncing Code and Data with Git + TiDB Branches

Every instruction becomes a lightweight checkpoint for both code and data. Each version stores the Git repo name & branch name alongside theTiDB Cloud cluster ID and branch name, ensuring perfect code–data synchronization.

Example: Creating a TiDB Cloud Branch Programmatically

import fetch from "node-fetch";

const SERVERLESS_API_BASE = "https://serverless.tidbapi.com/v1beta1";

async function createBranch(clusterId, newBranchName, publicKey, privateKey) {
  const url = `${SERVERLESS_API_BASE}/clusters/${clusterId}/branches`;
  const body = JSON.stringify({ displayName: newBranchName });

  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization:
        "Basic " + Buffer.from(`${publicKey}:${privateKey}`).toString("base64"),
    },
    body,
  });

  if (!response.ok) {
    const text = await response.text();
    throw new Error(`Failed to create branch: ${response.status} ${text}`);
  }

  const data = await response.json();
  return data.branchId;
}

createBranch(
  "1234567890",
  "new-feature-branch",
  process.env.TIDB_CLOUD_PUBLIC_KEY,
  process.env.TIDB_CLOUD_PRIVATE_KEY
)
  .then((branchId) => console.log("Branch created:", branchId))
  .catch(console.error);

Technique 2: Safe, Type-Safe Schema Migrations with Kysely

When the agent needs to change the schema, it generates a Kysely migration file. This makes schema evolution safe, reversible, and fully automated.

Example: A Kysely Migration File

import type { Kysely } from "kysely";

export async function up(db: Kysely<any>) {
  await db.schema
    .alterTable("todo_list")
    .addColumn("username", "varchar(255)", (col) => col.notNull().defaultTo(""))
    .execute();
}

export async function down(db: Kysely<any>) {
  await db.schema
    .alterTable("todo_list")
    .dropColumn("username")
    .execute();
}

Safe, reversible schema evolution — fully automated.

Technique 3: On-Demand Dev Environments with Scale-to-Zero

TiDB Cloud automatically scales down to $0 when idle, enabling:

• Ephemeral, AI-generated apps
• On-demand development environments
• Branch-per-instruction workflows
• Burst-heavy workloads from agents

The agent can create many isolated environments without persistent costs.

Wrapping Up

This starter kit is more than just code; it’s a blueprint for building dynamic, AI-driven applications. The key takeaway is treating your database not as a static box, but as a programmable, API-driven resource… We’ve open-sourced the entire thing so you can dig in… Fork the repo, try it out, and see what you can create. The tools are here.

Ready to Build Your Own?

Explore TiDB Cloud for the database branching and scale-to-zero features used in this project. No credit card is required to get started.