vercel-labs/coding-agent-template

Multi-agent AI coding platform powered by Vercel Sandbox and AI Gateway

コーディングエージェントテンプレート – Vercel Labs

何であるか – 任意のGitHubリポジトリ上で各ユーザーがAI駆動のコーディングタスクを作成できる、即時デプロイ可能なWebアプリ。アプリはVercel Sandboxを起動し、選択されたコーディングエージェント(Claude Code、OpenAI Codex CLI、GitHub Copilot CLI、Cursor CLI、Google Gemini CLI、opencode)を実行し、AI生成されたブランチに変更をコミットして、リアルタイムログを表示します。


コアコンセプト

コンセプト 動作方法
タスク ユーザーがリポジトリURLと自然言語による変更内容の説明を入力。リクエストはNeon Postgres DBに保存されます。
AIエージェント サポートされているCLIベースのエージェントの1つがプロンプトを分析し、Vercel Sandbox内で実行され、コードを編集します。
サンドボックス Vercel Sandboxは、リポジトリがチェックアウトされた隔離された一時コンテナを提供します。最大設定時間(5分~5時間)まで生存します。
ブランチ名生成 Vercel AI Gateway + AI SDK 5を使用して、説明的なブランチ名(例:feature/add-user-auth-K3mP9n)を自動生成します。
Git統合 エージェントが終了後、アプリは変更をコミットし、新しいブランチをユーザーのリポジトリにプッシュします。
マルチユーザー サインインした各ユーザーには独自のタスク、APIキー、GitHub接続があり、データはusersテーブルでスコープされます。
Keep-Alive オプション設定でタスク終了後にサンドボックスを維持し、ユーザーが追加メッセージを送信したり、開発サーバーを起動したりできるようにします。

クイックスタート

  1. README内のDeploy with Vercelボタンをクリック → VercelがNeon Postgres DBをプロビジョニングし、プロジェクトをセットアップします。
  2. Vercelダッシュボードで、少なくとも1つのOAuthプロバイダ(GitHubまたはVercel)を追加し、必要なシークレット(JWE_SECRETENCRYPTION_KEY、サンドボックストークンなど)を入力します。
  3. デプロイされた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専用)で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キー/トークンの暗号化

タスクの実行手順(ステップバイステップ)

  1. タスク作成 → DBに保存。
  2. ブランチ名生成(非同期)→ AI SDK 5 + AI Gateway経由。
  3. サンドボックス起動 → 対象リポジトリで。
  4. 選択されたエージェント起動 → サンドボックス内で実行。プロンプトを読み取り、ファイルを編集。
  5. コミット&プッシュ → AI生成ブランチに変更を反映。
  6. クリーンアップ → サンドボックスは即時終了(Keep-Alive OFF)またはタイムアウトまで維持(Keep-Alive ON)。

設定のハイライト

  • 環境変数(デプロイに必須):
    • POSTGRES_URL – Neon接続文字列(Vercelデプロイ時に自動入力)。
    • SANDBOX_VERCEL_TOKEN, SANDBOX_VERCEL_TEAM_ID, SANDBOX_VERCEL_PROJECT_ID – Vercel Sandbox資格情報。
    • JWE_SECRETENCRYPTION_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モノレポ構造に従っています。新しいエージェントを追加するには、以下の手順を実行します:

  1. CLIバイナリをインストール。
  2. サーバーサイドタスクランナーにCLIを呼び出すラッパーを追加。
  3. 新しいエージェント用のUIセレクタを公開。 すべてのデータベース変更はDrizzleマイグレーションで管理されます(pnpm db:generate, pnpm db:push)。

セキュリティノート(READMEより)

  • .envファイルをコミットしない。
  • APIキーは定期的にローテーションする。
  • サンドボックスの隔離により、コードがホストリソースにアクセスできないが、シークレットのログ出力を避ける。
  • 各ユーザーのGitHubトークンは、暗号化された状態で永続保存される。

結論:コーディングエージェントテンプレートは、モダンなWebツールと複数のLLMベースのコーディングエージェントを統合した、完全なスタックでVercelホスティングされたスタートアップです。ユーザーは任意のリポジトリ上でAI生成コード変更を安全に、マルチユーザーで実行できるプラットフォームを提供します。ワンクリックデプロイまたはローカルで開発可能。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト