코딩 에이전트 템플릿 – Vercel Labs

무엇인가요 – 사용자가 어떤 GitHub 리포지토리에서든 AI 기반 코딩 작업을 생성할 수 있는 즉시 배포 가능한 웹 앱입니다. 앱은 Vercel Sandbox를 시작하고, 선택한 코딩 에이전트(Claude Code, OpenAI Codex CLI, GitHub Copilot CLI, Cursor CLI, Google Gemini CLI 또는 opencode)를 실행하며, AI가 생성한 브랜치에 변경 사항을 커밋하고 실시간 로그를 표시합니다.

핵심 개념

개념	작동 방식
작업	사용자가 리포지토리 URL과 변경하고자 하는 내용의 자연어 설명을 제공합니다. 요청은 Neon Postgres DB에 저장됩니다.
AI 에이전트	지원되는 CLI 기반 에이전트 중 하나가 프롬프트를 분석하고, Vercel Sandbox 내에서 실행되어 코드를 수정합니다.
사전 환경(Sandbox)	Vercel Sandbox는 리포지토리가 체크아웃된 격리된 일시적인 컨테이너를 제공합니다. 설정 가능한 최대 기간(5분 ~ 5시간) 동안 유지됩니다.
브랜치 이름 생성	Vercel AI Gateway + AI SDK 5를 사용해 설명적인 브랜치 이름(예: `feature/add-user-auth-K3mP9n`)을 자동 생성합니다.
Git 통합	에이전트가 완료된 후, 앱은 변경 사항을 커밋하고 새 브랜치를 사용자 리포지토리에 푸시합니다.
다중 사용자	로그인한 각 사용자는 고유한 작업, API 키, GitHub 연결을 가지며, 데이터는 `users` 테이블로 스코프됩니다.
Keep-Alive	작업 완료 후에도 사전 환경을 유지하는 옵션 설정으로, 사용자가 후속 메시지를 보낼 수 있거나 개발 서버를 실행할 수 있습니다.

빠른 시작

README의 Deploy with Vercel 버튼을 클릭 → Vercel이 Neon Postgres DB를 프로비저닝하고 프로젝트를 설정합니다.
Vercel 대시보드에서 최소 하나의 OAuth 제공자(GitHub 또는 Vercel)를 추가하고, 필요한 시크릿(JWE_SECRET, ENCRYPTION_KEY, 사전 환경 토큰 등)을 입력합니다.
배포된 URL을 열고 로그인한 후 작업을 시작합니다.

또는 로컬에서 실행: git clone … && pnpm install && pnpm db:push && pnpm dev (아래에 나열된 변수를 포함하는 .env.local 파일 생성 후).

주요 기능

다중 에이전트 지원 – 6개의 CLI 에이전트 중에서 선택 가능.
보안 OAuth 로그인 – GitHub 및/또는 Vercel, 사용자별 GitHub 토큰.
AI 생성 브랜치 이름 – 차단 없이, 충돌 없이 이름을 생성.
실시간 작업 보기 – 실시간 로그, 상태, 결과 미리보기.
사전 환경 수명 설정 가능 – 최대 기간 및 Keep-Alive 토글.
지속적 저장소 – Drizzle ORM을 통한 Neon Postgres.
현대적 UI – Next.js 15 + React 19 + Tailwind + shadcn/ui.
MCP 서버 커넥터 – 외부 도구로 Claude Code 확장 가능(클로드 전용).

기술 스택 (README에 설명됨)

프론트엔드: Next.js 15, React 19, Tailwind CSS, shadcn/ui
데이터베이스: Neon Postgres, Drizzle ORM을 통해 접근
인증: Next-Auth + GitHub/Vercel OAuth
AI 통합: Vercel AI Gateway + AI SDK 5 (브랜치 이름 생성, 라우팅)
코딩 에이전트: Claude Code, OpenAI Codex CLI, GitHub Copilot CLI, Cursor CLI, Google Gemini CLI, opencode
사전 환경 실행: Vercel Sandbox 서비스
암호화: 세션용 JWE, 사용자별 ENCRYPTION_KEY로 API 키/토큰 암호화

작업 실행 절차 (단계별)

작업 생성 → DB에 저장.
브랜치 이름 생성 (비동기) → AI SDK 5 + AI Gateway를 통해.
사전 환경 시작 → 대상 리포지토리로.
선택된 에이전트 실행 → 사전 환경 내에서 실행. 프롬프트를 읽고 파일 수정.
커밋 및 푸시 → AI 생성 브랜치에 변경 사항 반영.
정리 – 사전 환경은 즉시 종료 (Keep-Alive OFF) 또는 타임아웃까지 유지 (Keep-Alive ON).

설정 요약

환경 변수 (배포에 필수):
- POSTGRES_URL – Neon 연결 문자열 (Vercel 배포 시 자동 채움).
- SANDBOX_VERCEL_TOKEN, SANDBOX_VERCEL_TEAM_ID, SANDBOX_VERCEL_PROJECT_ID – Vercel 사전 환경 자격 증명.
- JWE_SECRET 및 ENCRYPTION_KEY – 세션 및 사용자 비밀 정보 암호화에 사용.
- NEXT_PUBLIC_AUTH_PROVIDERS – 활성화할 OAuth 제공자 (github, vercel, 또는 둘 다).
- 활성화된 제공자의 OAuth 클라이언트 ID/시크릿.
선택적 API 키 – 전역 또는 사용자별로 설정 가능 (Anthropic, OpenAI, Cursor, Gemini, AI Gateway).
제한 사항 – MAX_SANDBOX_DURATION (기본값 5시간) 및 MAX_MESSAGES_PER_DAY (기본값 5)로 리소스 사용량 제어.

누구에게 적합한가요?

여러 리포지토리에서 AI 기반 코드 리팩터링, 버그 수정, 기능 추가를 즉시 수행하고 싶은 개발자.
각 구성원에게 고유한 격리된 AI 코딩 어시스턴트를 제공하고 싶은 팀 (자격 증명 공유 필요 없음).
빠르게 배포 가능한 AI 코딩 에이전트가 필요한 제품 데모 / 해커톤.

기여 및 확장

이 리포지토리는 일반적인 Next.js 모노레포 구조를 따릅니다. 새로운 에이전트를 추가하려면 다음을 수행합니다:

CLI 바이너리 설치.
서버 사이드 작업 러너에 CLI를 호출하는 래퍼 추가.
새로운 에이전트용 UI 선택기 노출. 모든 데이터베이스 변경은 Drizzle 마이그레이션으로 관리됩니다 (pnpm db:generate, pnpm db:push).

보안 주의사항 (README에서)

.env 파일을 커밋하지 마세요.
API 키를 정기적으로 회전하세요.
사전 환경 격리로 코드가 호스트 리소스에 접근할 수 없지만, 시크릿을 로깅하지 마세요.
각 사용자의 GitHub 토큰은 암호화된 상태로 저장됩니다.

결론: 코딩 에이전트 템플릿은 현대적인 웹 툴과 여러 LLM 기반 코딩 에이전트를 결합한 완전한 스택의 Vercel 호스팅 스타터입니다. 사용자는 어떤 리포지토리에서든 AI 생성 코드 변경을 안전하고 다중 사용자로 실행할 수 있는 플랫폼을 제공합니다. 단일 클릭으로 배포하거나 로컬에서 개발에 사용할 수 있습니다.

vercel-labs/coding-agent-template