page-agent 完整教學 2026：阿里巴巴開源的頁內 GUI Agent，29K 星、一行 script 讓訪客用嘴操作你的網頁（含能做/不能做完整清單）

page-agent 是阿里巴巴開源的 JavaScript「頁內 GUI Agent」。官方定義只有一句：「純 JS 實現的 GUI agent。使用自然語言操作你的 Web 應用。無須後端、客戶端、瀏覽器插件。」翻成人話——它是一個住在你網頁裡的助手，訪客用嘴說，它在頁面上真的去點、去填、去翻。

截至 2026-09-18，這個專案在 GitHub 上累積 29,114 顆星、2,607 個 fork，MIT 授權，npm 最新版本 1.12.4，近一個月下載約 63,000 次。

它最值得理解的一點，是它跟一般人想像的「GUI Agent」完全不同：它不截圖、不用多模態模型、沒有視覺能力——這也是它能做到「一行 script」的原因。

30 秒認識 page-agent

📌 一句話記住它：它是「讀 DOM 的文字派」，不是「看畫面的視覺派」。這個選擇決定了它的優點、也決定了它的極限。

核心洞察：它為什麼不截圖？

大部分人聽到「AI 幫你操作網頁」，腦中浮現的是「AI 看著螢幕截圖，判斷按鈕在哪裡然後點下去」——那叫 computer use（視覺派）。

page-agent 走的是完全不同的路：

官方在「使用限制」頁把這件事講得非常直白：

“Page Agent does not use multimodal models, does not take screenshots, and has no visual capability. It reads pages through DOM structure only.” （Page Agent 不使用多模態模型、不截圖、沒有視覺能力，僅透過 DOM 結構理解頁面。）

這就是為什麼它能「一行 script」：不需要截圖管線、不需要後端、不需要瀏覽器擴展，全部在頁面內用 JavaScript 完成。

但代價也很明確——官方同時說明：

“Images, Canvas, WebGL, SVG and other visual content cannot be recognized.” （圖片、Canvas、WebGL、SVG 等視覺內容無法被識別。）

“Semantic HTML and good accessibility significantly improve results.” （語意化的 HTML 與良好的無障礙設計會顯著提升效果。）

換句話說：你的網頁寫得越語意化，這個 Agent 就越聰明。 這是它跟視覺派最大的哲學差異。

三種用法（從試玩到上線）

用法 1：一行 script，貼上就能試

官方提供免費 Demo LLM，最快體驗方式是把這段貼進頁面：

<script
    src="https://registry.npmmirror.com/page-agent/1.12.4/files/dist/iife/page-agent.demo.js"
    crossorigin="anonymous"
></script>

國際 CDN（jsDelivr）也可用：

<script
    src="https://cdn.jsdelivr.net/npm/page-agent@1.12.4/dist/iife/page-agent.demo.js"
    crossorigin="anonymous"
></script>

只想載入、不要自動建立 Demo Agent：在 URL 後加 ?autoInit=false，之後自己用 new window.PageAgent(...) 初始化（並接上自己的模型）。

⚠️ 用法 1 的真實限制（官方原文，必讀）

很多人只看到「免費」兩個字就貼上線了。官方對這個 Demo CDN 的警語是：

"⚠️ Strictly for technical evaluation and R&D only. Data is processed via servers in Mainland China. Do not input any PII or sensitive data." （⚠️ 僅供技術評估與研發用途，禁止用於生產環境。資料通過中國大陸伺服器處理。請勿輸入任何個人身分資訊或敏感資料。）

三個重點：

1. 禁止生產環境使用——這是試玩用的，不是給正式網站跑的
2. 資料經中國大陸伺服器處理——這對處理客戶個資的頁面是硬性阻礙
3. 禁止輸入 PII／敏感資料

結論：Demo CDN 只能拿來在測試頁上感覺一下效果。要真的上線，必須走用法 3。

用法 2：npm 安裝（正式專案）

npm install page-agent

import { PageAgent } from 'page-agent'

const agent = new PageAgent({
  model: 'qwen3.5-plus',
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
  apiKey: 'YOUR_API_KEY',
  language: 'zh-CN',
})

await agent.execute('點擊登入按鈕')

官方中文文件用的是 language: 'zh-CN'（英文版為 'en-US'）。model 與 baseURL 換成你自家那家即可。

用法 3：換成自己的模型與 key（上線唯一正解）

只要你的模型符合 OpenAI 介面規範、且支援 tool call，就能接。官方原文：

“Supports models that comply with OpenAI API specification and support tool calls, including public cloud services and private deployments.” （支援符合 OpenAI 介面規範且支援 tool call 的模型，包括公有雲服務與私有部署方案。）

私有部署（如 Ollama）也在支援範圍內——代表整個流程可以完全不外流資料。

官方支援的模型清單（完整）

這是 2026-09-18 從官方文件原始碼實查的完整清單，按供應商分組、新到舊排序：

⭐ 官方標記的推薦模型（7 個）

官方文件把下列模型標上星號，並註明篩選標準：

"⭐ Recommended: Fast, lightweight models with strong ToolCall capabilities" （⭐ 推薦：ToolCall 能力強的輕量級模型）

這個清單本身就是一個重要情報：官方推薦的不是最貴最強的模型，而是**「輕量 + ToolCall 強」**。因為這個 Agent 每一輪都要輸出結構化的工具呼叫，便宜、快、格式穩定比「聰明」更重要。

另有官方註解指出部分模型因成功率过低而未列入清單，例如 qwen3-coder-next、MiniMax-M3（原始碼註解：low success rate）。官方也說明：「ToolCall 能力較弱的模型可能返回錯誤的格式，常見錯誤能夠自動恢復。」

它能做什麼、不能做什麼（官方完整清單）

這是最實用的一段，也是原廠文件才有的資訊。

✅ 支援的操作

❌ 不支援的操作

👁️ 理解能力的限制

💡 這段話其實是一份「網頁健檢清單」：就算你不用 page-agent，把頁面寫得語意化（正確的 <button>、<label>、ARIA 標記），本來就會同時改善 SEO、無障礙與 AI 可讀性。

兩種形態：PageAgent.js 與 PageAgentExt

官方把「網站開發者整合」與「使用者自己裝擴展」分成兩條路線：

選哪個？

• 你是網站擁有者，想給自家產品的訪客加 AI 副駕駛 → PageAgent.js
• 你想讓 AI 幫你操作別人的網站、跨多個分頁幹活 → PageAgentExt

還有一個 MCP Server（Beta），可以讓外部 Agent（如你原本的 AI 助手）取得瀏覽器控制能力。

官方列出的五個應用場景

如果你的手上是銷售頁、課程頁、報名頁或預約頁，對得上的主要是前兩條：把「表單填寫」或「我想報名」這種意圖，接到頁面上真正的那幾步操作。

⚠️ 一個誠實的界線：這套工具能幫訪客完成操作，但「裝上之後會不會更好賣」沒有任何官方數據，也沒有第三方轉換率研究。它解決的是「操作摩擦」，不是「說服力」。把它當成減少摩擦的工具，而不是成長保證。

實務建議：什麼情況值得評估

三個上線前檢查：

1. 模型選輕量 ToolCall 強的（官方 ⭐ 清單是好起點，如 claude-haiku-4-5、gemini-3.8-flash）
2. 絕對不要用免費 Demo CDN 上生產——自行接自己的 model key
3. 先檢查頁面語意化程度——這直接決定成功率

FAQ

page-agent 是什麼？

阿里巴巴開源的 JavaScript 頁內 GUI Agent。官方定義：「純 JS 實現的 GUI agent。使用自然語言操作你的 Web 應用。無須後端、客戶端、瀏覽器插件。」MIT 授權。

它需要截圖或視覺模型嗎？

不需要，而且它明確不這樣做。 官方原文：「不使用多模態模型、不截圖、沒有視覺能力，僅透過 DOM 結構理解頁面。」這讓它體積小、不需要特殊權限，但也意味著圖片、Canvas、WebGL、SVG 完全讀不到。

免費的 Demo CDN 可以上線用嗎？

不行。 官方明文：「僅供技術評估與研發用途，禁止用於生產環境。資料通過中國大陸伺服器處理。請勿輸入任何個人身分資訊或敏感資料。」上線請用 npm 安裝並接自己的模型與 key。

支援哪些模型？

只要符合 OpenAI 介面規範且支援 tool call 即可，包含私有部署。官方清單涵蓋 Anthropic（含 claude-sonnet-5、claude-opus-4-8、claude-haiku-4-5 等 10 個）、Qwen、OpenAI、Google、DeepSeek、xAI、Z.AI、MoonshotAI、Tencent、MiniMax，以及 Ollama 等本地端點。

官方推薦哪個模型？

官方標記 ⭐ 的 7 個：claude-haiku-4-5、gpt-5.4-mini、gpt-5.4-nano、gemini-3.8-flash、deepseek-v4-flash、qwen3.5-plus、qwen3.5-flash。標準是「ToolCall 能力強的輕量級模型」——不是最強的，而是最快最穩的。

為什麼頁面語意化很重要？

因為它只讀 DOM。官方指出：圖片／Canvas／WebGL／SVG 無法識別，反常識互動、純視覺提示、快速出現消失的元素都會降低成功率；反之語意化 HTML 與良好無障礙設計會顯著提升效果。

結論

page-agent 值得關注，不是因為它是「又一個 AI Agent」，而是因為它示範了一條很少人走的路：

不做視覺，只讀 DOM；不要後端，全在頁面內；不要擴展，一行 script 就行。

這條路的代價寫在官方文件裡（不能拖拽、不能跨域 iframe、看不到任何圖片），但換來的是極低的整合門檻——對手上已經有網站、只想加一層自然語言操作的人來說，這個取捨非常划算。

三個實務判斷：

1. 技術上很乾淨：純 JS、MIT、支援自帶模型（含本地部署），隱私可控的前提是別用免費 Demo CDN
2. 成敗取決於你的頁面：語意化 HTML 是它的燃料，div 海是它的煞車
3. 它是減摩擦工具，不是成長保證：官方從未承諾轉換率提升，任何聲稱「裝了就會更好賣」的說法都缺乏依據

如果你手上有步驟繁瑣的表單頁或後台，值得花一個下午用測試環境評估；但上線前務必把模型與 key 換成自己的。

專案連結：https://github.com/alibaba/page-agent（MIT 授權） 官方文件：https://alibaba.github.io/page-agent/

本文數據為 2026-09-18 實查 GitHub API 與官方文件中原始碼。模型清單與限制條目引自官方 packages/website 文件原始碼。

延伸閱讀：Open Code Review 完整教學（同為阿里巴巴開源）；Instinct AI 完整解析（對照組：走「截圖 + computer use」的視覺派個人 Agent）。