Agent-E 认知框架：DOM 蒸馏与层次化编排实现可靠网页导航
基于 AG2 多智能体框架的浏览器自动化系统。DOM 蒸馏技术按任务类型过滤内容，层次化组聊编排执行规划，MutationObserver 验证防幻觉。
引言：认知层面而非控制层面
前六篇文章介绍的工具解决的是同一个问题：如何让 AI 控制浏览器。Nanobrowser 通过扩展，Steel 通过云端 API，agent-browser 通过 CLI，Camoufox 通过引擎级修改——各自在不同层面解决了"物理控制"的问题。
Agent-E 关注的是另一个层面：AI 如何理解它看到的内容，以及如何决定下一步做什么。
即使一个智能体拥有完全无限制的浏览器控制权，如果它无法从 HTML 海洋中找到正确的信息、无法可靠地定位目标元素、无法从错误中恢复，所有这些控制能力都没有意义。
Agent-E 建立在 AG2（原 AutoGen）多智能体框架之上，引入了三项核心技术来提升智能体的认知可靠性：DOM 蒸馏、mmid 注入和层次化执行编排。
架构概览
┌──────────────────────────────────────────────┐
│ Agent-E 系统 │
│ │
│ ┌────────────────────────────────────────┐ │
│ │ AG2 多智能体框架 │ │
│ │ │ │
│ │ ┌──────────────────┐ │ │
│ │ │ 高层次规划者 │ ← 分析任务目标 │ │
│ │ │ (High-Level │ 拆解为子任务 │ │
│ │ │ Planner Agent) │ 编排执行顺序 │ │
│ │ └────────┬─────────┘ │ │
│ │ │ │ │
│ │ ┌────────▼─────────┐ │ │
│ │ │ 浏览器导航智能体 │ ← 执行浏览器交互 │ │
│ │ │ (Browser Nav │ 读取页面状态 │ │
│ │ │ Agent) │ 反馈执行结果 │ │
│ │ └────────┬─────────┘ │ │
│ │ │ │ │
│ │ ┌────────▼─────────┐ │ │
│ │ │ 技能注册表 │ ← click, type, │ │
│ │ │ (Skill Registry) │ get_dom, 等 │ │
│ │ └──────────────────┘ │ │
│ └────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────┐ │
│ │ 预处理管道（DOM 蒸馏） │ │
│ │ ┌──────────┐ ┌──────────┐ ┌────────┐ │ │
│ │ │ Text │ │ Input │ │ All │ │ │
│ │ │ only │ │ fields │ │ content│ │ │
│ │ └──────────┘ └──────────┘ └────────┘ │ │
│ └────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────┐ │
│ │ 验证层（MutationObserver） │ │
│ │ 监控 DOM 变化 → 确认操作是否生效 │ │
│ └────────────────────────────────────────┘ │
└──────────────────────────────────────────────┘DOM 蒸馏：按需过滤，精准提取
Agent-E 最核心的创新是 DOM 蒸馏（DOM Distillation）。它不像其他工具那样将原始 DOM 或固定的 A11y 树传递给 LLM，而是根据当前任务目标，动态清洗和过滤 DOM 内容。
三种蒸馏内容类型
| 类型 | 保留的内容 | 过滤掉的内容 | 适用场景 |
|---|---|---|---|
| Text Only | 纯文本内容 | 按钮、输入框、链接等交互元素 | 阅读文章、提取信息 |
| Input Fields | 表单元素（输入框、按钮、选择框） | 文本内容、图片、装饰 | 表单填写、登录 |
| All Content | 所有可见元素 | 隐藏元素、脚本、样式 | 需要全面理解的场景 |
蒸馏示例
原始页面 DOM（约 5000 Token）：
<html><head>...大量的脚本、样式、meta...</head>
<body>
<nav class="header-navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
...
</ul>
</nav>
<main class="content">
<article>
<h1>Article Title</h1>
<p>Long article content...</p>
...
</article>
</main>
<footer>...</footer>
<script>analytics code...</script>
</body>
DOM 蒸馏后（Text Only，约 800 Token）：
<h1>Article Title</h1>
<p>Long article content...</p>
<!-- 所有导航、页脚、脚本、样式被过滤 -->mmid 定位机制
许多网页作者没有为 HTML 元素分配唯一的 id 属性，这给智能体定位目标元素带来了困难。Agent-E 在蒸馏阶段主动向每个 DOM 元素注入自定义的 mmid 属性：
<!-- 原始元素 -->
<button class="btn-primary btn-lg">Submit Order</button>
<!-- 蒸馏后（mmid 注入） -->
<button class="btn-primary btn-lg" mmid="ae-127">Submit Order</button>mmid 是确定性的——相同的页面结构会生成相同的 mmid，这使得智能体可以可靠地引用元素。
层次化执行编排
Agent-E 没有采用简单的"观察-思考-行动"线性循环，而是实现了嵌套的组聊（Nested Group Chats）机制。
执行规划器（Execution Planner）
执行规划器是不同于 Planner 和 Navigator 的第三个认知层。它观察蒸馏后的 DOM，不仅决定当前步骤，还预测并批处理后续的多个步骤：
传统线性循环（每个步骤一次 LLM 调用）：
观察 → 思考 → 点击 #1 → 观察 → 思考 → 输入 → 观察 → 思考 → 点击 #2
Agent-E 批处理模式（一次调用处理多步）：
观察 → 思考 → [点击 #1, 输入文本, 点击 #2]（批量执行）这种批处理设计显著降低了 API 延迟——在复杂表单填写场景中，可以减少 40-60% 的 LLM 调用次数。
通信流
用户请求
│
▼
高层次规划者（Planner）
│ 分析任务 → 拆解为子任务序列
│ 分配资源给浏览器导航智能体
▼
浏览器导航智能体（Browser Nav Agent）
│ 读取蒸馏后的 DOM
│ 调用执行规划器批量生成操作
▼
执行规划器（Execution Planner）
│ 生成操作序列：[click, type, click]
│ 调用技能注册表中的具体技能
▼
技能执行（Skills）
│ click_using_selector()
│ enter_text_using_selector()
│ get_dom_with_content_type()
▼
验证层（MutationObserver）
│ 监听 DOM 变化
│ 确认操作是否生效
▼
反馈 → 高层次规划者
│ 成功 → 下一步
│ 失败 → 调整策略MutationObserver 验证：对抗模型幻觉
AI 智能体的一个常见问题是幻觉——模型认为它点击了一个按钮，但实际上点击并未生效（元素被遮挡、页面尚未加载、点击事件未绑定）。
Agent-E 通过 JavaScript 的 MutationObserver 事件来监控操作执行后的 DOM 变化，为 LLM 提供确定性的反馈：
# Agent-E 内部的 MutationObserver 逻辑（简化）
observer_code = """
const observer = new MutationObserver((mutations) => {
// 记录 DOM 变化
mutations.forEach(m => {
console.log('DOM changed:', m.type, m.target);
});
// 标记操作结果
window.__agent_e_last_action_effect = 'observed';
});
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true
});
"""如果点击后 DOM 没有发生变化，智能体可以判断操作失败并触发重试或策略调整，而不是继续基于幻觉执行后续操作。
安装与使用
安装
# 克隆仓库
git clone <repository-url>
cd Agent-E
# 使用 uv 管理 Python 环境
uv venv --python 3.11
source .venv/bin/activate
uv pip install -r requirements.txt
# 配置环境变量
cp .env-example .env
# 编辑 .env，填入 LLM API Key 和模型名称配置
# .env 配置
AUTOGEN_MODEL_NAME=gpt-4-turbo
AUTOGEN_MODEL_API_KEY=your-api-key
BROWSER_STORAGE_DIR=/path/to/chrome/profile # 可选，使用本地 Chrome运行
python -m ae.main启动后，Agent-E 会在浏览器中显示一个图标。点击后打开聊天界面，可以输入自然语言指令。
实战示例
表单填写
在 example.16yun.cn/checkout 帮我填写收货地址：
姓名：张三
电话：13800138000
地址：北京市海淀区中关村大街 1 号Agent-E 的处理流程：
1. 高层次规划者分析任务 → "这是一个表单填写任务"
2. 浏览器导航智能体打开目标页面
3. DOM 蒸馏 → 选择 "Input Fields" 模式
4. 执行规划器识别表单字段（姓名、电话、地址）
5. 批量执行：
→ 在姓名字段填入 "张三"
→ 在电话字段填入 "13800138000"
→ 在地址字段填入 "北京市海淀区中关村大街 1 号"
6. MutationObserver 验证每个字段是否填写成功
7. 提交表单商品搜索与排序
在 example.16yun.cn 上搜索 "wireless headphones"，按价格从低到高排序1. 规划者分析 → "搜索 + 排序任务"
2. 导航智能体打开 example.16yun.cn
3. 蒸馏 → "Input Fields" 模式
4. 定位搜索框，输入关键词
5. 等待搜索结果加载
6. 蒸馏 → "All Content" 模式（需要看到所有元素）
7. 定位排序下拉菜单，选择 "Price: Low to High"
8. 验证排序是否生效
9. 提取结果列表与同领域工具对比
| 维度 | Agent-E | agent-browser | Nanobrowser |
|---|---|---|---|
| 核心方法 | DOM 蒸馏 + 层次化编排 | A11y 树 + Ref 映射 | 多智能体协作 |
| DOM 处理 | 按任务类型动态过滤 | 固定的 A11y 快照 | 原始 DOM + 元素分类 |
| 元素定位 | mmid 属性 + 语义查询 | @e1, @e2 稳定引用 | DOM 路径 + 文本匹配 |
| 验证机制 | MutationObserver | 无内置验证 | Validator 智能体 |
| 批处理 | 执行规划器批量执行 | CLI 批量命令 | 单步执行 |
| LLM 框架 | AG2（原 AutoGen） | 无（直接 CDP） | 自定义多智能体系统 |
| 部署复杂度 | 高（Python 环境 + AG2） | 低（Rust 二进制） | 低（Chrome 扩展） |
局限性与适用场景
Agent-E 最适合：
- 需要高可靠性表单填写的场景（电商下单、注册）
- 需要多步骤推理的复杂任务（比价、跨站数据整合）
- 对 LLM 调用次数敏感的预算场景
不适合：
- 高并发数据采集（Agent-E 的单实例设计，无并发能力）
- 需要对抗高级 WAF 的场景（无隐身/反检测设计）
- 简单的一次性任务（设置成本过高）
总结
Agent-E 的代表性意义在于，它展示了 AI 浏览器代理发展的下一个阶段：从"怎么控制浏览器"到"怎么理解网页"。
DOM 蒸馏技术按需过滤内容，mmid 注入解决元素定位难题，层次化编排降低 LLM 调用次数，MutationObserver 验证对抗幻觉——这些认知层面的设计让智能体在面对复杂、动态网页时更加可靠。
与 Camoufox 关注底层引擎反检测、agent-browser 关注执行速度和 Token 效率不同，Agent-E 关注的是智能体本身的"智力"——它能否正确理解页面，能否从错误中恢复，能否高效运用有限的 LLM 上下文窗口。
下一篇文章将介绍 AWS Agentic Form Filling——一个来自亚马逊云生态的企业级认知编排方案，它通过情景记忆（Episodic Memory）让智能体在连续运行中不断学习和优化导航策略。
需要企业代理方案？
我们可根据目标站点、并发规模与稳定性目标提供定制方案。