Site Builder Example

A lightweight Lovable clone showcasing Mesa Code Storage and Vercel Sandbox.

What it does

1. Create a project - Creates a new Git repository in Mesa
2. Describe what you want - AI generates React code using Claude
3. See it live - Code is saved to Mesa and previewed in a Vercel Sandbox

Tech Stack

• Next.js - React framework
• Mesa - Programmatic Git hosting for AI agents
• Vercel Sandbox - Ephemeral Linux VMs for live previews
• Vercel AI SDK - Streaming AI responses with Anthropic Claude
• Tailwind CSS - Styling
• shadcn/ui - UI components

Getting Started

Prerequisites

• Bun installed
• Mesa account and API key
• Anthropic API key
• Vercel account (for sandbox)

Setup

1. Clone the repository:

git clone https://github.com/mesa-dot-dev/site-builder-example
cd site-builder-example

2. Install dependencies:

bun install

3. Link to Vercel and pull environment variables:

vercel link
vercel env pull .env.local

4. Add your API keys to .env.local:

MESA_API_KEY=your_mesa_api_key
MESA_ORG=your_mesa_org
ANTHROPIC_API_KEY=your_anthropic_api_key

5. Run the development server:

bun run dev

6. Open http://localhost:3000

How it Works

Mesa Code Storage

Mesa provides programmatic Git repositories without needing local clones. This example uses Mesa to:

• Create a new repository for each project (POST /api/projects)
• Save generated code as commits (mesa.commits.create())
• Retrieve code history (mesa.commits.list())

// Create a commit with the generated code
await mesa.commits.create({
  org: "your-org",
  repo: "project-abc123",
  body: {
    branch: "main",
    message: "AI: Build a todo app",
    author: { name: "AI Builder", email: "ai@example.com" },
    files: [{ path: "App.tsx", content: code, action: "upsert" }],
  },
});

Vercel Sandbox

Vercel Sandbox provides ephemeral Linux VMs to run the generated code:

// Create a sandbox and start a dev server
const sandbox = await Sandbox.create({
  runtime: "node24",
  ports: [3000],
  timeout: 5 * 60 * 1000,
});

await sandbox.writeFiles([{ path: "App.tsx", content: Buffer.from(code) }]);
await sandbox.runCommand("bun", ["install"]);
await sandbox.runCommand({ cmd: "bun", args: ["run", "dev"], detached: true });

const previewUrl = sandbox.domain(3000);

API Routes

• POST /api/projects - Create a new Mesa repository
• POST /api/generate - Stream AI code generation, save to Mesa, create sandbox preview

Learn More

• Mesa Documentation
• Vercel Sandbox Documentation
• Vercel AI SDK

License

MIT