浏览器 Agent 靠截图和点按钮操作网页,又贵又容易被页面文字劫持。WebMCP 让网站自己在页面里用 document.modelContext 注册工具,浏览器里的 Agent 直接调用,沿用用户已登录的会话。讲清 2026 年 10 月的规范和 Chrome origin trial 状态、命令式和声明式两种写法、和后端 MCP 的分工、两个方向的安全问题,再给 CloudLedger 账单页注册查发票、申请退款、提工单三个工具,不开 Chrome 也能测。
Agent 的回答不一定只能是文字。2026 年让 Agent 在对话里渲染界面的做法收敛成了三条路线:MCP Apps 让工具返回一个沙箱里的 HTML 页面,A2UI 让 Agent 输出一份声明式组件描述交给客户端渲染,AG-UI 负责 Agent 和前端之间的事件传输。今天讲清楚三者各管什么、怎么选、安全边界在哪,然后用 Python 给 CloudLedger 写一个退款审批卡片的 MCP App,在官方测试 host 里真实跑通批准流程。
写给做了好几年前端、后端经验不多、想转 AI Agent 工程师的人。先用 880 条真实 JD 看前端和全栈在 Agent 岗里占多少分量,再讲前端经验在 Agent 工作里值钱的地方、2026 年的 TypeScript Agent 技术栈怎么选、必须补的后端和 Python 短板,以及简历和面试怎么讲。