Agent Browser
agent-browser-io · 程式設計
Agent Browser 是一款瀏覽器自動化工具，讓 AI 代理像真人一樣操作真實的網頁瀏覽器。它把網頁轉成精簡的 ASCII 線框圖，於是模型讀到的是加上編號的文字連結與按鈕，而不是去解析整頁原始 HTML。你可以在 Cursor 或 Claude Desktop 這類 MCP 客戶端裡使用，透過 Vercel AI SDK 接進 Node 應用程式，或從命令列測試。
關於 Agent Browser
什麼是 Agent Browser
Agent Browser 是 agent-browser-io 推出的實驗性套件，替 AI 代理在網頁上裝上雙手和眼睛。代理不抓取靜態 HTML，而是透過 Playwright 開啟一個真實的瀏覽器，接著要求一份線框圖：一份精簡的文字地圖，每個可點擊的元素都拿到一個編號。代理挑一個編號，工具就替它點擊、輸入或捲動。
重點在 token 成本。一個完整網頁可能耗掉數千個模型根本不需要的標記 token。這就是問題所在。那代理實際看到什麼？一份短短的文字地圖，不是整頁。線框圖把它削到只剩要緊的部分，讓代理在較長的任務裡不會超出脈絡視窗。這是早期軟體。專案自己標明是實驗性的，最後一次發布是 0.3.0 版。預期會有些粗糙的地方。
主要限制在維護和打磨。這個儲存庫公開且規模小，所以當目標網站改了版型、弄壞你的流程時，沒有客服窗口可找。執行它也需要 Node 18 或更新版本。對休閒專案和工具開發來說，這沒問題。要用在正式環境，請三思。
開始使用
- 在 Node 18+ 的專案裡用
npm install @agent-browser-io/browser安裝套件。 - 若要從 AI 助理使用，把 MCP 伺服器加進你的客戶端設定，指令為
npx，參數為["-y", "@agent-browser-io/browser", "mcp"]，然後重啟客戶端。 - 讓代理先呼叫
launch工具，因為 navigate、click 等其餘工具都依賴一個執行中的瀏覽器。 - 要求一份線框圖，把網頁看成編號元素，然後告訴代理要點哪個編號或輸入什麼。
- 若用於程式碼，用
new AgentBrowser(new PlaywrightBrowserBackend())建立瀏覽器，並把createBrowserTools(browser)傳進generateText呼叫。
產品資訊
快速了解 Agent Browser 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 打造 AI 代理的開發者：Agent Browser 處理掉讓模型看見並碰觸真實網站這件麻煩事，讓你專注在任務邏輯上。你需要 Node 18+ 以及對套件管理工具的熟悉度。
- Cursor 與 Claude Desktop 使用者：如果你已經在用某個 MCP 客戶端，加入這個伺服器只要一段設定，不用寫程式。
- QA 與自動化玩家：CLI 提供互動的方式，讓你在把流程接進其他東西之前先試玩一番。
任務
- 讀取並摘要網頁：把代理指向某個網址、取得線框圖，讓它抓出需要的內容，不必背負整份 HTML。
- 填寫表單與走完流程：代理在欄位裡輸入、點擊編號元素，適合登入與搜尋這類任務。
- 多步驟研究：因為線框圖把 token 用量壓低，代理能在空間用完前造訪更多網頁。
情境
- 打造一個掃描幾個網站並回報的內部研究機器人。
- 從腳本測試一段網頁流程，而不是用手一格一格點過去。
- 製作一個需要真實瀏覽器控制、而非無介面抓取的代理功能原型。
主要功能
節省 token 的線框圖
Agent Browser 把網頁呈現成帶編號元素的 ASCII 地圖，這是它省下 token 的核心。代理讀到像 [11]upvote 這樣的標籤，挑出編號，而不是載入整個 DOM。在資訊繁忙的頁面上，這是幾百個 token 與數千個 token 的差別，而這份餘裕讓較長的任務能跑完，不會中途斷線。
透過 Playwright 的真實瀏覽器控制
這款工具透過 Playwright 操作真正的瀏覽器。那就是經典的 Playwright 瀏覽器自動化，只是對象換成代理，而非測試腳本。它能在需要 JavaScript、Cookie 或即時工作階段的頁面上運作。真人能點的東西，代理就能點。它不是假裝成瀏覽器的無介面抓取器，當網站擋掉單純請求時，這點很要緊。
MCP 整合
套件附帶一個 MCP 伺服器，可以放進 Cursor、Claude Desktop 或任何以 stdio 為基礎的 MCP 客戶端。一筆設定就能啟用整套 MCP 瀏覽器工具，伺服器透過 stdin 與 stdout 講 JSON-RPC，不需要額外的環境變數。如果你的助理已經在用 MCP，這是最快給它一個瀏覽器的方式。
Vercel AI SDK 工具
在程式碼裡，createBrowserTools(browser) 會回傳一組工具，你直接傳進 generateText。這套工具涵蓋 launch、navigate、getWireframe、click、type、fill、dblclick、hover、press、select、check、uncheck、scroll、screenshot 與 close。它與 MCP 伺服器一致，所以無論你用哪種方式呼叫，行為都相同。
互動式 CLI
你可以用 npx @agent-browser-io/browser，或安裝後的 agent-browser-cli 執行檔來手動測試。何必麻煩？這是檢查線框圖是否正確最快的方法。在投入寫腳本之前，先確認選取器落在你預期的位置。
線框圖旁的截圖
當你需要看見真實像素時，截圖工具會把網頁存成圖片。就是這麼簡單。線框圖負責結構，截圖負責視覺細節，你可以依代理要讀還是要看來切換。
優缺點
優點
- 線框圖在頁面繁重的任務上降低 token 用量，讓代理維持在脈絡視窗內。
- 透過單一設定區塊就能與 Cursor、Claude Desktop 這類 MCP 客戶端搭配。
- 開源且免費，完整程式碼都在 GitHub 上，任何人都能查看或分支。
- 操作真實的 Playwright 瀏覽器，所以 JavaScript 繁重的網站行為跟真人使用時一樣。
- 同一套工具同時驅動 MCP 伺服器與程式碼路徑，結果保持一致。
缺點
- 標明為實驗性，最後一版是 0.3.0，所以 API 仍可能在你腳下變動。
- 沒有託管服務或支援，意味著問題得自己除錯。
- 需要 Node 18+ 和一些設定，所以對非開發者來說不是開箱即用的工具。
- 改變版型的頁面可能弄壞已存的流程，你得重建步驟。
常見問題
它讓 AI 代理控制真實瀏覽器來瀏覽、點擊、輸入與讀取網頁。人們用它打造研究機器人、自動化網頁流程，並讓 MCP 助理具備瀏覽能力。
相關內容
探索與 Agent Browser 相關的工具、技能與文章。
Agent Browser 替代方案
Forefront
Forefront · 程式設計Forefront 是一個用來打造開源 AI 的網頁平台。你可以用自己的資料微調主流的開源語言模型、評估它們的表現，再透過 API 執行，或匯出後自行架設。想要封閉式平台的便利、卻堅持要自己擁有模型與資料的開發者，就是這裡的目標客群。
Startkit
StartKit.AI · 程式設計Startkit 是一套用來打造 AI SaaS 與 AI 包裝產品的樣板。可以把它想成一個 AI 新創樣板，把枯燥的部分都先接好了：驗證、Stripe 與 Lemon Squeezy 付款、用量限制、交易型電子郵件，以及一套能與 OpenAI、Anthropic、Groq 或 Llama 溝通的 AI API 啟動套件。你複製儲存庫、設定價格，然後專心在產品中使用者真正願意付費的部分。它建構於 React 與 Tailwind 之上的 Next.js，所以大部分的樣板程式碼對你來說並不陌生。
Testim
Tricentis · 程式設計Testim 是專為網頁、行動與 Salesforce 應用程式打造的 AI 測試自動化平台，用來建立並執行端到端測試。它靠機器學習在介面變動時維持測試穩定，團隊因此少花時間修補壞掉的定位器。對於一款今天就能開始使用的自動化測試工具來說，這表現不算差。你透過在瀏覽器錄製動作來建立測試，需要更多控制時再補上 JavaScript。對忙碌的 QA 團隊來說，這是個可靠的選擇。