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

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

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

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

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

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

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

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

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

三台服务器，三种能力

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

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/..."]
        },
        "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，它模拟了人类解决问题的思维过程：

复制代码

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

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

javascript 复制代码

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 能力的三层递进：

javascript 复制代码

// 第一层：纯信息查询------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，几行配置，和你的想象力。