技術觀察

Vercel Open Agents 實測：五分鐘把 Claude 變成背景程式碼工人

大家都在說 Agent 很強，但我在實際跑的時候發現，大多數人卡在的不是 AI 不夠聰明，而是根本不知道怎麼把這個聰明的腦袋塞進一個穩定的架構裡。Vercel 最近出的 op…

Vercel Open Agents 實測：五分鐘把 Claude 變成背景程式碼工人 — FB 圖卡
目錄

這東西在做什麼

這東西在做什麼 Open Agents 是 Vercel 丟出來的開源範例，讓你把 Claude 變成一個「背景執行的程式碼工人」。
它不是另一個聊天介面，而是一整套雲端架構：網頁 UI + Agent 執行引擎 + 沙箱 VM，目標是讓你「下指令 → 離開電腦 → 回來看到 PR 已經開好」。

為什麼值得看一眼

為什麼值得看一眼 以前要自己串：

  • Vercel Function 處理 webhook
  • Neon / Supabase 存狀態
  • Docker 起沙箱
  • GitHub App 權限

現在全部打包成模板，一鍵部署。代價是：高度客製化空間變小，但驗證 idea 的速度快很多。

怎麼裝、怎麼跑

怎麼裝、怎麼跑 官方提供「Deploy with Vercel」按鈕，點下去會自動：

  1. Fork 倉庫到你的 GitHub
  2. 建立 Vercel 專案
  3. 自動帶入環境變數（Neon 會自動開 Postgres，其餘要自己填）

手動補完必填的 .env.local：

# 資料庫
POSTGRES_URL=postgresql://..._pooler.vercel-storage.com/verceldb

# 加密
JWE_SECRET=$(openssl rand -base64 32)
ENCRYPTION_KEY=$(openssl rand -hex 32)

# GitHub App
GITHUB_APP_ID=123456
GITHUB_APP_PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----\n..."
NEXT_PUBLIC_GITHUB_APP_SLUG=your-app-slug
GITHUB_WEBHOOK_SECRET=your-webhook-secret

本地跑一次：

pnpm install
pnpm dev

瀏覽器開 http://localhost:3000 就能看到聊天介面。

實際跑起來長什麼樣

  1. 在 UI 貼 GitHub repo 網址
  2. 下指令：「幫我把 README 改成繁體中文」
  3. Agent 會：
    • clone 到沙箱
    • 讀檔案 → 改內容 → commit
    • push 到新分支
    • 自動開 PR

整個過程用 Workflow SDK 包成 durable run，失敗可重試，進度即時串流回 UI。

整合到 Claude Code 的技巧

Open Agents 本身就是用 Claude 當大腦，如果你想把它掛進 Claude Code 當「遠端 worker」：

  • 用 /mcp add open-agents npx @vercel/open-agents-mcp（假設未來有 MCP 包）
  • 或在 Claude Code 裡直接 claude -p "call https://open-agents.dev/api/run" 觸發遠端任務

目前還沒有官方 MCP，但你可以把 Open Agents 的 /api/run endpoint 當成 webhook 呼叫。

可能的坑

  • 沙箱限制：VM 跑在 Vercel Edge Network，不能裝系統套件，只能純 Node 環境
  • 成本：Workflow 每次執行都算 Vercel usage，長時間任務會燒錢
  • 權限：GitHub App 要開 contents:write 才能 push，公司 repo 可能不給
  • 作者維護：Vercel Labs 專案，更新頻率高但文件有時落後一兩個 commit

下一步

  1. 先按「Deploy with Vercel」跑一次，熟悉整個流程
  2. 把 .env.local 裡的 GitHub 權限換成你自己的測試 repo
  3. 試著改 agent.config.ts 裡的 system prompt，讓它只做「新增單元測試」這類明確任務

如果你想更進一步客製，可 fork 後把沙箱換成自己的 Docker image，但那就脫離「快速驗證」的初衷了。

論文 / repo 在解什麼問題

Open Agents 想解決的是「把 LLM 變成可部署的後端服務」這件事。
過去你要讓 AI 幫你改程式碼，得自己管三塊：前端聊天介面、後端 Agent 邏輯、執行程式碼的乾淨環境。這三件東西各自有生命週期，整合起來卻常常打架——請求一斷線 Agent 就死、VM 開太久錢一直燒、git push 權限忘記設就全盤重來。
這個 repo 把三者打包成一份可一鍵部署的範例，讓開發者專心寫 prompt，不必重複造輪子。

關鍵方法一句話說清楚

把「Agent 邏輯」與「執行環境」徹底拆開：Agent 跑在 Vercel Workflow 裡，透過遠端工具呼叫去操作一顆獨立的沙箱 VM，兩邊可以各自休眠、重啟、升級，互不綁死。

怎麼在你的場景試一小段

  1. 點 README 裡的「Deploy with Vercel」按鈕，兩分鐘內會拿到一個 https://你的專案.vercel.app 網址。
  2. 進入後用 GitHub 登入，綁定一個「可有可無」的測試 repo。
  3. 在對話框輸入： 
    幫我在 src/index.test.js 加一個簡單的單元測試，測試 sum(2,3) 回傳 5
    按 Enter，Agent 會：
    • 克隆 repo 到沙箱
    • 新建或修改檔案
    • 跑 npm test 確認通過
    • 自動開 PR 回來
      整個流程你只需看進度條，手機放著就好。

我還沒驗證的地方

  • 私有套件來源：如果專案需要公司內部的 npm registry，沙箱能否拉得到？
  • 長時間任務：官方說 VM 可休眠，但我還沒試過超過 30 分鐘的編譯或測試會不會被砍。
  • 多 Agent 協作：README 提到未來支援子 Agent，目前只看到單一 Agent 範例。

跟做時要先確認的事

在按下那顆 Deploy 按鈕之前，先把下面三件事打勾，避免踩到免費額度或權限地雷：

  • GitHub App 權限：建立 GitHub App 時，Webhook URL 必須指向 https://你的專案.vercel.app/api/webhook，否則 PR 不會自動觸發。
  • 環境變數別打錯：JWE_SECRET 與 ENCRYPTION_KEY 自己用 openssl rand -base64 32 產生 32 字元亂數，貼錯就會報「invalid token」錯誤。
  • Neon Postgres 額度：免費方案每天 200 MB 儲存，跑幾個中型 repo 就滿了；想長期用最好升級到 5 美元方案，或改用 Supabase。

延伸閱讀

相關文章