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

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

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

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

??GitHub｜MIT 開源

一行代碼

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

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('幫我填寫上周五的報(bào)銷單')

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

By Frontend, For Frontend

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

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

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

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

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

Human in the Loop

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

兼容各種 LLM，可純本地運(yùn)行

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

不止于單頁(yè)面

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

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

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

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

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

這打開了后端爬蟲方案做不到的場(chǎng)景：

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

模塊化

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

立刻嘗試