WebForge

問題

網站上改一段文字、調一下版面，往往還是得排隊等工程師。負責內容的人碰不到程式碼，也不該為了發布一個小修正去學 git。我想知道：AI 代理能不能站在他們和 repo 之間，又需要哪些防護。

我做了什麼

WebForge 是一個瀏覽器應用：選一個網站專案，用白話說要改什麼。代理只會讀寫該專案資料夾裡的檔案。每一輪結束後它會起草 commit message，在你確認、修改或捨棄之前，不會寫進 git。右側面板可以看檔案樹、檔案預覽，以及 Staging 與 Production 的實際部署畫面。

整體是 pnpm monorepo，分成三個套件：Node 後端、React 前端，以及共用的型別化通訊協定。我用 Claude Code 分 M1 到 M4 四個里程碑（M3 拆成兩段），共 5 份書面實作計畫，另有設計規格與驗收紀錄。

運作方式

1. 後端掃描專案資料夾，列出每個具備 git repo 與 .webforge.json 設定的網站。
2. 開啟網站時建立一個 Agent SDK session，工作目錄鎖在該資料夾；記下 SDK 的 session id，後續每輪都接續同一段對話。
3. 代理的輸出（文字、工具呼叫、結果）透過 Socket.IO 逐字串流到瀏覽器。
4. 一輪結束時，後端比對工作目錄差異並送出 commit 提案；使用者接受後才 commit，並推到 staging 分支。
5. 監看程式每 5 秒輪詢 Cloudflare Pages，回報 staging 與 production 的建置狀態。
6. 「上線」把 staging 以 fast-forward 合併進 main；「重來」把 staging 重設回 main，並以 force-with-lease 推送。兩者都會先跳出確認視窗。

關鍵決策

• 用 Agent SDK，而不是包裝 CLI。 Claude Code、Cowork 與 Agent SDK 共用同一套代理引擎；在無介面的 SDK 上自建 GUI，拿到的是型別化事件，不必去解析終端機輸出。
• 代理起草，人來 commit。 每一次修改都要經過確認，壞掉的一輪可以在進入歷史紀錄前直接丟掉。
• 用部署後的預覽取代本機 dev server。 目標使用者不是工程師，預覽必須是真正部署出去的網站，而不是某個連接埠上的 Node 程序。原本的本機 server 方案在開發途中就被我捨棄了。
• 讓 git 隱形。 使用者只看到兩個預覽、兩顆按鈕；分支、連接埠和部署 id 都不會出現在介面上。

成果

目前是可運作的單人原型，在本機執行，沒有部署給其他人使用。對話到 commit、多專案切換和檔案側欄都做過實測，並寫進驗收紀錄。整個原型在 2026 年 5 月 25 日到 27 日之間完成。