MCP 高德地图实战：当 AI 学会使用工具，一个协议如何重塑大模型的行动边界

MCP高德地图实战：当 AI 学会使用工具，一个协议如何重塑大模型的行动边界

想象这样一个场景：你对 AI 说"帮我查一下广州塔附近的三个景点，在浏览器里打开每个景点的图片，并把标签页标题改成景点名"。几秒钟后，你的浏览器自动打开了三个标签页，每个都精准地展示着对应景点的图片，标题也一一改好了。

这不是科幻，这是 MCP（Model Context Protocol，模型上下文协议）赋能下的日常。

从"聊天机器人"到"行动代理"

传统的大语言模型像一个被困在对话框里的天才——它什么都知道，却什么也做不了。它不能查实时地图，不能读写你的文件，不能操控你的浏览器。它的大脑连接着一根网线，但双手被绑在身后。

MCP 做的事情很简单，也很彻底：它给 AI 装上了手。

MCP 是 Anthropic 提出的一套开放协议，定义了大模型与外部工具之间的标准化通信方式。可以把它理解为 AI 世界的 USB-C 接口——无论什么工具，只要遵循 MCP 协议，AI 就能即插即用。

下面我们通过一段真实可运行的代码，来看 MCP 是如何让 AI 从"说"进化到"做"的。

三台服务器，三种能力

代码的核心是 MultiServerMCPClient——一个可以同时连接多个 MCP 服务器的客户端。在这个示例中，我们接入了三台 MCP 服务器：

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/..."]
        },
        "edge-devtools": {
            "command": "npx",
            "args": ["-y", "chrome-devtools-mcp@latest", "--browser-executable", "..."],
        }
    }
});

这三台服务器各自承担着截然不同的能力：

高德地图 MCP（amap-maps） 是一个远程 HTTP MCP 服务器。通过 API Key 认证后，它赋予 AI 实时地理信息能力——搜索周边景点、规划出行路线、查询地点详情。这是典型的 Streamable HTTP 模式，适合服务商将能力封装为云端 MCP 服务，用户无需本地部署，一个 URL 即插即用。

文件系统 MCP（filesystem） 是一个本地 stdio MCP 服务器。它让 AI 能够读写指定目录下的文件——创建文档、保存规划结果。注意它被限定在特定路径下运行，这是一种安全沙箱机制，确保 AI 不会越权访问系统其他位置。

Chrome DevTools MCP（edge-devtools） 同样是一个本地 MCP 服务器，但它操控的是浏览器。它能打开新标签页、导航到指定 URL、截取页面截图、修改页面标题——本质上，它把浏览器的开发者工具能力暴露给了 AI。

三种服务器，两种通信模式（HTTP 远程 + stdio 本地），统一协议接入。这就是 MCP 的设计哲学。

工具调用循环：AI 的心跳

整个系统的核心是一个循环——Agent Loop，它模拟了人类解决问题的思维过程：

思考 → 行动 → 观察结果 → 再思考 → 再行动 → ... → 最终回答

代码将这个循环实现得干净利落：

async function runAgentWithTools(query, maxIterations = 30) {
    const messages = [new HumanMessage(query)];

    for (let i = 0; i < maxIterations; i++) {
        const response = await modelWithTools.invoke(messages);
        messages.push(response);

        // 没有工具调用 → 任务完成，输出最终答案
        if (!response.tool_calls || response.tool_calls.length === 0) {
            return response.content;
        }

        // 有工具调用 → 执行工具，把结果喂回给 AI
        for (const toolCall of response.tool_calls) {
            const foundTool = tools.find(t => t.name === toolCall.name);
            const toolResult = await foundTool.invoke(toolCall.args);
            messages.push(new ToolMessage({
                content: contentStr,
                tool_call_id: toolCall.id
            }));
        }
    }
}

这个循环的每一轮都严格遵循三个步骤：

AI 生成响应——可能是文本回答，也可能包含工具调用请求
检测并执行工具调用——如果 AI 说"我需要调用某个工具"，就找到对应工具并执行
反馈执行结果——把工具返回的数据作为新消息，让 AI 决定下一步

maxIterations = 30 是一个安全阀，防止 AI 陷入无限循环。在实践中，大多数任务在 3 到 8 轮内就能完成。

值得细看的是 ToolMessage 的构造方式——工具返回的结果可以是纯字符串，也可以是带 text 属性的对象，代码做了兼容处理。这种弹性是工程实践中的必要考量，因为不同 MCP 服务器返回的数据格式可能略有差异。

三个场景，三种打开方式

代码注释中保留了三个调用示例，恰好展示了 MCP 能力的三层递进：

// 第一层：纯信息查询——AI搜索高德地图，返回文字结果
await runAgentWithTools('北京南站附近的酒店以及去的路线');

// 第二层：信息查询 + 文件落盘——AI规划好路线后，将结果保存为本地 Markdown 文档
await runAgentWithTools('广州南站附近的2个景点，以及去的路线，...保存到...广州南站附近景点及路线规划.md');

// 第三层：信息查询 + 浏览器操控——AI搜索景点，然后打开浏览器展示图片并修改标签页标题
await runAgentWithTools('广州塔附近的3个景点，拿到景点照片，展开浏览器，展示每个景点的图片...');

第一层：感知型任务。 调用地图 API，获取数据，整理输出。AI 替代了你手动打开地图 App、搜索、筛选的过程。

第二层：感知 + 写入型任务。 不仅查询，还要持久化。AI 先调用高德地图拿到路线和景点信息，再调用文件系统工具将格式化好的 Markdown 写入磁盘。两个完全不相关的 MCP 服务器，因为统一的协议，可以无缝协作。

第三层：感知 + 操控型任务。 AI 需要同时调用地图和浏览器。它先从高德地图获取景点照片 URL，然后驱动 Edge 浏览器依次打开每个景点的图片搜索页面，并修改标签页标题。在这个过程中，AI 自动规划了工具调用的先后顺序和参数传递——它知道先调哪个工具，拿到什么数据，再传给下一个工具。这不是预设的工作流，而是 AI 根据任务目标自主编排的。

为什么 MCP 值得关注

回看这段代码的美妙之处：你不需要为高德地图写一个 SDK 封装，不需要为文件操作写一套工具函数，不需要为浏览器操控写一个插件——你只需要用 MCP 协议把它们接进来。

这就是标准化的力量。在 MCP 之前，每个 AI Agent 框架都有自己的工具定义方式，工具与平台强耦合，换个模型就得重新适配。MCP 把工具的定义、发现、调用统一为一种协议，让工具提供方和 AI 应用方各司其职：

工具开发者 只需按 MCP 规范暴露工具接口，不用关心下游用的是什么模型、什么框架
AI 应用开发者 只需连接 MCP 服务器，不用为每个工具写适配代码

更重要的是，MCP 的服务端生态正在快速生长。从上面的代码可以看到，既有高德这样的商业公司提供云端 MCP 服务，也有开源社区贡献的文件系统、浏览器操控等本地工具。API 正在被 MCP 重新定义——不再是写死的 REST 调用，而是让 AI 自主决定何时调用、如何组合。

技术栈一览

这段不到 100 行的代码背后，是一个完整的现代化 AI Agent 技术栈：

层级	技术选型
大模型	通义千问（qwen-plus），通过 OpenAI 兼容接口接入
Agent 框架	LangChain（`@langchain/core` + `@langchain/mcp-adapters`）
MCP 传输	Streamable HTTP（远程）+ stdio（本地进程）
工具生态	高德地图 MCP、文件系统 MCP、Chrome DevTools MCP

值得注意的是模型的接入方式——代码使用了 ChatOpenAI 配合阿里云 DashScope 的兼容端点。这意味着 MCP 本身是模型无关的：只要模型支持 Function Calling / Tool Use，就能接入 MCP 生态。千问可以，GPT 可以，Claude 也可以。

尾声

当一个协议能让 AI 同时操控地图、文件系统和浏览器，而且写得比传统 Selenium 脚本还简洁时，你就知道，有些事情已经彻底变了。

MCP 不是又一个框架，而是一种基础设施。它让 AI 从"能说"进化到"能做"，从"聊天工具"进化为"数字代理人"。而这一切，只需要一个 MultiServerMCPClient，几行配置，和你的想象力。

推荐订阅源

掘金