把 Agent 内嵌进网站：好玩只是开胃菜，真正爽的是“复杂操作一口气跑完” 😄
你在网站里塞一个聊天框，用户问问题、你回答案，这种“AI 助手”大家见多了。
更刺激的是：用户在网页里一句话下单、批量改状态、对账导出、填完一串表单——Agent 直接替他点、替他填、替他跳转。
这类“会动手”的 Agent，做对了很上头；做错了也很容易翻车（误点、越权、乱填、卡死）。这篇就聊清楚怎么把它做成能上线的东西。
原始素材里提到的项目：
github.com/alibaba/page-agent（阿里开源的 Page Agent 方向）。下面会用“Page Agent”统称这类网页操作型 Agent。
1）什么叫“网页内嵌 Agent”，别跟客服聊天框混了
常见两种形态：
- 问答型：用户问“退款规则是什么”，Agent 回一段文本。
- 操作型（Page Agent）：用户说“把这 20 个订单改成已发货并导出 Excel”，Agent 会在页面里自己完成操作。
你想要的通常是第二种。
它的核心能力就两件事：
- 读懂页面：知道哪个是筛选栏、哪个是按钮、哪个是表格。
- 执行动作：点击、输入、选择下拉、滚动、等待异步、处理弹窗。
2）哪些场景最适合？（做了真的能让人每天早下班一小时）
✅ 适合上 Page Agent 的页面
- 后台管理系统：订单、工单、内容审核、权限管理。
- 流程长且重复：每次都要点 8 下、填 5 个字段、还要复制粘贴。
- 页面操作规则稳定：按钮位置不天天改，字段含义明确。
- 跨页面串联：A 页面查数据 → B 页面批量更新 → C 页面导出。
❌ 先别急着上
- 页面结构天天变，组件库随缘改 class。
- 关键动作不可逆（比如“删除全站内容”）却不做二次确认。
- 没有权限体系、没有审计日志。
一句话：把它当“能干活的同事”，就得给制度和流程，不然出事很快。
3）接入思路：别上来就让它自由发挥
你可以把“网页内嵌 Agent”拆成 4 层：
- UI 层：一个浮窗/侧边栏，显示对话、任务进度、操作回放。
- 控制层：负责把“用户意图”变成“可执行计划”。
- 执行层：浏览器动作引擎（点击、输入、等待、识别元素）。
- 安全层：权限、确认、风控、审计。
很多人翻车就翻在：只有 UI + 大模型，没有控制层和安全层。
4）前端落地：一个可上线的“内嵌 Agent”应该长什么样
4.1 UI：别只做聊天窗口，强烈建议加“任务面板”
用户体验要像这样：
- 上方是对话：用户说要干嘛
- 中间是计划：Agent 打算点哪些按钮、填什么字段
- 下方是进度：当前执行到第几步
- 右侧（或折叠区）是回放：展示它刚刚点击了哪里
用户会更放心。你也更好排查问题。
4.2 页面可操作性：给 Agent “稳定的抓手”
想让 Agent 稳，别指望它每次都靠视觉猜。
在你的页面组件上加一些“可被识别的锚点”，成本很低，收益巨大：
- 给关键按钮加
data-agent="export" - 给输入框加
data-agent="phone-input" - 给表格行加
data-agent-row-id="${id}"
这样做的意义：
- 页面换皮肤、换布局，Agent 也不容易失明
- 日志里能清楚看到它到底点了哪个元素
你要做的是“工程能力”，不是“玄学召唤”。
5）让 Agent 真能跑复杂操作：用“计划 + 工具调用”把它拴住
操作型 Agent 别让它直接输出一段话就去执行。
更靠谱的套路：
- 大模型输出 计划（Plan）：一步一步列出动作
- 每一步都走 工具调用（Tool Call）：由你的执行器去点、去填
- 每一步执行后回传 结果（Observation）：成功/失败、当前页面状态
示例：把“批量发货并导出”拆成可执行计划
用户说：
把今天的订单筛出来，批量改成已发货，然后导出 Excel。
Agent 计划可以长这样（示意）：
- 打开订单列表页
- 设定筛选条件：日期=今天
- 点击查询
- 全选列表
- 点击“批量操作”→选择“标记已发货”
- 等待成功提示
- 点击“导出”→选择“当前筛选结果”→确认
你会发现：复杂操作变得可控了。
6）关键避坑：你不做这些，Agent 迟早给你捅娄子 🧨
6.1 权限与越权
- Agent 能做的动作必须跟用户权限一致
- 后端接口依然要校验权限（别只信前端）
- 对“高危动作”加二次确认：删除、打款、批量改价
6.2 防误操作（强烈建议做）
- 预览变更：批量改状态前，把将要变更的数量/范围展示出来
- 可撤销：能撤就撤，不能撤就加审批
- 节流与限速：连续点击/提交要限流，防止抽风连点
6.3 异步与弹窗
网页最坑的是：
- 点了按钮没反应，其实在 loading
- 弹窗遮住了按钮
- 表格分页后元素换了
解决方案：
- 执行器内置
waitFor：等待某个元素出现/消失 - 给弹窗统一加
data-agent-modal - 每一步动作都校验“页面状态是否符合预期”
6.4 观测与回放
上线后一定会遇到：用户说“它乱点”，你说“我这没复现”。
你需要：
- 记录每一步：时间、页面 URL、目标元素、入参、返回结果
- 失败时自动打包：截图 + DOM 片段 + 日志
- 支持一键回放（内部排查神器）
7）把效果拉满：让它不只是“点点点”，还能“懂业务”
真正好用的内嵌 Agent，通常会再加两种能力：
7.1 业务工具（比纯网页操作更稳）
网页点点点很好看，但更稳的是：
- 能走 API 的尽量走 API
- 页面操作只负责“人类必须在页面确认”的部分
举个例子：
- 查询订单、计算金额 → API
- 最终导出、下载 → 页面
稳定性会直接起飞。
7.2 业务词典（让它听得懂你们公司的黑话）
你们内部可能会说：
- “走海运”= 物流方式 A
- “红单”= 风控标记 B
- “小票”= 某个导出模板
把这些映射做成一份配置，Agent 的理解成本会低很多。
8）快速上手清单：照着做就能跑起来
给你一条务实路线：
- 在页面加
data-agent锚点（先覆盖 10 个最常用控件） - 做一个侧边栏：对话 + 计划 + 进度 + 回放
- 把常用动作封成工具：
click/type/select/waitFor/extractTable - 选 1 个高频流程当 MVP：比如“筛选订单→导出”
- 加风控：二次确认 + 审计日志 + 限速
- 内测一周：你会收获一堆“人类根本不会按流程点”的真实用法
9）你可以直接抄的 Prompt 框架（操作型 Agent 专用）
把这段放到系统提示词/开发者提示词里改一改：
你是网站内的操作助手。你的目标是帮用户完成页面上的具体操作。
规则：
- 每次执行前输出一个计划，计划由可执行步骤组成。
- 每一步必须调用工具执行，不能凭空说“已完成”。
- 遇到高危操作（删除/支付/批量改价/批量发货）必须请求用户确认。
- 页面状态不符合预期时停止并说明卡点，给出你需要用户提供的信息。
- 优先使用带 data-agent 标记的元素。
输出格式：
- plan: 步骤列表
- tool_calls: 本轮要调用的工具
这玩意儿不花哨，胜在稳。
10）结尾一句话
在网站里内嵌 Agent 确实好玩。
好玩的尽头是“真能干活”。
你只要把锚点、计划、工具调用、风控、日志这几块搭起来，它就不再是个会聊天的摆件，而是能把一堆复杂操作跑顺的网页搭子。
