Coding Agent Template – Vercel Labs

What it is – A ready‑to‑deploy web app that lets each user create AI‑powered coding tasks on any GitHub repository. The app spins up a Vercel Sandbox, runs a selected coding‑agent (Claude Code, OpenAI Codex CLI, GitHub Copilot CLI, Cursor CLI, Google Gemini CLI or opencode), commits the changes to an automatically‑generated branch, and shows live logs.

Core Concepts

Concept	How it works
Task	User supplies a repo URL and a natural‑language description of what they want changed. The request is stored in a Neon Postgres DB.
AI Agent	One of the supported CLI‑based agents analyses the prompt, runs inside a Vercel Sandbox, and edits the code.
Sandbox	Vercel Sandbox provides an isolated, temporary container with the repo checked out. It lives for a configurable maximum duration (5 min – 5 h).
Branch Naming	Using Vercel AI Gateway + AI SDK 5, the system creates a descriptive branch name (e.g., `feature/add-user-auth-K3mP9n`).
Git Integration	After the agent finishes, the app commits the changes and pushes the new branch to the user’s repository.
Multi‑User	Each signed‑in user has their own tasks, API keys and GitHub connection; data is scoped by a `users` table.
Keep‑Alive	Optional setting that keeps the sandbox running after the task finishes so the user can send follow‑up messages or run a dev server.

Quick Start

Click the Deploy with Vercel button in the README – Vercel will provision a Neon Postgres DB and set up the project.
In the Vercel dashboard, add at least one OAuth provider (GitHub or Vercel) and fill in the required secrets (JWE_SECRET, ENCRYPTION_KEY, sandbox tokens, etc.).
Open the deployed URL, sign in, and start creating tasks.

Or run locally: git clone … && pnpm install && pnpm db:push && pnpm dev (after creating a .env.local with the variables listed below).

Main Features

Multi‑Agent support – pick any of the six CLI agents.
Secure OAuth login – GitHub and/or Vercel, per‑user GitHub tokens.
AI‑generated branch names – non‑blocking, conflict‑free naming.
Real‑time task view – live logs, status, and result preview.
Configurable sandbox lifetime – max duration and Keep‑Alive toggle.
Persistent storage – Neon Postgres via Drizzle ORM.
Modern UI – Next.js 15 + React 19 + Tailwind + shadcn/ui.
MCP server connectors – extend Claude Code with external tools (Claude‑only).

Tech Stack (as described in the README)

Frontend: Next.js 15, React 19, Tailwind CSS, shadcn/ui
Database: Neon Postgres, accessed through Drizzle ORM
Authentication: Next‑Auth with GitHub/Vercel OAuth
AI Integration: Vercel AI Gateway + AI SDK 5 (branch naming, routing)
Coding Agents: Claude Code, OpenAI Codex CLI, GitHub Copilot CLI, Cursor CLI, Google Gemini CLI, opencode
Sandbox Execution: Vercel Sandbox service
Encryption: JWE for sessions, per‑user ENCRYPTION_KEY for API keys/tokens

How a Task Runs (step‑by‑step)

Create task → stored in DB.
Generate branch name (async) via AI SDK 5 + AI Gateway.
Spin up sandbox with the target repo.
Launch selected agent inside the sandbox; it reads the prompt and modifies files.
Commit & push the changes to the AI‑generated branch.
Cleanup – sandbox shuts down immediately (Keep‑Alive OFF) or stays alive until the timeout (Keep‑Alive ON).

Configuration Highlights

Environment variables (required for deployment):
- POSTGRES_URL – Neon connection string (auto‑filled on Vercel deploy).
- SANDBOX_VERCEL_TOKEN, SANDBOX_VERCEL_TEAM_ID, SANDBOX_VERCEL_PROJECT_ID – Vercel Sandbox credentials.
- JWE_SECRET & ENCRYPTION_KEY – for encrypting sessions and user secrets.
- NEXT_PUBLIC_AUTH_PROVIDERS – which OAuth providers to enable (github, vercel, or both).
- OAuth client IDs/secrets for the enabled providers.
Optional API keys – can be set globally or per‑user (Anthropic, OpenAI, Cursor, Gemini, AI Gateway).
Limits – MAX_SANDBOX_DURATION (default 5 h) and MAX_MESSAGES_PER_DAY (default 5) control resource usage.

Who Might Use This?

Developers who want a plug‑and‑play UI for AI‑driven code refactoring, bug fixing, or feature addition across many repos.
Teams looking to give each member their own isolated AI coding assistant without sharing credentials.
Product demos / hackathons where a quick, deploy‑in‑one‑click AI coding agent is needed.

Contributing & Extending

The repo follows a typical Next.js monorepo layout. To add a new agent, you would:

Install the CLI binary.
Add a wrapper in the server‑side task runner that invokes the CLI.
Expose a UI selector for the new agent. All database changes are managed with Drizzle migrations (pnpm db:generate, pnpm db:push).

Security Notes (from the README)

Never commit .env files.
Rotate API keys regularly.
Sandbox isolation prevents code from accessing host resources, but avoid logging secrets.
Each user’s GitHub token is stored encrypted at rest.

Bottom line: The Coding Agent Template is a full‑stack, Vercel‑hosted starter that combines modern web tooling with multiple LLM‑based coding agents, giving users a secure, multi‑user platform to run AI‑generated code changes on any repository. It can be deployed with a single click or run locally for development.

vercel-labs/coding-agent-template