远程 MCP 多服务器协作实战高德地图 浏览器 文件系统一个 Agent 全搞定你跟 AI 说帮我查北京南站附近最近的 3 个酒店把图片在浏览器里打开每个 tab 标题改成酒店名——30 秒后Chrome 弹出 3 个 tab地图查坐标、搜酒店、开浏览器、改标题AI 一手包办。这不是科幻这就是 MCP 多服务器协作。文章目录远程 MCP 多服务器协作实战高德地图 浏览器 文件系统一个 Agent 全搞定一、先看效果二、MCP 协议解决了什么问题三、远程 MCP vs 本地 MCP四、多服务器协作架构核心代码ReAct 循环五、实战北京南站找酒店全流程关键步骤解读这个案例展示了什么六、MCP 生态与展望七、总结一、先看效果Agent 实际跑起来的执行日志第 1 轮 → amap-mcp.geocode(北京南站) → (116.379, 39.865) 第 2 轮 → amap-mcp.aroundSearch(坐标, 酒店, 3km, 取前3) → 汉庭(0.8km) / 如家(1.2km) / 全季(1.5km) 图片URL 第 3 轮 → filesystem.write_file(hotels_result.json) 第 4 轮 → chrome-devtools.new_page() × 3逐个打开酒店图片 第 5 轮 → chrome-devtools.evaluate_script(document.title汉庭北京南站店) × 35 轮对话4 个完全不同的 MCP Server 协同工作全程无人工干预。二、MCP 协议解决了什么问题MCPModel Context Protocol Tool 进程封装 标准协议。把工具包装成独立进程通过 stdio 或 HTTP 对外暴露。传统 Function Call 的痛点每个项目手写一遍、没有标准协议、工具代码跟 Agent 耦合。MCP 的解法别人写好服务你一行配置接进来用。维度传统 Function CallMCP复用性每个项目重写一次开发到处url/npx接入协议各框架自己定统一 stdio / HTTP SSE部署跟 Agent 耦合可本地、可远程、独立部署语言必须跟 Agent 同语言任意语言生态各自为战社区共建像 npm 一样分发一句话工具从一次性胶水代码变成了可积累的数字资产。三、远程 MCP vs 本地 MCPMCP 支持两种传输方式特性远程 MCPHTTP/SSE本地 MCPstdio连接方式url: https://...command: node启动子进程适合场景外部 API地图、搜索、GitHub本地资源文件、浏览器、Shell延迟有网络开销本机进程通信延迟低安全靠 API Key 鉴权操作系统进程隔离典型例子高德 MCP、GitHub MCPFilesystem MCP、Chrome DevTools MCP决策原则很简单调外部服务用远程 HTTP操控本地资源用 stdio。一个成熟的 Agent 应用几乎一定是两者混用。四、多服务器协作架构本项目同时连接 4 个 MCP Server覆盖外部查询 → 本地处理 → 可视化展示完整链路HTTPstdiostdiostdio DeepSeek v4 Pro MultiServerMCPClient统一工具总线️ amap-mcp高德地图 API my-mcp-server自定义工具 filesystem文件系统操作 chrome-devtools浏览器控制核心代码import{MultiServerMCPClient}fromlangchain/mcp-adapters;import{ChatOpenAI}fromlangchain/openai;// 模型初始化 —— DeepSeek 兼容 OpenAI 协议constmodelnewChatOpenAI({modelName:deepseek-v4-pro,apiKey:process.env.DEEPSEEK_API_KEY,temperature:0,// Agent 场景设 0确保工具调用稳定configuration:{baseURL:https://api.deepseek.com/v1},});// 一次配置4 个 MCP Server 全部接入constmcpClientnewMultiServerMCPClient({mcpServers:{amap-mcp:{// ① 远程 HTTPurl:https://mcp.amap.com/mcp?keyYOUR_KEY},my-mcp-server:{// ② 本地 stdiocommand:node,args:[./my-mcp-server.mjs]},filesystem:{// ③ 本地 stdiocommand:npx,args:[-y,modelcontextprotocol/server-filesystem,./workspace]},chrome-devtools:{// ④ 本地 stdiocommand:npx,args:[-y,chrome-devtools-mcplatest]}}});consttoolsawaitmcpClient.getTools();// 拉取所有 Server 的工具列表constmodelWithToolsmodel.bindTools(tools);// 注入模型getTools()是魔法发生的地方——它对远程 MCP 发 HTTP 请求拉工具列表对本地 MCP 启动子进程通过 stdio 拉工具列表然后统一转成 LangChain Tool 对象。对上游模型来说4 个来源的工具长得一模一样。ReAct 循环asyncfunctionrunAgentWithTools(query,maxIterations30){constmessages[newHumanMessage(query)];for(leti0;imaxIterations;i){constresponseawaitmodelWithTools.invoke(messages);messages.push(response);// 没有 tool_calls → 模型认为任务完成if(!response.tool_calls?.length)returnresponse.content;// 逐个执行工具结果追加回对话历史for(consttool_callofresponse.tool_calls){consttooltools.find(tt.nametool_call.name);constresultawaittool.invoke(tool_call.args);messages.push(newToolMessage({tool_call_id:tool_call.id,content:typeofresultstring?result:result?.text}));}}returnmessages[messages.length-1].content;}核心就是ReActReasoning Acting模型观察当前状态 → 决定调哪个工具 → 拿到结果 → 再观察 → 直到任务完成。五、实战北京南站找酒店全流程 Chrome DevTools Filesystem️ 高德 MCP AI Agent Chrome DevTools Filesystem️ 高德 MCP AI Agentgeocode(北京南站)(116.379, 39.865)aroundSearch(坐标, 酒店, 3km, 取前3)汉庭(0.8km)/如家(1.2km)/全季(1.5km) 图片URLwrite_file(hotels_result.json)写入成功new_page(酒店A图片) / new_page(酒店B图片) / new_page(酒店C图片)3 个 Tab 已打开evaluate_script(document.title汉庭北京南站店) × 3标题修改完成关键步骤解读第 1 步 —— 地理编码Agent 知道高德 MCP 的周边搜索接口要求传经纬度而不是地址文本所以它自主推理出先 geocode 拿坐标再 aroundSearch 搜酒店。这不是 hardcode 的流程是模型根据工具 schema 推出来的。第 2 步 —— 周边搜索radius: 30003 公里、sortrule: distance、取前 3——这些参数都是 Agent 自己填的。附近是多远3 公里是 LLM 常识推理的结果。第 3 步 —— 结果持久化Agent 主动把结果写入hotels_result.json。用户没明确要求这一步这是 Agent 的好习惯——搜到数据先存一份。第 4-5 步 —— 浏览器展示 改标题Agent 调用 Chrome DevTools MCP逐个打开 tab 展示酒店图片然后注入 JS 修改标题。Chrome DevTools MCP 底层通过 CDP 协议跟 Chrome 通信要求 Chrome 以chrome --remote-debugging-port9222启动。这个案例展示了什么能力体现异构工具协同远程 HTTP高德 本地 stdioFilesystem Chrome三种工具无缝配合Agent 甚至不知道底层传输方式不同上下文传递高德返回的酒店名 → Chrome tab 标题图片 URL → new_page 参数。工具间数据通过对话历史自然流转多步推理Agent 自己拆解任务、决定顺序先 geocode → 再 aroundSearch → 再写文件 → 再开浏览器 → 再改标题六、MCP 生态与展望MCP 协议由 Anthropic 于 2024 年底推出生态已初具规模官方Filesystem、GitHub、PostgreSQL、Slack、Puppeteer、Memory社区高德地图、Chrome DevTools、Notion、Figma、Docker框架LangChain、LlamaIndex、OpenAI Agents SDK、Claude Code 均已接入未来想象空间MCP 应用商店搜到即用、企业级 MCP 中台内部服务一键封装、可视化工作流编排。七、总结核心要点MCP 工具标准化一次开发到处复用工具从一次性胶水代码变成可积累的资产远程 本地混用MultiServerMCPClient一行配置搞定模型无感调用Agent 自主推理不是 hardcode 流程模型根据工具 schema 自己决定调什么、按什么顺序调