webagent — Overview

是什麼

webagent 是一個 DOM-grounded agent toolkit。

它讓 AI agent 直接在「人正在看的網頁」這層工作 — 讀 DOM、點按鈕、填表單、做頁面導航、在頁面上高亮 / spotlight 元素、跨頁面維持狀態、必要時暫停問用戶。

不是 LangChain 的替代品，是補充。LangChain 在 backend 工作（沒有「頁面」這個概念），webagent 在 frontend 工作（DOM、accessibility tree、route 是一等公民）。

跟其他 agent 框架的差別

維度 LangChain / LangGraph OpenAI Agents SDK Browser-use / Playwright agents webagent
跑在哪 server server server-driven browser browser 本身（用戶開的頁面）
輸入 text + tool result text + tool result DOM (via accessibility tree) DOM + 用戶可見的視覺 overlay
跨頁面 自己處理 自己處理 session-based 內建 sessionStorage 持久化
UI 給用戶看 沒有（自己接） 沒有 開發者 trace 介面 subtitle / overlay / ask_user / A2UI 原生支援
部署 server + frontend server + frontend server + headless browser 純 frontend SDK，零 server

三個核心使用情境

A. In-app 助手（最主要）

用戶在 SaaS 裡按下 dddk 的 space，講「幫我把這份報告的標題改成更專業的」。webagent 讀現在頁面的 DOM、找到標題元素、改文字、show subtitle 告訴用戶改了什麼。

B. 自動化導覽 / onboarding

新用戶第一次進來，webagent 跑 /introduce skill — 自動帶他逛、highlight 重點、show subtitle 解釋、等用戶按確認再繼續。

C. 用戶意圖執行

用戶說「幫我訂下週的會議室」。webagent 走到訂房頁、填日期、選會議室。中途缺資訊就 render_a2ui_surface 開個 form 在畫面中央，用戶填完繼續。

範圍以外的事

webagent 不做：

  • 跨網站爬蟲（不是 browser automation tool）
  • 後端 agent orchestration（用 LangGraph）
  • 模型訓練 / fine-tune
  • 工作流圖形化編輯（那是 runboard 的事）
  • Command palette / 觸發機制（那是 dddk 的事）

webagent 只做一件事：在當前頁面，根據用戶意圖，用 LLM 操作 DOM。

套件範圍

@perhapxin/webagent
├── core/           # Agent loop, session, prompt
├── tools/          # DOM actions, overlay, dom reader
├── modules/        # immersive-translate, tts, select-agent
├── llm/            # OpenAI + Gemini providers (BYOK)
└── ui/             # subtitle bar, voice indicator, A2UI renderer host

無框架依賴，純 DOM API + event emitter。任何 React / Vue / Svelte / vanilla HTML 都能用。

後續閱讀