Page-agent MCP结构

Page-Agent/MCP 架构用“在 CSDN 发布一篇 AI 博客”这个任务走一遍完整流程看看每一层具体在干什么。 你的完整指令你在 Claude 里输入“在 CSDN 发布一篇博客标题《AI 自动化测试实战》内容略标签为 AI, 测试” 全链路执行流程外卖版第 1 步你下单Claude → MCP Server• 你在 Claude 对话框输入指令。• Claude识别出你要用 MCP 工具生成工具调用{“tool”: “execute_task”,“params”: {“task”: “在 CSDN 发布一篇博客标题《AI 自动化测试实战》内容略标签为 AI, 测试”}}• 怎么发Claude 通过 stdio 管道 把这串 JSON 发给 page-agent/mcp 服务器。第 2 步平台接单MCP Server 启动page-agent/mcp 服务器收到指令后做了三件事开热线启动 WebSocket 服务默认端口 38401就像美团开了个调度热线。叫骑手自动打开浏览器访问 http://localhost:38401Launcher Page。骑手上线◦ Launcher Page 触发浏览器扩展打开一个 Hub Tab扩展页面URL 是 hub.html?ws38401。◦ Hub Tab 立即拨通热线和 MCP Server 建立 WebSocket 长连接。此刻的状态你顾客 → ClaudeApp → MCP Server平台 ↔️ WebSocket热线 ↔️ Hub Tab骑手骑手已上线等待接单。第 3 步任务下发平台 → 骑手• MCP Server通过 WebSocket 把任务原文发给 Hub Tab。• Hub Tab收到任务文本它自己不会执行而是调用useAgent(“在CSDN发布一篇博客标题…”)• 关键useAgent 是扩展注入到网页的桥梁它会启动 MultiPage Agent厨师。第 4 步厨师接单干活Hub → MultiPage AgentMultiPage Agent 被唤醒开始执行原子操作// 1. 打开CSDNawait agent.navigate(“https://www.csdn.net”);// 2. 如果未登录先登录if (当前页面是登录页) {await agent.click(“登录按钮”);await agent.fill(“#username”, “你的账号”);await agent.fill(“#password”, “你的密码”);await agent.click(“确认登录”);}// 3. 进入写博客页面await agent.click(“写博客按钮”);await agent.waitForSelector(“.editor-container”);// 4. 填写内容await agent.fill(“.title-input”, “AI 自动化测试实战”);await agent.fill(“.markdown-body”, “这里是博客正文…”);await agent.fill(“.tag-input”, “AI,测试”);await agent.click(“添加标签”);// 5. 发布await agent.click(“发布按钮”);await agent.waitForSelector(“.publish-success”); // 等待成功提示注意这些操作是串行的每一步都要等上一步完成Agent 会智能等待页面加载。第 5 步结果回传Agent → Hub → MCP → 你Agent 执行完成后将结果成功/失败、截图、最终URL传给 Hub。Hub 通过 WebSocket 将结果发回 MCP Server。MCP Server 将结果通过 stdio 返回给 Claude。Claude 解析结果告诉你最终状态✅ 博客发布成功文章链接https://blog.csdn.net/your-username/article/details/123456(https://blog.csdn.net/your-username/article/details/123456)已自动截图保存发布成功页面。 各层职责清晰版组件 在本任务中的具体工作 类比你 说出“在 CSDN 发布一篇博客…” 顾客点餐Claude 翻译成 execute_task JSON 指令 美团App下单MCP Server 启动服务连接 Hub转发任务 美团平台接单Launcher Page 触发打开扩展页面 平台呼叫骑手Hub Tab 连接 WS调用 useAgent 启动厨师 骑手接单进餐厅MultiPage Agent 实际操作浏览器点击、输入、导航 厨师炒菜浏览器页面 CSDN 网站本身提供操作界面 厨房和灶具 为什么这么绕—— 设计意图安全隔离MultiPage Agent 在网页沙箱中运行无法直接访问你的文件系统Hub 作为中间人确保外部指令被安全过滤。稳定性即使页面崩溃Hub 和 MCP 连接还在可以重试。可扩展一个 Hub 可以管理多个 Agent多标签页同时操作。人机协同你可以在 Hub 里看到实时操作必要时人工干预。 全链路图简洁版你 → Claude → stdio → MCP Server↕ (WebSocket 38401)Hub Tab (扩展)↓ (useAgent)MultiPage Agent↓ (DOM操作)CSDN 网页↓ (结果)Agent → Hub → MCP → Claude → 你整个过程就像你告诉美团要一份宫保鸡丁博客→ 平台叫骑手 → 骑手到餐厅 → 厨师炒菜 → 骑手取餐送回 → 你收到饭。