最好用的AI工具

Page Agent – 阿里開源的 JavaScript GUI 智能體庫

admin · 2026-07-05

Page Agent是什麼

Page Agent 是阿里巴巴開源的純前端 JavaScript 智能體庫，通過一行代碼嵌入網頁，可讓用戶用自然語言操控頁面 DOM 元素。客戶端庫採用DOM 脫水技術將複雜頁面壓縮爲精簡文本樹，支持任何 OpenAI 兼容模型，無需後端、截圖或瀏覽器擴展，即可實現點擊、填表、滾動等交互，適合爲自有 Web 應用快速添加 AI 副駕駛功能。

Page Agent的主要功能

  • 自然語言操控頁面：用戶輸入點擊登錄按鈕、填寫表單等指令，AI 自動定位並執行 DOM 操作
  • DOM 脫水壓縮：將複雜頁面結構壓縮爲 FlatDomTree 文本樹，僅提取交互元素，降低模型輸入成本
  • 模型無關架構：支持任何 OpenAI 兼容端點（如通義千問、GPT 等），只需配置 baseURL 和 API Key
  • 內置安全控制：支持操作白名單、敏感字段數據脫敏、關鍵操作人工確認，以及自定義領域知識注入
  • 單頁交互閉環：在單個頁面內完成點擊、輸入、滾動等操作，無需後端服務或瀏覽器擴展

Page Agent的技術原理

  • DOM 脫水（DOM Dehydration）：掃描頁面 DOM，爲每個交互元素分配索引、角色和標籤，剝離冗餘標記，生成緊湊文本表示供模型理解。
  • PageController 架構：核心控制器負責更新 DOM 樹、執行元素點擊、文本輸入、頁面滾動等原子操作。
  • Monorepo 分包設計：@page-agent/core 負責無頭智能體邏輯，page-agent 提供完整 UI 面板，@page-agent/page-controller 處理 DOM 提取與索引。
  • 客戶端沙箱運行：直接運行在用戶瀏覽器會話中，繼承 Cookie、Session 和認證狀態，無需額外後端。

微信關注回覆“開源”，加入AI開源項目交流羣

如何使用Page Agent

  • 快速體驗：在網頁中插入一行 <script> 標籤引入 Page Agent 的 IIFE 演示腳本，即可在頁面上激活 AI 操控面板。
  • 安裝依賴：生產環境通過 npm install page-agent 安裝依賴包，將其引入到你的前端項目中。
  • 創建實例：用 new PageAgent() 創建實例，配置 model、baseURL、apiKey 等參數指向你的 OpenAI 兼容模型端點。
  • 執行指令：調用 agent.execute('你的自然語言指令') 讓 AI 解析指令並自動在頁面 DOM 中定位元素、執行點擊或輸入等操作。
  • 安全配置：可選配置操作白名單、數據脫敏規則和關鍵操作確認，確保 AI 行爲符合安全與業務要求。

Page Agent的核心優勢

  • 零後端改造：嵌入一行腳本即可，無需重寫後端或分發瀏覽器擴展。
  • 低成本運行：僅傳輸文本 DOM 結構，無需多模態視覺模型，顯著降低 Token 消耗。
  • 原生安全繼承：頁面原有的 UI 校驗、權限規則繼續生效，敏感數據可脫敏。
  • 模型無關：支持任何 OpenAI 兼容端點，切換模型僅需改 baseURL。
  • MIT 開源：TypeScript 編寫，代碼完全開放，可自由定製。

Page Agent的項目地址

  • 項目官網：https://alibaba.github.io/page-agent/
  • GitHub倉庫：https://github.com/alibaba/page-agent

Page Agent的同類競品對比

維度 Page Agent Playwright
運行位置 頁面內部（客戶端 JavaScript） 外部進程（Node.js/Python/.NET）
頁面讀取 脫水文本 DOM（FlatDomTree） CDP 協議直接訪問瀏覽器 DOM
交互方式 自然語言指令驅動 代碼腳本精確控制
模型依賴 需 LLM 解析指令 無需 AI 模型，純規則執行
部署方式 嵌入一行 <script> 或 npm 安裝 安裝瀏覽器驅動 + 運行時環境
認證狀態 自動繼承用戶瀏覽器 Cookie/Session 需手動配置上下文或登錄流程
視覺能力 無，純文本 DOM 支持截圖、視覺比對、錄屏
跨頁能力 單頁爲主，跨標籤需 Chrome 擴展 原生支持多標籤、多窗口、多瀏覽器
適用場景 爲已有 Web 應用添加 AI 副駕駛 端到端自動化測試、跨站爬蟲
學習成本 低，用戶自然語言即可 中，需編寫選擇器和腳本

Page Agent的應用場景

  • SaaS 產品 AI 副駕駛：在自家產品中嵌入助手，直接幫用戶執行操作而非僅給出文字指引。
  • 智能表單填寫：將多步 ERP/CRM 表單壓縮爲一句指令，如”提交昨天午餐 50 元差旅報銷”。
  • 無障礙訪問：結合 Web Speech API 實現語音控制網頁，提升視障用戶操作體驗。
  • 遺留系統現代化：爲無 API 的舊系統添加自然語言命令欄，無需改動原始代碼。

相關文章

懂了鴨 – 騰訊推出的 AI 趣味學習社區懂了鴨是什麼 懂了鴨是騰訊推出的AI趣味學習社區，面向親子用戶和一線教師開放。懂了鴨以奇妙卡爲核心載體，把繪本、動畫、動態課件、輕量遊戲等知識內容做成可拖拽、可模擬、可操作的交互形式，覆蓋親子互動、K12課堂和課外探索三大場景。內置AI Agent，輸入一句話或語音即可生成繪本、遊戲、3D內容，支持改編社區作品二次創作。 懂了鴨的主要功能 AI 生成內容：輸入一句話或語音，可生成繪本、動畫、動

讀者留言

目前沒有公開留言。

留下你的想法

留言經審核後才會公開。