远程 MCP 实战：让 AI 成为「千里眼」和「魔术手」

远程 MCP 实战：让 AI 成为「千里眼」和「魔术手」

一、从一个需求说起

假设你明天要去北京出差，需要在北京南站附近订一间酒店，还希望提前看到酒店长什么样、知道怎么过去。传统的做法是：打开高德地图搜酒店 → 记录酒店名 → 去携程/飞猪看图片 → 打开地图规划路线 → 手动整理成文档。

现在有了 MCP（Model Context Protocol，模型上下文协议） ，你只需要对 AI 说一句话：

"北京南站附近的酒店，最近的 3 个酒店，拿到酒店图片，打开浏览器，展示每个酒店的图片，每个 tab 一个 url 展示，并且把那个页面标题改为酒店名"

AI 就能自动完成这一切。

这不是魔法，而是 MCP 让 AI 真正「长了手脚」。

---

二、MCP 到底是什么？

用一句话理解：MCP 本质上就是 Tool（工具），只不过在外面包了一层进程，让你可以通过 stdio 或 HTTP 来访问它。

┌─────────────┐     ┌──────────────┐     ┌─────────────┐
│   AI Model  │────▶│  MCP Server  │────▶│  外部能力    │
│  (大脑)     │◀────│  (翻译官)    │◀────│  (手/眼)    │
└─────────────┘     └──────────────┘     └─────────────┘

传统的 Tool Calling，工具定义和实现都耦合在同一个代码库里。而 MCP 把这个「工具」做成了一个独立运行的进程或服务——它可以是本地的命令行程序（stdio 方式），也可以是远程的 HTTP 服务。

这意味着什么？高德地图团队写好一个 MCP Server，全世界的 AI 应用都可以直接用。 真正实现了「一次开发，到处复用」。

---

三、实战：三种 MCP Server 的混合调用

我们来看一段真实的代码，它同时连接了三种完全不同类型的 MCP Server：

const mcpClient = new MultiServerMCPClient({
    mcpServers: {
        // 1. 远程 HTTP 方式 —— 高德地图
        'amap-maps-streamableHTTP': {
            "url": "https://mcp.amap.com/mcp?key=YOUR_API_KEY"
        },
        // 2. 本地 stdio 方式 —— 文件系统
        'filesystem': {
            command: 'npx',
            args: ['-y', '@modelcontextprotocol/server-filesystem', '/path/to/workspace']
        },
        // 3. 本地 stdio 方式 —— Chrome 浏览器控制
        'chrome-devtools': {
            command: 'npx',
            args: ['-y', 'chrome-devtools-mcp@latest']
        }
    }
});

这里有三种典型的 MCP Server：

MCP Server	连接方式	能力
高德地图 MCP	HTTP 远程	地理编码、POI 搜索、路线规划
FileSystem MCP	stdio 本地	读写文件、创建目录
Chrome DevTools MCP	stdio 本地	打开/关闭页面、点击元素、截图

关键洞察：三种 Server，运行方式不同、实现语言不同、团队不同，但通过统一的 MCP 协议，AI 可以用完全相同的方式调用它们。这就是标准化的力量。

---

四、Agent 循环：让 AI 自主规划与执行

单次工具调用很简单，但真正的威力在于 Agent Loop（智能体循环） ——让 AI 反复思考、调用工具、观察结果、再思考，直到完成任务。

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

    for (let i = 0; i < maxIterations; i++) {
        // 第一步：AI 思考，决定要调用什么工具
        const response = await modelWithTools.invoke(messages);
        messages.push(response);

        // 第二步：如果 AI 认为任务完成，直接返回答案
        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 看到结果后继续思考...
    }
}

这个循环的核心逻辑是 ReAct 模式（Reasoning + Acting） ：

用户输入 → AI 思考 → 需要工具？→ 调用工具 → 获得结果 → AI 再思考 → ... → 最终回答

对于"找酒店 + 展示图片"这个复杂任务，AI 的思考链路大概是这样的：

1. 🔍 调用高德地图 MCP，搜索"北京南站"附近的酒店 POI
2. 📍 获取最近的 3 家酒店坐标和详情
3. 📝 调用 FileSystem MCP，将酒店信息和路线规划写入 Markdown 文件
4. 🌐 调用 Chrome DevTools MCP，为每家酒店打开一个浏览器 Tab
5. 🏷️ 修改每个 Tab 的标题为对应的酒店名称

一个人做要十几分钟的事，AI 几十秒就完成了。

---

五、MCP 带来的范式变化

5.1 「孤岛」变「大陆」

在 MCP 出现之前，每个 AI 平台都要分别对接各个服务：

Claude → 高德 API       GPT → 高德 API
Claude → 浏览器插件      GPT → 浏览器插件
Claude → 文件系统        GPT → 文件系统
    ↑                        ↑
  各自实现，重复造轮子

有了 MCP 之后：

Claude ─┐              ┌── 高德地图 MCP Server
        │              │
GPT ────┼── MCP 协议 ──┼── Chrome DevTools MCP Server
        │              │
其他 AI ─┘             └── FileSystem MCP Server

一次开发，所有 AI 通用

5.2 从「单体应用」到「可组合的乐高」

这三个 MCP Server 的组合，本质上是：

• 高德地图 = AI 的「眼睛」👁️（感知地理位置和周边信息）
• Chrome DevTools = AI 的「手」✋（操作浏览器）
• FileSystem = AI 的「笔」✍️（记录和保存信息）

它们可以像乐高积木一样自由组合：

• 高德 + 文件系统 = 📄 自动生成出行攻略文档
• 高德 + 浏览器 = 🔍 自动搜索并展示目的地信息
• 浏览器 + 文件系统 = 📸 网页截图批量保存
• 三者同时用 = 🤖 全自动旅行规划助手

---

六、技术要点与小技巧

6.1 工具返回值的兼容处理

不同 MCP Server 返回的结果格式可能不同——有的是纯字符串，有的是 { text: "..." } 对象，有的又是 { content: [{ text: "..." }] }。所以代码里做了一个健壮的兼容处理：

if (typeof toolResult === 'string') {
    contentStr = toolResult;
} else if (toolResult && typeof toolResult === 'object') {
    if (typeof toolResult.text === 'string') {
        contentStr = toolResult.text;
    } else if (Array.isArray(toolResult.content) && toolResult.content[0]?.text) {
        contentStr = toolResult.content.map(c => c.text ?? '').join('\n');
    } else {
        contentStr = JSON.stringify(toolResult, null, 2);
    }
}

这是一个很实用的模式：永远不要假设 MCP 工具的返回值格式，做好兜底。

6.2 设置合理的迭代上限

maxIterations = 30 是一个安全阀——防止 AI 陷入无限循环，一直调用工具却无法完成任务。这在实际工程中非常重要。

6.3 模型选择

代码中使用的是 DeepSeek V4 Pro，通过 OpenAI 兼容接口接入。MCP 本身是模型无关的——任何支持 Function Calling / Tool Use 的模型都可以用。

---

七、总结

MCP 的核心价值可以浓缩为三句话：

1. 标准化：统一的协议让工具开发者和 AI 应用方解耦，生态爆发的前提
2. 可组合：不同的 MCP Server 像乐高一样自由拼接，创造出远超单个工具的能力
3. 跨平台：同一个 MCP Server，Claude 能用、GPT 能用、自建 Agent 也能用

从「高德搜酒店」这个小例子，我们看到的是一个更大的趋势：AI 正在从「聊天机器人」进化为「数字代理人」——它能看、能动、能写、能操作。而 MCP，就是让这个进化成为现实的基础设施。

💡 任何人都可以开发基于 MCP 协议的 Server，然后直接被全世界的 AI 应用复用——这正是 MCP 最革命性的地方。