Chuyển đến nội dung chính

第5課:代理模式-讓AI為你寫程式碼

什麼是代理,代理如何運作(計劃→執行→驗證),代理循環,聊天視圖(Ctrl+Cmd+I),比較代理與詢問與計劃模式。權限等級:預設、繞過批准、自動駕駛。動手實作:使用 Agent 建立第一個 Web 應用程式。

💻 程式設計 — 第 5 課 第5課:代理模式-讓AI自己寫程式碼 你

使用 GitHub Copilot 進行 Vibe 編碼:從基礎知識到高級

第二部分:代理模式-AI自動編寫程式碼

亞洲開發網

1.什麼是代理人?

在 GitHub Copilot 中,一 代理商 是一位活躍的人工智慧助手 自主地 完成一次完整的程式設計任務。與僅建議幾行的內聯建議不同,Agent 能夠:

  • 📋 制定計劃 (將任務分解為步驟)
  • 📝 建立和編輯多個文件 同時
  • 💻 運行終端命令 (安裝套件、建置、測試)
  • 🔄 自我修正 遇到錯誤時(自我修正)
  • 🔧 使用工具 (讀取檔案、搜尋、網路、擴充)

這是基礎 真實氛圍編碼 — 您描述請求,代理執行這一切。

2. 代理循環-代理如何運作

┌─────────────────────────────────────────────────┐
│              AGENT LOOP                          │
├─────────────────────────────────────────────────┤
│                                                  │
│  User Prompt: "Build a REST API for blog posts"  │
│           ↓                                      │
│  ┌─── PLAN ───┐                                  │
│  │ 1. Setup project                              │
│  │ 2. Create models                              │
│  │ 3. Create routes                              │
│  │ 4. Add middleware                             │
│  │ 5. Test                                       │
│  └────────────┘                                  │
│           ↓                                      │
│  ┌─── EXECUTE ──┐                                │
│  │ Create files  │ ←─ Tool: createFile           │
│  │ Write code    │ ←─ Tool: editFile             │
│  │ Run commands  │ ←─ Tool: runInTerminal        │
│  └──────────────┘                                │
│           ↓                                      │
│  ┌─── VERIFY ───┐                                │
│  │ Check errors  │ ←─ Tool: getErrors            │
│  │ Run tests     │ ←─ Tool: runInTerminal        │
│  │ Self-correct  │ → Quay lại EXECUTE nếu fail   │
│  └──────────────┘                                │
│           ↓                                      │
│  ✅ Complete → User review                       │
│                                                  │
└─────────────────────────────────────────────────┘

3. 三個內建代理

3.1.代理(預設)

自主規劃和實施變更、建立檔案、運行命令、使用工具。這是您在 Vibe Coding 中最常使用的代理程式。

3.2.計劃

創建一個結構化的實施計劃,但是 不要寫程式碼。計劃確定後,交給Agent執行。

3.3.詢問

回答有關程式碼、概念、程式碼庫的問題 不要更改文件。當您在編碼之前需要理解時使用。

Chọn agent trong Chat view:

┌────────────────────────────┐
│  Agent ▼                   │  ← Click dropdown
├────────────────────────────┤
│  ● Agent    (implement)    │
│  ○ Plan     (plan only)    │
│  ○ Ask      (Q&A only)     │
│  ○ Reviewer (custom)       │
└────────────────────────────┘

4. 權限等級-控制代理權限

代理需要運行命令並更改檔案 - 您決定自治級別:

等級 描述 適合當
預設批准 請求確認寫入/運行工具 第一次使用,生產代碼
繞過批准 自動批准所有工具調用 可信任務,原型
自動駕駛儀(預覽版) 自動批准+自動回答問題 完全自主的副業項目

⚠️安全說明: 在 Autopilot 級別,代理可以運行任何命令 - 僅用於本機電腦上的受信任項目。

5. 實作:使用代理模式建立 Web 應用程式

第 1 步:開啟聊天視圖

新聞 Ctrl+Cmd+I (macOS) 或 Ctrl+Alt+I (Windows/Linux)

第二步:選擇代理模式

從下拉清單中選擇 “代理人”

第三步:寫提示

Create a modern expense tracker web application with:
- Add expenses with amount, category, and date
- View expenses in a table with sorting
- Dashboard with summary charts (total by category)
- Filter expenses by date range and category
- Local storage to persist data
- Modern dark theme UI with smooth animations
- Responsive design for mobile

Use vanilla HTML, CSS, and JavaScript. No frameworks needed.

第 4 步:觀察 Agent 工作

代理人將:

  1. 分析需求
  2. 建立文件結構: 索引.html, 樣式.css, 應用程式.js
  3. 編寫 HTML 語意結構
  4. 編寫具有深色主題和響應式的 CSS
  5. 為 CRUD 邏輯、圖表、過濾器編寫 JavaScript
  6. 可以運行預覽

第 5 步:審核並接受

查看每個文件的差異 → 按 “保留” 接受或請求更改。

第 6 步:迭代

繼續對話以新增功能:

Add an export to CSV button and a monthly budget feature with progress bar

6. 座席會話管理

每個任務運行在一個 會議。會議 分開:

  • 會議列表:在聊天面板中查看所有會話(活動的、暫停的、已完成的)
  • 多次會議:針對許多不同的任務並行執行多個會話
  • 恢復會話:返回舊會話繼續迭代
  • 審查變更:查看一個會話中所有文件的變化

7. Agent使用的工具

代理可以存取內建工具:

工具 功能
讀 讀取工作區中的文件
編輯文件 建立/編輯文件
運作終端 運行外殼命令
搜尋。搜尋 在程式碼庫中搜尋
列表目錄 列出目錄中的文件
取得錯誤 取得編譯/lint 錯誤
網路 搜尋網絡
用法 尋找符號參考

8. 代理模式最佳實踐

✅ 應該:

  • 描述清晰詳細:包括技術堆疊、模式、約束
  • 將大任務分解成小塊:首先“添加身份驗證”,然後“添加 CRUD”,而不是“構建所有內容”
  • 檢查每個步驟:閱讀產生的Agent程式碼,特別重要的邏輯
  • 首先使用/init:建立自訂指令,以便代理程式理解約定
  • 迭代,而不是重做:繼續會話而不是重新開始

❌ 不應該:

  • 使用 Autopilot 進行生產程式碼
  • 接受全部而不檢查任何文件
  • 提示太模糊:“讓它變得更好”
  • 請代理人在您不知情的情況下安裝軟體包
  • 跳過錯誤訊息 — 讀取並提供給代理

9. 代理模式調試

該代理對於調試特別強大,因為它可以:

  1. 閱讀錯誤訊息
  2. 跨多個文件追蹤根本原因
  3. 應用程式修復
  4. 重新運行測試以驗證
// Prompt ví dụ:
The test in tests/auth.test.ts is failing with "TypeError: Cannot read properties
of undefined (reading 'token')". Find the root cause and fix it.

10. 總結

概念 重點
代理商 自主AI助理:計劃→執行→驗證
3個內建代理 代理(實施)、計劃(計劃)、詢問(問答)
權限等級 預設→旁路→自動駕駛(增加自主權)
代理循環 重複執行+驗證,直到任務完成
會議 每個任務 = 1 個會話,可以並行運行
最佳實踐 明確提示+審查程式碼+迭代

下一篇文章會更深入 計劃代理 — 在編碼之前規劃技術,讓您更能控制 AI 輸出。