Coding Agent Template: Integrating Multiple AI Models and a Secure Sandbox to Build Automated Programming Intelligence

Coding Agent Template is an open source project developed by Vercel Labs that provides a base template for building platforms for AI intelligences that can automate coding tasks. This template integrates a variety of AI coding tools, such as Claude Code and OpenAI Codex, and utilizes Vercel's специализированные service to ensure that the code runs in a secure environment.

The most central part of the project is the use of Vercel Sandbox technology. The Vercel Sandbox creates a temporary, isolated runtime environment in which AI-generated code can be executed in a safe environment, avoiding the risks that may be associated with direct manipulation of local or production environment files. At the same time, it integrates the Vercel AI Gateway, which can unify the management and routing of API requests for different AI models, making it easy for developers to switch and manage various AI services.

The front-end interface of the whole platform is built using Next.js with a simple and intuitive design. After users submit tasks, they can see the task progress and logs in real time on the interface. The task data is stored in a PostgreSQL database, which realizes the persistent management of tasks. In addition, the template also integrates Git functionality, which automatically creates a new code branch and commits changes after AI completes the coding task, simplifying the code review and merging process.

Function List

• Supports multiple AI intelligences: The platform allows users to freely choose from different AI coding tools to perform their tasks, including Anthropic's Claude Code, OpenAI's Codex CLI, Cursor CLI, and opencode.
• Secure sandbox environment: Utilize Vercel Sandbox to create a separate, secure remote cloud environment for each task to run and modify code. This mechanism effectively isolates untrusted code and prevents it from affecting host applications or leaking sensitive data.
• Integrated AI Gateway: Built-in Vercel AI Gateway for unified management of requests to different AI models, routing and observation between models.
• Task management and real-time updates: Provides a visual user interface that allows users to create coding tasks and track their execution progress with real-time log updates.
• Data persistent storage: Information such as a user's tasks and their status is stored in the Neon Postgres database, ensuring data persistence and traceability.
• Git Integration Automation: Once an intelligent body completes a code change, it automatically creates a new branch in the specified code repository and commits the code, making it easy for developers to perform subsequent Code Review and merge work.
• modernized technology stack: The front-end interface was built using Next.js 15 and React 19 to ensure the performance and responsiveness of the application, and styled with Tailwind CSS.

Using Help

Below are detailed steps on how to install and use this template.

environmental preparation

Before you begin, make sure you have thegitcap (a poem)pnpm. You will also need to prepare the following accounts and credentials:

• A PostgreSQL database connection address (e.g. from Neon, Supabase, or any other PostgreSQL provider).
• Anthropic API密钥（用于Claude模型）。
• GitHub Personal Access Token and grants it permission to read and write to the code repository.
• Vercel account and get the Team ID, Project ID and API Token.

Installation process

1. Clone Code Repository
   First, open a terminal and use thegitcommand to clone the project code from GitHub to your local computer.

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

   Then go to the directory where the project is located:

   cd coding-agent-template
   

2. Install project dependencies
   The program usespnpmas a package manager. In the project root directory, run the following command to install all required dependent libraries.

   pnpm install
   

3. Configuring Environment Variables
   This is the most critical step. The project needs to read multiple API keys and configuration information to function properly. You need to set the template file.env.exampleMake a copy and rename it.env.localThe

   cp .env.example .env.local
   

   Next, use your text editor to open the.env.localfile, fill in your own configuration information.

   # 必需的环境变量
   POSTGRES_URL="你的PostgreSQL数据库连接字符串"
   ANTHROPIC_API_KEY="你的Anthropic API密钥"
   GITHUB_TOKEN="你的GitHub个人访问令牌"
   VERCEL_TEAM_ID="你的Vercel团队ID"
   VERCEL_PROJECT_ID="你的Vercel项目ID"
   VERCEL_TOKEN="你的Vercel API令牌"
   # 可选的环境变量（如果需要使用其他AI智能体）
   CURSOR_API_KEY="你的Cursor API密钥"
   OPENAI_API_KEY="你的OpenAI API密钥"
   NPM_TOKEN="你的NPM令牌（用于私有NPM包）"
   

4. Setting up the database
   After configuring the database connection address, you need to initialize the table structure of the database. The project uses Drizzle ORM to manage the database. Run the following command to generate the migration file and apply it to your database.

   # 生成迁移文件
   pnpm db:generate
   # 将表结构同步到数据库
   pnpm db:push
   

5. Starting the Development Server
   After completing all the above steps, run the following command to start the local development server.

   pnpm dev
   

   After a successful launch, the terminal will indicate that the application is running. At this point, open the http://localhost:3000 The platform can be accessed and utilized.

How it works

1. Creating Tasks: On the main screen of the app, you will see an input box. First, enter the URL of the GitHub code repository you want AI to operate on.
2. Describe the requirements:: In the text box below, describe in detail in natural language the specific coding task you want the AI to accomplish. For example, "Please help me add a login button and implement the jump logic when clicked" or "Fix theutils.jsThat sorting bug in the file".
3. Monitoring Progress: After submitting a task, the application interface displays a real-time execution log of the task. You can see the whole process of AI intelligences analyzing requirements, locating files, modifying code, and submitting code.
4. Results of the review: Once the task is complete, AI automatically creates a new branch in your GitHub repository and commits all code changes to that branch. You can visit your GitHub repository, find this new branch, and then review the AI's changes as you would a coworker's code.
5. Management tasks: In the sidebar of the app, you can see a list of all historical tasks and their status (e.g. ongoing, completed, failed, etc.) for easy management and traceability.

application scenario

1. Automated Code Refactoring
   For large projects or historical legacy code, developers can instruct AI intelligences to perform repetitive and time-consuming refactoring tasks, such as migrating all JavaScript code to TypeScript or standardizing the error handling format for all APIs in a project.
2. Rapid prototyping of new features
   When an idea for a new feature needs to be validated, developers can provide a code repository and a clear description of the feature, allowing AI intelligences to quickly generate functional prototype code. This dramatically reduces the time from idea to demoable product.
3. Fix bugs in the program
   Developers can give known bug information (e.g., error logs, problem descriptions) as task instructions to the AI intelligence to automatically locate the problem code, write the fix logic and submit the fix.
4. Learning and code sample generation
   Beginners can use this tool to learn new techniques. By presenting requirements to the AI and observing how it adds new features or solves problems in a complete project, one can intuitively understand the organization of the code and the logic of its implementation.

QA

1. How does this project ensure that AI modifications to the code are safe?
   The program is secured by integrating Vercel Sandbox technology. Each coding task is executed in a separate, cloud-based micro virtual machine (microVM). This environment is completely isolated from external systems, and AI-generated or modified code can only be run within this sandbox, with no access to your local files or host applications, thus avoiding potential security risks. This sandbox is destroyed immediately after the task is completed.
2. Can I use my own AI model?
   The current template is designed to support many of the major coding AI services, such as Claude and OpenAI Codex. Although the template itself does not provide a "plug-and-play" interface to any custom model, since it is open source, experienced developers can modify the source code to integrate their own trained AI models or other AI models. or other AI models by modifying the source code.
3. Do I need to pay to use this template?
   The template project itself is open source and free. However, running it relies on a number of third-party services that may incur costs. For example, you will need to pay the appropriate fees for PostgreSQL databases, APIs to call AI models (e.g. Anthropic, OpenAI), and resources to use the Vercel platform (e.g. Sandbox, AI Gateway).
4. Why do I need so many API keys and Token?
   Each key corresponds to a core function:POSTGRES_URLUsed to connect to database storage tasks;ANTHROPIC_API_KEYmaybeOPENAI_API_KEYFor invoking AI macromodels for thinking and coding;GITHUB_TOKENUsed to read and write to code repositories;VERCELThe associated IDs and Token are then used to create and manage a secure sandbox execution environment.