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

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

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

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

??GitHub｜MIT 開源

一行代碼

• 傳統(tǒng)方案的部署路徑：安裝 Python → 安裝 Playwright → 跑一個 Docker → 啟動一個無頭瀏覽器 → 截圖 → 調 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

這個架構差異帶來的不只是部署便利，而是角色反轉。

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

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

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

• 在你的 SaaS 產(chǎn)品里內嵌一個 AI 助手，用戶用自然語言完成復雜操作
• 給企業(yè)后臺的 ERP/CRM 加上智能導航，代替 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 本身不含后端服務（我為了各位方便技術測試提供了免費的測試 LLM 接口）。數(shù)據(jù)直接從頁面發(fā)往你配置的 LLM 端點。MIT 協(xié)議，代碼完全可審計。

不止于單頁面

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

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

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

const result = await window.PAGE_AGENT_EXT.execute(  '在京東搜索"機械鍵盤"，對比前三個結果的價格和評價',  {       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)自動下單 —— 用戶登錄著供應商門戶，Agent 直接走下單流程
• 企業(yè)差旅預訂 —— 在公司的差旅系統(tǒng)里操作實際的預訂流程，而不是去爬公開票價
• 項目管理自動化 —— 在團隊的項目看板上直接創(chuàng)建任務，不需要 API 對接

模塊化

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

立刻嘗試