coding-agent-template

repository·main·Indexed 23 days ago

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

A template for building AI-powered coding agents that automatically execute tasks on repositories using CLI agents like Claude Code and OpenAI Codex within secure Vercel Sandboxes. Version 2.0.0 includes support for Neon Postgres, OAuth authentication via GitHub and Vercel, and Model Context Protocol (MCP) server integration for the Claude Code agent.

Tokens
8.2K
Snippets
13
Records
54
Agent score
82%

What's inside coding-agent-template

  1. Configure Sandbox Maximum Duration and Keep Alive settings

    main

    Tasks run in a Vercel Sandbox. You can control the lifecycle of this sandbox using two settings:

    Maximum Duration

    Controls how long the sandbox stays alive from the moment it is created. Timeouts range from 5 minutes to 5 hours. The timeout begins at sandbox creation and includes all agent execution and dependency installation time.

    Keep Alive Setting

    Determines if the sandbox shuts down immediately after the task completes or stays active until the Maximum Duration is reached.

    • Keep Alive OFF (Default): The sandbox shuts down immediately after the task completes. Use this for one-time changes where no further iteration or manual testing is needed.
    • Keep Alive ON: The sandbox stays alive with all processes running (including background dev servers like npm run dev if available) until the Maximum Duration expires. Use this if you need to iterate with follow-up messages, test changes in the live environment, or manually inspect the sandbox.
  2. How the coding agent workflow works

    main

    The agent follows a structured lifecycle to execute tasks:

    1. Task Creation: The task is submitted and stored in the Neon Postgres database.
    2. AI Branch Name Generation: The system uses AI SDK 5 and Vercel AI Gateway to generate a descriptive, conflict-free Git branch name (e.g., feature/name-hash). This is a non-blocking process using Next.js 15's after() function.
    3. Sandbox Setup: A Vercel Sandbox is provisioned with your target repository.
    4. Agent Execution: The selected agent (e.g., Claude Code, Gemini CLI, etc.) analyzes the prompt and performs code changes.
    5. Git Operations: Changes are automatically committed and pushed to the generated branch.
    6. Cleanup: The sandbox is shut down (unless Keep Alive is enabled) to free resources.
  3. Deploy the Coding Agent Template to Vercel

    main

    You can deploy a managed version of the template to Vercel with one click. The deployment process includes:

    1. Automatic Database Setup: A Neon Postgres database is automatically provisioned and connected.
    2. Environment Configuration: You must provide required environment variables, including Vercel credentials and encryption keys.
    3. OAuth Setup: After deployment, you must configure at least one OAuth provider (GitHub or Vercel) in your Vercel project settings to enable user authentication.

    Required environment variables for deployment include SANDBOX_VERCEL_TEAM_ID, SANDBOX_VERCEL_PROJECT_ID, SANDBOX_VERCEL_TOKEN, JWE_SECRET, and ENCRYPTION_KEY.

    [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fcoding-agent-template&env=SANDBOX_VERCEL_TEAM_ID,SANDBOX_VERCEL_PROJECT_ID,SANDBOX_VERCEL_TOKEN,JWE_SECRET,ENCRYPTION_KEY&envDescription=Required+environment+variables+for+the+coding+agent+template.+You+must+also+configure+at+least+one+OAuth+provider+(GitHub+or+Vercel)+after+deployment.+Optional+API+keys+can+be+added+later.&stores=%5B%7B%22type%22%3A%22postgres%22%7D%5D&project-name=coding-agent-template&repository-name=coding-agent-template)
  4. Set up Vercel OAuth Application

    main

    If vercel is included in NEXT_PUBLIC_AUTH_PROVIDERS, you must create a Vercel OAuth App.

    1. Go to your Vercel Dashboard.
    2. Navigate to SettingsIntegrationsCreate.
    3. Configure the integration with the following Redirect URL:
      • Local: http://localhost:3000/api/auth/callback/vercel
      • Production: https://yourdomain.com/api/auth/callback/vercel
    4. Use the Client ID for NEXT_PUBLIC_VERCEL_CLIENT_ID.
    5. Use the Client Secret for VERCEL_CLIENT_SECRET.
  5. Connect MCP Servers to Claude Code

    main

    You can extend the capabilities of the Claude Code agent by connecting Model Context Protocol (MCP) servers.

    Note: This feature is currently only supported for the Claude Code agent.

    To add an MCP server:

    1. Navigate to the Connectors tab in the UI.
    2. Click Add MCP Server.
    3. Provide the server name, base URL, and optional OAuth credentials.

    Requirement: If the MCP server uses OAuth authentication, you must ensure the ENCRYPTION_KEY environment variable is set in your project.

  6. Set up GitHub OAuth Application

    main

    If github is included in NEXT_PUBLIC_AUTH_PROVIDERS, you must create a GitHub OAuth App to enable sign-in.

    1. Go to GitHub Developer Settings.
    2. Click New OAuth App.
    3. Application name: Your app name.
    4. Homepage URL: http://localhost:3000 (for local dev) or your production URL.
    5. Authorization callback URL: http://localhost:3000/api/auth/github/callback (for local dev) or your production callback URL.
    6. Register the application.
    7. Use the Client ID for NEXT_PUBLIC_GITHUB_CLIENT_ID.
    8. Generate and use a Client Secret for GITHUB_CLIENT_SECRET.

    Required Scopes: The app must request the repo scope to access repositories.

  7. Database Migration: Preserve Existing Data (Production)

    main

    To migrate an existing production database while preserving tasks and connectors, follow this sequence:

    1. Create a system user: Insert a migration user into the users table to act as an owner for existing records.
    2. Update existing records:
      • Add a user_id column to tasks and connectors.
      • Update existing rows to point to the system user.
      • Set user_id to NOT NULL and add foreign key constraints.
      • Note: You must manually encrypt existing connectors.env values using your ENCRYPTION_KEY as the type has changed from jsonb to encrypted text.
    3. Run standard migrations: Use db:generate and db:push to finalize the schema.
    -- 1. Create a system user
    INSERT INTO users (id, provider, external_id, access_token, username, email, created_at, updated_at, last_login_at)
    VALUES (
      'system-user-migration',
      'github',
      'system-migration',
      'encrypted-placeholder-token',
      'System Migration User',
      NULL,
      NOW(),
      NOW(),
      NOW()
    );
    
    -- 2. Update existing tasks
    ALTER TABLE tasks ADD COLUMN user_id TEXT;
    UPDATE tasks SET user_id = 'system-user-migration' WHERE user_id IS NULL;
    ALTER TABLE tasks ALTER COLUMN user_id SET NOT NULL;
    ALTER TABLE tasks ADD CONSTRAINT tasks_user_id_fkey FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE;
    
    -- 3. Update existing connectors
    ALTER TABLE connectors ADD COLUMN user_id TEXT;
    UPDATE connectors SET user_id = 'system-user-migration' WHERE user_id IS NULL;
    ALTER TABLE connectors ALTER COLUMN user_id SET NOT NULL;
    ALTER TABLE connectors ADD CONSTRAINT connectors_user_id_fkey FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE;
  8. Set up local development

    main

    To run the coding agent template locally, follow these steps:

    1. Clone the repository.
    2. Install dependencies using pnpm.
    3. Configure a .env.local file with the required environment variables.
    4. Push the database schema.
    5. Start the development server.
    git clone https://github.com/vercel-labs/coding-agent-template.git
    cd coding-agent-template
    pnpm install
    # Set up .env.local with required variables
    pnpm db:push
    pnpm dev
  9. Local Development Setup Guide

    main

    To set up the Coding Agent Template for local development, follow these steps:

    1. Clone the repository:
      git clone https://github.com/vercel-labs/coding-agent-template.git
      cd coding-agent-template
    2. Install dependencies using pnpm:
      pnpm install
    3. Configure environment variables by creating a .env.local file (see Environment Variables Reference).
    4. Set up OAuth Applications for your chosen authentication providers (GitHub or Vercel).
    5. Initialize the database:
      pnpm db:generate
      pnpm db:push
    6. Start the development server:
      pnpm dev
      Open http://localhost:3000 in your browser.
    git clone https://github.com/vercel-labs/coding-agent-template.git
    cd coding-agent-template
    pnpm install
    pnpm db:generate
    pnpm db:push
    pnpm dev
  10. Migrate from v1.x to v2.0.0

    main

    Upgrading to v2.0.0 introduces breaking changes including user authentication, mandatory userId for tasks and connectors, and encrypted storage for sensitive data. Follow these steps to migrate your deployment:

    1. Backup your database: Use pg_dump to create a backup of your current state.
    2. Add required environment variables: Configure JWE_SECRET, ENCRYPTION_KEY, and NEXT_PUBLIC_AUTH_PROVIDERS.
    3. Set up OAuth applications: Configure GitHub or Vercel OAuth credentials.
    4. Handle database migration: Choose either a 'Fresh Start' (dropping tables) or 'Preserve Existing Data' (manually assigning existing records to a system user).
    5. Update code: Pull the latest changes and install dependencies.
    6. Verify: Test authentication and ensure user-scoped resource access works as expected.
    # Create a backup of your existing database
    pg_dump $POSTGRES_URL > backup-before-v2-migration.sql
  11. Configure Authentication Providers

    main

    You must configure at least one authentication method using the NEXT_PUBLIC_AUTH_PROVIDERS environment variable. This variable accepts a comma-separated list of providers.

    Available Providers:

    • github: GitHub authentication
    • vercel: Vercel authentication

    Examples:

    • GitHub only: NEXT_PUBLIC_AUTH_PROVIDERS=github (default)
    • Vercel only: NEXT_PUBLIC_AUTH_PROVIDERS=vercel
    • Both: NEXT_PUBLIC_AUTH_PROVIDERS=github,vercel

    Note on Repository Access:

    • GitHub users get immediate repository access via their GitHub OAuth token.
    • Vercel users must connect a GitHub account from their profile to access repositories.
    # GitHub authentication only (default)
    NEXT_PUBLIC_AUTH_PROVIDERS=github
    
    # Vercel authentication only
    NEXT_PUBLIC_AUTH_PROVIDERS=vercel
    
    # Both GitHub and Vercel authentication
    NEXT_PUBLIC_AUTH_PROVIDERS=github,vercel