当前位置：首页 > news >正文

Page-agent MCP结构

news 2026/6/8 8:41:30

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:38401（Launcher Page）。
骑手上线：

◦ Launcher Page 触发浏览器扩展，打开一个 Hub Tab（扩展页面，URL 是 hub.html?ws=38401）。

◦ Hub Tab 立即拨通热线，和 MCP Server 建立 WebSocket 长连接。

此刻的状态：

你（顾客） → Claude（App） → MCP Server（平台） ↔️ WebSocket热线 ↔️ Hub Tab（骑手）
骑手已上线，等待接单。

第 3 步：任务下发（平台 → 骑手）

• MCP Server：通过 WebSocket 把任务原文发给 Hub Tab。

• Hub Tab：收到任务文本，它自己不会执行，而是调用：

useAgent(“在CSDN发布一篇博客，标题…”)

• 关键：useAgent 是扩展注入到网页的桥梁，它会启动 MultiPage Agent（厨师）。

第 4 步：厨师接单干活（Hub → MultiPage Agent）

MultiPage Agent 被唤醒，开始执行原子操作：

// 1. 打开CSDN
await 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 网站本身，提供操作界面厨房和灶具

💡 为什么这么绕？—— 设计意图