Coding Agent Template is a ready-to-deploy Next.js starter kit for building AI coding agents.
It integrates multiple AI coding agents (Claude Code, OpenAI Codex CLI, Cursor CLI, and opencode) with Vercel Sandbox to execute code changes in isolated environments.
The template handles repository cloning, dependency installation, code modification, and Git operations without exposing your production systems to untrusted AI-generated code.
Features
🚀 AI Gateway Integration: Built for integration with Vercel AI Gateway for model routing and observability.
🌳 AI-Generated Branch Names: Automatically generates descriptive Git branch names using AI SDK 5 and AI Gateway.
📊 Task Management System: Track task progress with real-time updates and persistent storage.
💾 Persistent Storage: Tasks stored in Neon Postgres database with full audit trail.
🔗 Git Integration: Automatically creates branches and commits changes with proper version control.
🎨 Modern UI: Clean, responsive interface built with Next.js 15 and Tailwind CSS.
🔑 Environment Variable Management: Secure handling of API keys and sensitive configuration data.
📱 Real-time Progress Monitoring: Watch live logs as agents execute tasks with status updates.
Use Cases
- Automated Bug Fixing. Submit a bug report or issue description, and an AI agent will attempt to identify the cause and push a fix to a new branch.
- Feature Prototyping. Describe a new feature, and the agent can generate the initial boilerplate code, including components, API routes, and data models.
- Dependency Management. Instruct an agent to update outdated dependencies in your project and resolve any potential version conflicts.
- Code Refactoring. Provide instructions to refactor a specific part of the codebase to improve readability, performance, or adherence to coding standards.
- Automated Documentation. Generate documentation for functions, classes, or API endpoints based on the existing code.
How to Use It
1. Clone the repository from GitHub. The template supports deployment to Vercel with a one-click deployment option or manual setup for custom configurations.
git clone https://github.com/vercel-labs/coding-agent-template.git
cd coding-agent-template2. Install the necessary dependencies.
pnpm install3. Create a local environment file by copying the example file.
cp .env.example .env.local4. Populate the .env.local file with the required credentials.
POSTGRES_URL: The connection string for your PostgreSQL database.ANTHROPIC_API_KEY: Your API key for the Anthropic (Claude) agent.GITHUB_TOKEN: A GitHub personal access token with repository access permissions.VERCEL_TEAM_ID: The ID of your Vercel team for sandbox creation.VERCEL_PROJECT_ID: The ID of your Vercel project for sandbox creation.VERCEL_TOKEN: Your Vercel API token for programmatic access.AI_GATEWAY_API_KEY: Your Vercel AI Gateway key for branch name generation and Codex agent support.CURSOR_API_KEY: An API key for Cursor agent support.NPM_TOKEN: An NPM token for accessing private packages.
# Database
POSTGRES_URL=postgresql://username:password@localhost:5432/coding_agent
# Required API Keys
ANTHROPIC_API_KEY=sk-ant-api03-your-key-here
GITHUB_TOKEN=ghp_your-github-token-here
# Vercel Sandbox Configuration
VERCEL_TEAM_ID=your-team-id
VERCEL_PROJECT_ID=your-project-id
VERCEL_TOKEN=your-vercel-token
# Optional API Keys (depending on which agents you want to use)
CURSOR_API_KEY=your-cursor-api-key
OPENAI_API_KEY=sk-your-openai-key-here
NPM_TOKEN=npm_your-npm-token
5. Generate the database schema and apply the migrations with the following commands.
pnpm db:generate
pnpm db:push6. Start the development server. You can now access the application by opening http://localhost:3000 in your web browser.
pnpm devRelated Resources
- Vercel Sandbox Documentation: Official guide to understanding and configuring Vercel’s sandbox environment for secure code execution.
- AI SDK 5 Documentation: Official documentation for integrating AI capabilities into your applications with Vercel’s AI SDK.
- Vercel AI Gateway: Information on the AI Gateway for managing and observing AI model interactions.
- Claude Code Documentation: Official guide to using Claude Code for command-line AI-assisted development tasks.
- Drizzle ORM Documentation: Learn how to work with the database layer and customize schema definitions for your specific needs.
- Command-line AI Coding Agents: Discover more open-source AI coding agents.
FAQs
Q: Which coding agent should I choose for my specific project requirements?
A: Claude Code works best for complex reasoning and architectural decisions, Codex CLI excels at rapid code generation, Cursor CLI provides integrated development features, and opencode offers flexibility for custom implementations. Choose based on your primary use case and existing toolchain preferences.
Q: How does the AI-generated branch naming system prevent conflicts in collaborative environments?
A: The system generates descriptive branch names based on task context and appends a 6-character alphanumeric hash to ensure uniqueness. If AI generation fails, it falls back to timestamp-based naming to maintain functionality.
Q: What security measures protect my code and API keys during sandbox execution?
A: Vercel Sandbox provides complete isolation for code execution, and all sensitive data is handled through environment variables. The system never stores API keys in the database and uses secure token-based authentication for repository access.
Q: How do I handle private npm packages or custom registries in my coding tasks?
A: Configure the NPM_TOKEN environment variable with appropriate access credentials. The sandbox environment will use this token to access private packages during task execution.
Q: Is a Vercel account required to use this template?
A: Yes, a Vercel account is necessary to obtain the Vercel Team ID, Project ID, API Token, and AI Gateway API Key, which are required for creating sandboxes and using certain AI features.
