MCP 实战第二弹：集成高德地图、文件系统、Chrome DevTools，打造能看能写能操控浏览器的超级 Agent

上一篇文章我们学会了用 LangChain 调用自己写的 MCP Server。这一次我们玩点更酷的------同时接入三个第三方 MCP 服务，让 AI 帮你查地图、写文件、自动操作浏览器。

一、为什么需要多个 MCP 服务协作？

单个工具能让大模型完成单一任务，但现实世界的需求往往是组合式的：

查一下北京南站附近的酒店，并规划路线
把路线保存到本地 Markdown 文件
在浏览器中打开每个酒店的图片，自动切换标签页展示

这三个动作分别涉及地图、文件系统、浏览器控制。如果手动操作，你需要在不同 APP 之间切换。但如果我们将这三个能力通过 MCP 协议一键集成到同一个 Agent 中，大模型就能按照你的指令自动编排执行。

今天我们就用 高德地图 MCP + 文件系统 MCP + Chrome DevTools MCP 来实现这个场景。

二、环境准备

2.1 申请高德地图 API Key

高德地图的 MCP 服务以 HTTP 方式提供，访问需要 API Key。

前往高德开放平台注册开发者账号
创建应用 → 添加 Key，服务平台选择 Web服务
复制生成的 Key，填入 .env 文件：

env 复制代码

AMAP_MAPS_API_KEY=你的高德Key

2.2 安装依赖

bash 复制代码

npm install @langchain/mcp-adapters @langchain/openai @langchain/core dotenv chalk

无需手动安装 MCP Server------我们会让系统通过 npx 自动拉取官方提供的包。

三、三个 MCP Server 的配置解读

我们在 main.mjs 中定义一个 MultiServerMCPClient，里面同时配置三个 Server：

javascript 复制代码

const mcpClient = new MultiServerMCPClient({
    mcpServers: {
        "amap-maps-streamableHTTP": {
            "url": `https://mcp.amap.com/mcp?key=${process.env.AMAP_MAPS_API_KEY}`
        },
        "filesystem": {
            "command": "npx",
            "args": ["-y", "@modelcontextprotocol/server-filesystem",
                     "C:/Users/.../mcp-test"]
        },
        "chrome-devtools": {
            "command": "npx",
            "args": ["-y", "chrome-devtools-mcp@latest"]
        }
    }
});

Server 名称	通信方式	来源	功能
`amap-maps-streamableHTTP`	HTTP（远程）	高德官方 MCP 服务	地点搜索、路径规划、POI 详情
`filesystem`	Stdio（本地）	MCP 官方示例包	读写本地文件
`chrome-devtools`	Stdio（本地）	社区 MCP 包	操控 Chrome 浏览器（打开页面、截图、执行脚本等）

⚠️ 使用 chrome-devtools 前请确保电脑已安装 Chrome 浏览器，否则会报错。

⚠️ 文件系统的路径请自行替换为你本机的一个测试目录。

四、第一步：调用高德地图，查询酒店与路线

我们先从最简单的开始------只让 Agent 使用地图服务，完成 "北京南站附近的酒店，以及路线"。

核心代码：

javascript 复制代码

await runAgentWithTools('北京南站附近的酒店，以及路线');

运行时，大模型会依次调用高德 MCP 提供的工具，例如：

amap-maps_regeocode（逆地理编码）
amap-maps_text_search（关键词搜索）
amap-maps_direction_walking / driving / transit（路线规划）

控制台输出大致如下：

erlang 复制代码

✅ 已加载 MCP 工具列表： [ amap-maps_regeocode, amap-maps_text_search, ... ]
⏳ 第 1 轮思考...
🔧 检测到 3 个工具调用：
   → 调用工具：amap-maps_text_search，参数：{"keywords":"酒店","city":"北京","location":"116.38,39.86"}
   ...
✅ 最终回复：北京南站附近有以下酒店：1. 北京南站汉庭酒店，地址：... 步行路线：...

这一步你已经实现了：让 Agent 实时查询地图信息，取代手动打开高德 APP 的过程。

如图

五、第二步：集成文件系统，将路线保存为 Markdown

接下来加上文件写入能力，让 Agent 自动把规划好的路线保存成 .md 文档。

javascript 复制代码

await runAgentWithTools(
    '北京南站附近的两个酒店，以及路线，路线规划生成文档保存到C:/Users/.../mcp-test的一个md文件'
);

此时 Agent 的工作流变为：

调用高德地图搜索酒店、规划路线
大模型将结果整理成 Markdown 格式
调用 filesystem 的 write_file 工具，将内容写入指定路径

我们可以在 Agent 循环中看到类似这样的工具调用：

swift 复制代码

🔧 调用工具：filesystem-write_file，
   参数：{"path":"C:/.../mcp-test/route.md","content":"# 北京南站周边酒店路线\n..."}

执行完毕后，打开对应目录，你会发现一个新鲜的 route.md 文件，里面是 AI 为你整理好的酒店信息和出行路线。

如图

✨ 这就是 MCP 可拔插生态的魅力：你只需在配置中多写一个 Server，Agent 便自动获得文件读写能力。

六、第三步：引入 Chrome DevTools，让浏览器"活"起来

最后我们实现最炫的功能：查酒店、取图片链接、打开浏览器、在每个标签页展示酒店图片，并把页面标题改为酒店名。

javascript 复制代码

await runAgentWithTools(`
    北京南站附近的三个酒店，拿到酒店图片，展开浏览器，展示每个酒店的图片，
    每个tab一个url展示，并且把那个页面标题改为酒店名
`);

这里 Agent 会编排一个复杂流程：

通过高德搜索酒店，获取酒店名称和图片 URL（可能来自 POI 详情）
调用 chrome-devtools 的 new_page 或 navigate_page 打开图片链接
使用 evaluate_script 或 change_title（取决于工具名称）修改每个标签页的标题为酒店名
可能有 list_pages、select_page 来切换标签页

在代码中我们特别处理了工具返回值的兼容性：

javascript 复制代码

const toolResult = await foundTool.invoke(toolCall.args);
let contentStr;
if (typeof toolResult === 'string') {
    contentStr = toolResult;
} else if (toolResult && toolResult.text) {
    contentStr = toolResult.text;
}
messages.push(new ToolMessage({
    content: contentStr,
    tool_call_id: toolCall.id
}));

这是因为不同 MCP Server 返回的结果格式可能略有差异（纯字符串 vs { text: "..." }），做一下防御性处理能让 Agent 更稳定。

执行这个任务时，你会亲眼看到：

终端打印出工具调用序列
Chrome 浏览器自动启动，一个新标签页被打开，显示酒店图片
标签页标题被逐个改为"汉庭酒店""如家酒店"......
最终大模型总结回复："已为您打开三个酒店的宣传图片，当前浏览器标签页已按酒店名称命名。"

如图

七、完整代码架构一览

javascript 复制代码

// 1. 初始化模型
const model = new ChatOpenAI({...});

// 2. 配置多 MCP Server
const mcpClient = new MultiServerMCPClient({
    mcpServers: {
        'amap': { url: ... },       // HTTP
        'filesystem': { command: 'npx', ... }, // Stdio
        'chrome-devtools': { command: 'npx', ... } // Stdio
    }
});

// 3. 获取工具并绑定
const tools = await mcpClient.getTools();
const modelWithTools = model.bindTools(tools);

// 4. Agent 循环（工具调用 → 返回结果 → 继续推理）
async function runAgentWithTools(query) { ... }

// 5. 执行复杂任务
await runAgentWithTools('...');

// 6. 关闭连接
await mcpClient.close();

这个架构可以无限制扩展：今天你接入三个服务，明天可以接入 Slack、Notion、数据库......所有遵循 MCP 协议的工具，都是你的 Agent 可调用的插件。

八、总结

步骤	使用的 MCP Server	能力
第一步	高德地图	实时地理搜索、路线规划
第二步	高德地图 + 文件系统	搜索 + 自动保存 Markdown 文档
第三步	高德地图 + 文件系统 + Chrome DevTools	搜索 + 保存 + 浏览器自动化展示

通过这个递进式的实战，我们亲眼见证了 一个 Agent 如何通过 MCP 协议把地图、本地文件、浏览器三种看似完全无关的能力无缝串联。这正是 MCP 被称作 "Agent 时代的 USB-C 接口" 的原因。

如果你对文中高德 MCP 的工具列表、Chrome DevTools 的具体用法想深入了解，欢迎在评论区留言。下次我们可以探讨：如何自己开发一个 HTTP 类型的 MCP Server，并部署到服务器上供团队使用。

MCP 实战第二弹：集成高德地图、文件系统、Chrome DevTools，打造能看能写能操控浏览器的超级 Agent