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 文件：

AMAP_MAPS_API_KEY=你的高德Key

2.2 安装依赖

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

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

三、三个 MCP Server 的配置解读

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

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 使用地图服务，完成 “北京南站附近的酒店，以及路线”。

核心代码：

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

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

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

控制台输出大致如下：

✅ 已加载 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 文档。

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

此时 Agent 的工作流变为：

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

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

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

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

如图

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

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

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

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

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

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

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

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 浏览器自动启动，一个新标签页被打开，显示酒店图片
标签页标题被逐个改为“汉庭酒店”“如家酒店”……
最终大模型总结回复：“已为您打开三个酒店的宣传图片，当前浏览器标签页已按酒店名称命名。”

如图

七、完整代码架构一览

// 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