各類 Agent 客戶端持續(xù)爆火后，AI Agent 操控瀏覽器似乎已經(jīng)成了一種范式：起一個后端服務(wù)，跑一個無頭瀏覽器，截圖、識別、點擊。你的網(wǎng)頁就是被操控的對象。作為 Web 開發(fā)者的我們，徹底的成了 Agent 時代的被動方。

作為前端開發(fā)者，我一直覺得這件事哪里不對。

不如換個方向：把 Agent 完整地放進網(wǎng)頁里跑。

PageAgent 是一個純前端的實驗性 GUI Agent 庫。它運行在你的頁面中，直接操作界面。沒有后端，沒有截圖，沒有無頭瀏覽器。還可以通過一個可選的插件控制整個瀏覽器。

??GitHub｜MIT 開源

一行代碼

• 傳統(tǒng)方案的部署路徑：安裝 Python → 安裝 Playwright → 跑一個 Docker → 啟動一個無頭瀏覽器 → 截圖 → 調(diào) LLM → 解析 → 執(zhí)行。
• PageAgent 的部署路徑： → Done.
• 用 npm 接入同樣簡潔：

import {    PageAgent } from 'page-agent'

const agent = new PageAgent({     model: 'gpt-5.1',  baseURL: 'https://api.openai.com/v1',  apiKey: YOUR_KEY, }) 
await agent.execute('幫我填寫上周五的報銷單')

更多接入方式見官方文檔。

By Frontend, For Frontend

這個架構(gòu)差異帶來的不只是部署便利，而是角色反轉(zhuǎn)。

Playwright、browser-use 這類工具的模式是?"外部控制" —— 你的應(yīng)用是被操作的對象，你無法決定 Agent 看到什么、能做什么。實際上就是把你的產(chǎn)品暴露給了另一個自動化程序。

PageAgent 的模式是?"內(nèi)部運行" —— Agent 是你應(yīng)用的一部分，你決定它的能力邊界、它看到的數(shù)據(jù)范圍、它使用的模型。你的應(yīng)用不是被人操控的木偶，而是自己擁有了 AI 能力。

這意味著什么？作為前端開發(fā)者，你可以：

• 在你的 SaaS 產(chǎn)品里內(nèi)嵌一個 AI 助手，用戶用自然語言完成復(fù)雜操作
• 給企業(yè)后臺的 ERP/CRM 加上智能導(dǎo)航，代替 20 步點擊流程
• 把 Agent 接到你現(xiàn)有的客服 bot 后面 —— 它不再是告訴用戶 "點擊右上角的提交按鈕"，而是直接幫他點了

Human in the Loop

大多數(shù) AI Agent 是 "fire-and-forget" —— 啟動之后你就只能看著它跑，祈禱別出錯。Human-in-the-Loop 是任何 AI 工具投入實際生產(chǎn)的必備能力。PageAgent 會展示自己的思考過程，遇到歧義主動詢問用戶。

兼容各種 LLM，可純本地運行

OpenAI、Claude、DeepSeek、Qwen、Gemini、Grok，或者 Ollama 本地離線。PageAgent 本身不含后端服務(wù)（我為了各位方便技術(shù)測試提供了免費的測試 LLM 接口）。數(shù)據(jù)直接從頁面發(fā)往你配置的 LLM 端點。MIT 協(xié)議，代碼完全可審計。

不止于單頁面

PageAgent 運行在頁面內(nèi)，對 SPA 來說是完美適配 —— Agent 擁有完整的應(yīng)用狀態(tài)和上下文。

但有些任務(wù)需要跨頁面。一個可選的瀏覽器擴展為此提供了多標簽頁能力，需要用戶主動授權(quán)。

是你的網(wǎng)頁在驅(qū)動瀏覽器，你網(wǎng)頁內(nèi)的 Agent 可以將 PageAgentExt 作為一個 Tool 來控制用戶的整個瀏覽器（需要用戶顯式授權(quán)）。

const result = await window.PAGE_AGENT_EXT.execute(  '在京東搜索"機械鍵盤"，對比前三個結(jié)果的價格和評價',  {       baseURL: 'https://api.openai.com/v1',    apiKey: YOUR_KEY,    model: 'gpt-5.1',    onStatusChange: (status) => updateUI(status),  } )

因為 Agent 跑在用戶的真實瀏覽器里，它天然處于用戶的登錄態(tài)。不需要共享密碼，不需要管理 Cookie，不需要后端模擬登錄。用戶已經(jīng)登錄了 —— Agent 直接操作。

這打開了后端爬蟲方案做不到的場景：

• 企業(yè)采購系統(tǒng)自動下單 —— 用戶登錄著供應(yīng)商門戶，Agent 直接走下單流程
• 企業(yè)差旅預(yù)訂 —— 在公司的差旅系統(tǒng)里操作實際的預(yù)訂流程，而不是去爬公開票價
• 項目管理自動化 —— 在團隊的項目看板上直接創(chuàng)建任務(wù)，不需要 API 對接

模塊化

我盡可能的做了拆分和模塊化，你可以用零部件自由組合，拼裝進你自己的 Agent 或者瀏覽器插件里。

立刻嘗試