Site Builder Example

An AI-powered site builder demonstrating Mesa Code Storage and Vercel Sandbox. Think of it as a lightweight Lovable or v0 clone.

Chat with AI to build React apps. Every generation is saved as a Git commit in Mesa and instantly previewed in a live sandbox.

Note: This is a local development example. It has no authentication, so it's not designed to be deployed publicly.

Features

• AI Code Generation - Describe what you want, get working React code
• Version Control - Every generation is a Git commit with full history
• Live Preview - See your app running instantly with Hot Module Replacement
• Iterative Development - Build on previous generations with context

Architecture

┌─────────────────────────────────────────────────────────────────────┐
│                         Site Builder App                            │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   ┌──────────────┐    ┌──────────────┐    ┌──────────────┐         │
│   │  Chat Panel  │    │  Code Panel  │    │Preview Panel │         │
│   │              │    │              │    │              │         │
│   │  User input  │───▶│  Generated   │───▶│  Live app    │         │
│   │  AI response │    │  React code  │    │  via iframe  │         │
│   └──────────────┘    └──────────────┘    └──────────────┘         │
│                                                                     │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   ┌──────────────┐    ┌──────────────┐    ┌──────────────┐         │
│   │   Anthropic  │    │     Mesa     │    │    Vercel    │         │
│   │    Claude    │    │Code Storage  │    │   Sandbox    │         │
│   │              │    │              │    │              │         │
│   │  Generates   │    │  Stores code │    │  Runs code   │         │
│   │  React code  │    │  as commits  │    │  with Vite   │         │
│   └──────────────┘    └──────────────┘    └──────────────┘         │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Quick Start

Prerequisites

• Bun runtime
• Mesa account and API key
• Anthropic API key
• Vercel account (for Sandbox access)

Setup

# Clone and install
git clone https://github.com/mesa-dot-dev/site-builder-example
cd site-builder-example
bun install

# Link to Vercel (required for Sandbox API access, not for deployment)
vercel link
vercel env pull .env.local

# 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

# Run locally
bun run dev

Open http://localhost:3000 and start building.

Project Structure

site-builder-example/
├── app/
│   ├── page.tsx              # Main UI with 3-panel layout
│   └── api/
│       ├── projects/         # Project CRUD endpoints
│       └── generate/         # AI generation + Mesa + Sandbox
├── components/
│   ├── chat-panel.tsx        # Chat interface
│   ├── code-panel.tsx        # Code display with syntax highlighting
│   └── preview-panel.tsx     # Sandbox iframe
├── lib/
│   ├── mesa.ts               # Mesa SDK wrapper
│   ├── sandbox.ts            # Vercel Sandbox manager
│   ├── ai.ts                 # Anthropic Claude integration
│   └── db/                   # SQLite for local state
└── drizzle/                  # Database migrations

How It Works

Mesa Code Storage

Mesa provides programmatic Git hosting for AI agents. Instead of managing local repositories, your app makes API calls to create commits:

// lib/mesa.ts - Save generated code as a Git commit
export async function saveCode(repo: string, code: string, message: string) {
  const commit = await mesa.commits.create({
    org: MESA_ORG,
    repo,
    body: {
      branch: "main",
      message,
      author: {
        name: "AI Builder",
        email: "ai@site-builder.example",
      },
      files: [
        {
          path: "App.tsx",
          content: code,
          action: "upsert",
        },
      ],
    },
  });
  return commit;
}

Every AI generation creates a new commit. Users get full version history, can see diffs, and can roll back to previous versions.

Vercel Sandbox

Sandbox provides ephemeral Linux VMs that start in seconds. This app uses a three-level caching strategy for fast previews:

1. Memory Cache - Active sandboxes stay in memory for instant HMR updates (~100ms)
2. Database Cache - Sandbox IDs persist so we can reconnect after server restart
3. Snapshot Cache - Pre-configured images with Node.js and packages installed (~3s cold start)

// lib/sandbox.ts - Update code with HMR (no page reload)
export async function updatePreview(projectId: string, code: string) {
  const sandbox = activeSandboxes.get(projectId);
  if (!sandbox) return null;
  
  // Just write the file - Vite HMR handles the rest
  await sandbox.writeFiles([
    { path: "src/App.tsx", content: Buffer.from(code) }
  ]);
  
  return sandbox.domain(3000);
}

The result: First generation takes ~3 seconds, subsequent edits update in ~100ms.

AI Generation Flow

When a user sends a message:

1. Generate - Claude creates React code with the user's prompt + existing code as context
2. Stream - Code streams to the frontend in real-time
3. Save - Complete code is saved as a Mesa commit
4. Preview - Code is written to sandbox, Vite HMR updates the preview

// app/api/generate/route.ts - Simplified flow
const result = await generateCode(prompt, existingCode);

// Stream to frontend
for await (const chunk of result.textStream) {
  controller.enqueue(/* stream chunk */);
}

// Save to Mesa
const commit = await saveCode(project.mesaRepo, cleanCode, message);

// Update preview (HMR if sandbox exists, else create new)
if (existingSandbox) {
  await updatePreview(projectId, cleanCode);  // ~100ms
} else {
  await createPreview(projectId, cleanCode);  // ~3s
}

API Reference

Projects

Endpoint	Method	Description
/api/projects	GET	List all projects
/api/projects	POST	Create new project (creates Mesa repo)
/api/projects/[id]	GET	Get project details
/api/projects/[id]	DELETE	Delete project
/api/projects/[id]/commits	GET	Get Mesa commit history

Generation

Endpoint	Method	Description
/api/generate	POST	Stream AI generation, save to Mesa, create preview

The generate endpoint returns a Server-Sent Events stream:

// Event types
{ type: "code", content: "chunk of code..." }     // Streaming code
{ type: "code_complete", code: "full code" }      // Generation done
{ type: "status", message: "Saving to Mesa..." }  // Status update
{ type: "commit", sha: "abc123" }                 // Mesa commit created
{ type: "preview", url: "https://...", isHmrUpdate: true }  // Preview ready
{ type: "done", code: "full code" }               // All done

Tech Stack

Technology	Purpose
Next.js 15	React framework with App Router
Mesa	Programmatic Git hosting for AI
Vercel Sandbox	Ephemeral Linux VMs
Vercel AI SDK	Streaming AI responses
Anthropic Claude	Code generation model
Drizzle ORM	Type-safe database queries
shadcn/ui	UI components
Tailwind CSS	Styling

Environment Variables

Variable	Description
MESA_API_KEY	Your Mesa API key
MESA_ORG	Your Mesa organization name
ANTHROPIC_API_KEY	Your Anthropic API key
VERCEL_TOKEN	For Sandbox API access (auto-populated by vercel env pull)

Learn More

• Mesa Documentation - Programmatic Git for AI
• Vercel Sandbox Docs - Ephemeral compute
• Vercel AI SDK - Build AI applications
• Anthropic Claude - AI model documentation

License

MIT