page-agent 自然语言控制网页实战：getPageInstructions 页面级动态指令的 5 个进阶用法
page-agent 自然语言控制网页实战getPageInstructions 页面级动态指令的 5 个进阶用法【免费下载链接】page-agentJavaScript in-page GUI agent. Control web interfaces with natural language.项目地址: https://gitcode.com/GitHub_Trending/pa/page-agentpage-agent 是一款跑在网页里的JavaScript GUI 智能体让你用一句自然语言就能驱动界面完成点击、填表等操作。而getPageInstructions是它最被低估的进阶配置——它能在每一步执行前根据当前网址动态“喂”给 AI 一段专属提示词。下面用 5 个由浅入深的实战场景带你把这个回调从“能跑”用到“好用”并附避坑清单。 一句话定位system是“全局人设”getPageInstructions是“看菜下饭的临时小贴士”。前者固定后者随页面变化。一、30 秒理解getPageInstructions 是什么它藏在 instructions 配置 里签名非常直白getPageInstructions?: (url: string) string | undefined | null入参当前页面 URLwindow.location.href出参给 AI 的提示词返回undefined/null表示“这个页面不用特殊照顾”对比维度system系统级getPageInstructions页面级触发时机所有任务每个 step 前内容固定字符串按 URL 动态返回适合场景角色、语气、行为边界某个页面专属操作引导是否可省略可省略可省略返回空即跳过二、基础用法给“下单页”加一道保险最小可运行示例——只对结算页生效其余页面返回undefinedconst agent new PageAgent({ // ...其他配置 instructions: { system: You are an order management assistant., getPageInstructions: (url) { if (url.includes(/checkout)) { return This is the checkout page. Verify the address before submitting. } return undefined // 其它页面不加料 } } })完整配置说明可看官方文档custom-instructions/page.tsx。三、5 个进阶用法把回调玩出花1️⃣ URL 路由像写前端路由一样分页面多分支判断让不同页面拿到不同“战术提示”getPageInstructions: (url) { if (url.includes(/products)) return Use filters to narrow results. Check stock first. if (url.includes(/cart)) return Re-confirm quantity and total before checkout. return undefined }✅ 技巧includes最省心若页面路径规律复杂改用下面的正则。2️⃣ 正则匹配应对带动态参数的 URL电商详情页常是/product/12345这种带 ID 的路径includes会漏判正则更稳if (/\/product\/\d/.test(url)) { return Product detail page. Compare specs before adding to cart. }3️⃣ 结合业务上下文把“知识”动态拼进来回调是普通函数你可以查缓存、读配置把领域知识实时拼进提示词getPageInstructions: (url) { const tip fieldTips[url] // 来自你业务侧的映射表 return tip ? Field rule: ${tip} : undefined }这正是它的杀手锏——指令不必写死在代码里可以随业务数据变化。4️⃣ 多角色 / 多语言切换根据页面切“人格”让客服页更谨慎、营销页更活泼return url.includes(/billing) ? You are a careful finance assistant. Never submit payments without confirming. : undefined5️⃣ 性能意识别每一步都干重活回调每个 step 都会被调用请保持它轻量做纯字符串/正则判断 ✅读内存缓存 ✅发起网络请求 ❌会拖慢每一步需要跨任务共享的重数据建议放外层闭包回调里只做“取用”。四、工作原理指令是怎么拼进提示词的每一步执行前源码 PageAgentCore.ts 会把配置拼成如下结构前置到用户提示词之前instructions system_instructions…固定人设…/system_instructions page_instructions…当前页面专属指令…/page_instructions /instructions三条值得知道的“隐藏规则”system为空 → 不输出system_instructions标签getPageInstructions返回空 → 不输出page_instructions标签回调抛错会被try-catch 捕获只console.error不中断任务AI 相当于“没拿到”这段提示。这意味着回调里千万别写可能抛错的逻辑而不自知否则你会以为“指令没生效”其实是它静默失败了。五、实战技巧 常见坑速查坑症状对策返回了空字符串指令“没生效”会被trim()判空省略务必返回非空内容回调里发请求每一步都变慢数据放外层闭包回调只取用静默报错控制台红字但任务照跑回调内加 try-catch 或先本地测URL 带动态 ID 漏判详情页没命中用正则代替includes全局规则塞进页面回调人设被反复覆盖全局人设写system页面级只写差异小结getPageInstructions让 page-agent 的指令从“一刀切”进化到“看页下菜”。记住三个要点入参是当前 URL、返回空就跳过、每步都会调用。先用includes跑通再按需要升级到正则和业务动态数据你的网页 AI 助手就会既聪明又体贴。 想继续深入核心类型见 types.ts完整文档见 custom-instructions 文档页。【免费下载链接】page-agentJavaScript in-page GUI agent. Control web interfaces with natural language.项目地址: https://gitcode.com/GitHub_Trending/pa/page-agent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考