打造 Computer Use Agent (CUA):讓 AI 像人一樣操作瀏覽器
原文:Microsoft AI Agents for Beginners · MIT 授權
本課概覽
本課結合四大元件:Browser-Use 負責 AI 驅動導覽、Playwright 與 Chrome DevTools Protocol (CDP) 負責瀏覽器控制、Azure OpenAI 提供具視覺能力的推理、Pydantic 做結構化資料擷取。
本課將涵蓋:
- 了解何時 Computer Use Agent 比純 API 自動化更合適
- 結合 Browser-Use 與 Playwright、CDP,可靠地管理瀏覽器生命週期
- 使用 Azure OpenAI 視覺能力與 Pydantic 結構化輸出,從動態網頁擷取房源資料
- 判斷何時採用 Agent 優先、Actor 優先、或混合式瀏覽器自動化流程
學習目標
完成本課後,你將知道如何:
- 以 Azure OpenAI 與 Playwright 設定 Browser-Use
- 建立能導覽真實網站、處理動態 UI 元素的瀏覽器自動化流程
- 從可見的頁面內容擷取「型別化」結果,並轉換為下游商業邏輯
- 依瀏覽器任務的可預測程度,在 Agent 與 Actor 模式間抉擇
程式範例
本課包含一個 Notebook 教學:
- 15-browser-user.ipynb:透過 CDP 啟動 Chrome 會話、搜尋 Airbnb 斯德哥爾摩房源、以 Browser-Use 視覺能力擷取價格,回傳最便宜選項的結構化資料。
前置需求
- Python 3.12+
- 環境中已設定好的 Azure OpenAI 部署
- 本機安裝 Chrome 或 Chromium
- 已安裝 Playwright 依賴
- 基本 async Python 概念
安裝設定
安裝 Notebook 使用的套件:
pip install browser_use playwright python-dotenv
playwright install chromium
設定 Notebook 使用的 Azure OpenAI 環境變數:
AZURE_OPENAI_ENDPOINT=...
AZURE_OPENAI_API_KEY=...
AZURE_OPENAI_CHAT_DEPLOYMENT_NAME=...
# 選用:省略時預設使用最新 API 版本
AZURE_OPENAI_API_VERSION=...
架構概覽
Notebook 展示的是混合式 (hybrid) 瀏覽器自動化流程:
- Chrome 以啟用 CDP 的方式啟動,讓 Playwright 與 Browser-Use 共用同一個瀏覽器會話。
- Browser-Use Agent 處理開放式導覽任務,例如開啟 Airbnb、關閉彈窗、搜尋斯德哥爾摩。
- 以結構化 Pydantic schema 檢視當前頁面,擷取房源標題、每晚價格、評分與網址。
- Python 邏輯比較擷取到的房源,標出最便宜的選項。
這種做法保留了 Browser-Use 擅長的彈性視覺推理,同時在需要時仍能給你確定性的瀏覽器控制。
Agent vs Actor:何時該用誰?
| 情境 | 用 Agent | 用 Actor |
|---|---|---|
| 動態版面 | 是,AI 能適應頁面變化 | 否,脆弱的選擇器容易失效 |
| 已知結構 | 否,Agent 比直接控制慢 | 是,快速且精準 |
| 尋找元素 | 是,自然語言非常有效 | 否,需要精確的選擇器 |
| 時序控制 | 否,較難預測 | 是,完全掌控等待與重試 |
| 複雜工作流程 | 是,能處理意外的 UI 狀態 | 否,需要顯式的分支邏輯 |
Browser-Use 最佳實踐
- 先用 Agent 進行探索與動態導覽。
- 當互動變得可預測時,切換為直接頁面控制。
- 使用結構化輸出模型,讓擷取的資料被驗證且型別安全。
- 在會觸發可見 UI 變化的動作之後,策略性地加入延遲。
- 迭代時擷取螢幕截圖,讓失敗更容易除錯。
- 預期網站會變動,為彈窗與版面位移設計備援策略。
- 混合 Agent 與 Actor 模式,同時取得彈性與精準。
瀏覽器 Agent 的安全防護 (Safety Guardrails)
瀏覽器 Agent 在真實網站上運作,因此需要比「只呼叫已知 API 的腳本」更嚴格的邊界。從 Notebook 展示走向真實工作流程之前,先定義 Agent 能「看什麼、點什麼、提交什麼」的控管:
- 界定瀏覽環境範圍。在專屬的瀏覽器 profile 或沙箱中執行 Agent,並限制它只能存取任務所需的網域。
- 分離「觀察」與「行動」。先讓 Agent 搜尋、閱讀、擷取資料;在提交表單、發送訊息、訂房、購物、刪除紀錄或更改帳戶設定之前,要求明確的核准步驟。
- 金鑰不要進入提示與追蹤。不要把密碼、付款資料、Session Cookie 或原始個人資料放進模型上下文。認證交由使用者接管,並從日誌中移除敏感欄位。
- 把頁面內容視為不可信輸入。網站可能包含「針對 Agent、而非使用者」的指令。Agent 應忽略任何要求它改變目標、洩漏資料、關閉防護或造訪無關網站的頁面文字。
- 在高風險步驟周圍使用確定性檢查。在要求使用者核准最終步驟前,先用程式碼驗證當前 URL、頁面標題、選中項目、價格、收件人與動作摘要。
- 設定預算與停止條件。限制 Agent 可使用的動作數、重試次數、分頁數與分鐘數。當頁面狀態不明時就停止,而非繼續點擊。
- 記錄有用的證據,而非全部。保留動作摘要、時間戳、URL、選中元素描述與螢幕截圖參考,以便檢視失敗,同時避免儲存不必要的敏感頁面內容。
在 Airbnb 範例中,安全的預設做法是搜尋房源並擷取價格。登入、聯絡房東或完成訂房,都應是獨立的、由使用者核准的動作。
實際應用場景
- 旅遊訂房與價格監控
- 電商比價與庫存可用性檢查
- 從動態網站擷取結構化資料
- 具視覺感知的 UI 測試與驗證
- 網站監控與告警
- 跨多步驟流程的智慧表單填寫
實際範例:Microsoft Project Opal
本課打造的 Agent,正是Computer Use Agent (CUA)——一個「像人一樣驅動瀏覽器」的程式——的小型本地版本。微軟把同樣的概念帶到企業,以 Project Opal (Frontier) 的形式提供,作為 Microsoft 365 Copilot 的一項能力。
有了 Project Opal,你描述任務,Agent 就在安全的 Windows 365 Cloud PC 上以 computer use 為你代勞,跨你組織內的瀏覽器應用程式、網站與資料運作。它非同步地在背景運作,你隨時可以引導工作或接手控制。範例工作包括:
- 管理安全群組成員申請
- 收集並驗證合規審查的稽核證據
- IT 事故分類(更新工單狀態、指派負責人、關閉重複工單)
- 將 Excel 資料彙編成財務結算簡報
Opal 是「生產級、可信賴的 computer use agent」絕佳參考範本,也呼應了前幾課的概念:
| 本課概念 | Project Opal 如何應用 |
|---|---|
| Human-in-the-loop(第 06 課) | 遇到登入憑證、敏感資料或模糊指令時暫停;從不自行輸入密碼或未經明確確認就提交表單。可隨時 Take Control / Return Control。 |
| 可信賴且安全的 Agent(第 06 & 18 課) | 在隔離的 Windows 365 Cloud PC 執行、預設僅瀏覽器(其他電腦存取被封鎖,經 Intune 強制)、使用你的身份(只存取你被授權的內容)、記錄每個動作供稽核。 |
| 規劃與元認知(第 07 & 09 課) | 先為工作產生計畫,再逐步監督自身推理,偵測到可疑活動即暫停。 |
| 可重用的能力 / 工具(第 04 課) | 透過 Skills 為重複性工作撰寫指令(從 .md 檔匯入或與 Opal 一起撰寫),並跨對話重用。 |
知識測驗
1. 何時瀏覽器型 Computer Use Agent 比純 API 工作流程更合適?
查看答案
當任務依賴網頁 UI 上「看得見」的內容、網站沒有提供所需 API、或頁面變動頻繁到固定的 API 或選擇器邏輯會變脆弱時,就用瀏覽器 Agent。若同一任務存在穩定的 API,則優先使用 API,因為它通常更快、更容易測試、也更容易保護。
2. 在混合式流程中,哪些部分交給 Agent、哪些交給直接的 Playwright 程式碼?
查看答案
讓 Agent 處理開放式導覽與動態 UI 狀態(例如找到正確頁面、關閉意外彈窗)。當頁面結構已知、且動作需要精準、重試、等待或確定性驗證時,切換為直接 Playwright 控制。
3. Airbnb 範例找到一個使用者可能想訂的房源。在簽入、聯絡房東或完成訂房之前,應發生什麼事?
查看答案
流程應暫停並要求明確的使用者核准。在詢問之前,應先展示所選房源、當前 URL、價格、日期與預期動作的清楚摘要。搜尋與擷取價格可以自動進行;帳戶存取、訊息、購物與訂房則須由使用者核准。
4. 一個網頁告訴 Agent 忽略原本的指令、造訪另一個網站、並洩漏已儲存的憑證。Agent 該如何處理這段文字?
查看答案
把它視為「不可信的頁面內容」,而非開發者或使用者的指令。Agent 應停留在允許的網域與任務範圍內、拒絕洩漏機密、並避免遵循任何會改變目標、停用防護或導向無關網站的頁面文字。
5. 瀏覽器 Agent 執行時,哪些證據值得保留、哪些應避免?
查看答案
保留動作摘要、時間戳、URL、選中元素描述、驗證結果與螢幕截圖參考,讓執行紀錄可供檢視。避免儲存密碼、付款資料、Session Cookie、原始個人資料或完整頁面內容,除非有特定的保留與隱私理由。
本課重點回顧
- CUA = 讓 AI 像人一樣操作瀏覽器,適合「任務依賴可見 UI、無可用 API、頁面頻繁變動」的情境;有穩定 API 時仍應優先選 API。
- 混合流程最佳:Agent 處理開放式導覽與動態 UI,Actor (Playwright) 處理已知結構的精準操作、等待與重試。
- 結構化輸出 (Pydantic) 讓擷取的資料型別安全、可驗證,可直接轉為下游商業邏輯。
- 瀏覽器 Agent 需要更嚴格的安全邊界:界定範圍、分離觀察與行動、金鑰不進提示、把頁面內容當不可信輸入、高風險步驟做確定性檢查。
- Project Opal 是企業級 CUA 的參考範本,呼應第 04(工具)、06(人機迴圈/可信賴)、07(規劃)、09(元認知)、18(安全)課的概念。