Coding Agent Template

A template for building AI-powered coding agents that supports Claude Code, OpenAI's Codex CLI, Cursor CLI, and opencode with Vercel Sandbox to automatically execute coding tasks on your repositories.

Deploy Your Own

You can deploy your own version of the coding agent template to Vercel with one click:

Features

• Multi-Agent Support: Choose from Claude Code, OpenAI Codex CLI, Cursor CLI, or opencode to execute coding tasks
• Vercel Sandbox: Runs code in isolated, secure sandboxes (docs)
• AI Gateway Integration: Built for seamless integration with Vercel AI Gateway for model routing and observability
• AI-Generated Branch Names: Automatically generates descriptive Git branch names using AI SDK 5 + AI Gateway
• Task Management: Track task progress with real-time updates
• Persistent Storage: Tasks stored in Neon Postgres database
• Git Integration: Automatically creates branches and commits changes
• Modern UI: Clean, responsive interface built with Next.js and Tailwind CSS

Setup

1. Clone the repository

1
git clone https://github.com/vercel-labs/coding-agent-template.git
2
cd coding-agent-template

2. Install dependencies

1
pnpm install

3. Set up environment variables

Copy the example environment file and fill in your values:

1
cp .env.example .env.local

Required environment variables:

• POSTGRES_URL: Your PostgreSQL connection string (works with any PostgreSQL database)
• ANTHROPIC_API_KEY: Your Anthropic API key for Claude
• GITHUB_TOKEN: GitHub personal access token (for repository access)
• VERCEL_TEAM_ID: Your Vercel team ID
• VERCEL_PROJECT_ID: Your Vercel project ID
• VERCEL_TOKEN: Your Vercel API token
• AI_GATEWAY_API_KEY: Your AI Gateway API key for AI-generated branch names and Codex agent support

Optional environment variables:

• CURSOR_API_KEY: For Cursor agent support
• NPM_TOKEN: For private npm packages

4. Set up the database

Generate and run database migrations:

1
pnpm db:generate
2
pnpm db:push

5. Start the development server

1
pnpm dev

Open http://localhost:3000 in your browser.

Usage

1. Create a Task: Enter a repository URL and describe what you want the AI to do
2. Monitor Progress: Watch real-time logs as the agent works
3. Review Results: See the changes made and the branch created
4. Manage Tasks: View all your tasks in the sidebar with status updates

How It Works

1. Task Creation: When you submit a task, it's stored in the database
2. AI Branch Name Generation: AI SDK 5 + AI Gateway automatically generates a descriptive branch name based on your task (non-blocking using Next.js 15's after())
3. Sandbox Setup: A Vercel sandbox is created with your repository
4. Agent Execution: Your chosen coding agent (Claude Code, Codex CLI, Cursor CLI, or opencode) analyzes your prompt and makes changes
5. Git Operations: Changes are committed and pushed to the AI-generated branch
6. Cleanup: The sandbox is shut down to free resources

Environment Variables

Required

• POSTGRES_URL: PostgreSQL connection string
• ANTHROPIC_API_KEY: Claude API key
• GITHUB_TOKEN: GitHub token for repository access
• VERCEL_TEAM_ID: Vercel team ID for sandbox creation
• VERCEL_PROJECT_ID: Vercel project ID for sandbox creation
• VERCEL_TOKEN: Vercel API token for sandbox creation
• AI_GATEWAY_API_KEY: AI Gateway API key for branch name generation and Codex agent support

Optional

• CURSOR_API_KEY: Cursor agent API key
• NPM_TOKEN: NPM token for private packages

AI Branch Name Generation

The system automatically generates descriptive Git branch names using AI SDK 5 and Vercel AI Gateway. This feature:

• Non-blocking: Uses Next.js 15's after() function to generate names without delaying task creation
• Descriptive: Creates meaningful branch names like feature/user-authentication-A1b2C3 or fix/memory-leak-parser-X9y8Z7
• Conflict-free: Adds a 6-character alphanumeric hash to prevent naming conflicts
• Fallback: Gracefully falls back to timestamp-based names if AI generation fails
• Context-aware: Uses task description, repository name, and agent context for better names

Branch Name Examples

• feature/add-user-auth-K3mP9n (for "Add user authentication with JWT")
• fix/resolve-memory-leak-B7xQ2w (for "Fix memory leak in image processing")
• chore/update-deps-M4nR8s (for "Update all project dependencies")
• docs/api-endpoints-F9tL5v (for "Document REST API endpoints")

Tech Stack

• Frontend: Next.js 15, React 19, Tailwind CSS
• UI Components: shadcn/ui
• Database: PostgreSQL with Drizzle ORM
• AI SDK: AI SDK 5 with Vercel AI Gateway integration
• AI Agents: Claude Code, OpenAI Codex CLI, Cursor CLI, opencode
• Sandbox: Vercel Sandbox
• Git: Automated branching and commits with AI-generated branch names

Development

Database Operations

1
# Generate migrations
2
pnpm db:generate
3

4
# Push schema changes
5
pnpm db:push
6

7
# Open Drizzle Studio
8
pnpm db:studio

Running the App

1
# Development
2
pnpm dev
3

4
# Build for production
5
pnpm build
6

7
# Start production server
8
pnpm start

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

Security Considerations

• Environment Variables: Never commit .env files to version control. All sensitive data should be stored in environment variables.
• API Keys: Rotate your API keys regularly and use the principle of least privilege.
• Database Access: Ensure your PostgreSQL database is properly secured with strong credentials.
• Vercel Sandbox: Sandboxes are isolated but ensure you're not exposing sensitive data in logs or outputs.
• GitHub Token: Use a personal access token with minimal required permissions for repository access.