高德地图、Chrome DevTools、文件系统...... 所有能力一键接入 Agent
前言
上一篇文章我们聊了 MCP 的基础概念和跨进程调用。今天继续深入,看看 MCP 生态到底能给我们的开发效率带来多大提升。
先看一个场景:你的 Agent 需要------
- 查询某个坐标点附近的酒店
- 把结果保存到本地文件
- 打开浏览器展示酒店图片
放在以前,你可能要写一堆 HTTP 请求、文件操作、 Puppeteer 脚本,还要把这些功能封装成 Tool 供 LLM 调用。
但现在,有了 MCP 协议,这些能力全都有现成的 Server 可以直接复用。
图片注释原文: "有了 MCP 协议后,有个巨大的好处。任何人都可以开发基于这个协议的 MCP Server,然后可以直接复用。"
一、MCP 基础:架构三组件 + 三大原语
在深入实战之前,我们先快速建立 MCP 的核心概念框架,避免后续混淆。
1.1 架构三组件:Host、Client、Server
MCP 的通信模型由三个角色组成:
| 组件 | 本质 | 示例 |
|---|---|---|
| MCP Host | AI 应用程序(Agent) | LangChain 脚本、Cursor、Claude Desktop |
| MCP Client | 协议通信层(内置在 Host 中) | MultiServerMCPClient |
| MCP Server | 独立的工具/资源/提示提供者 | my-mcp-server、高德 MCP、Filesystem MCP |
图片注释原文: "ai agent 是 MCP 客户端(host),可以通过 MCP 协议调用各种 MCP Server,clients 配置添加,实现跨进程工具调用。"
一句话总结 :Host 是大脑,Client 是神经,Server 是手脚。 Host 通过 Client 与多个 Server 通信,实现能力扩展。
1.2 三大原语:Tools、Resources、Prompts
MCP 协议定义了三种可暴露的能力,统称为"原语(Primitives)":
| 原语 | 作用 | 交互方式 | 类比 |
|---|---|---|---|
| Tools(工具) | 执行动作、计算 | 模型主动调用(传参执行) | AI 的"手" |
| Resources(资源) | 提供数据、知识 | 模型被动接收(注入上下文) | AI 的"备忘录" |
| Prompts(提示模板) | 提供指令模板、话术 | Client 主动获取并填充 | AI 的"SOP" |
图片注释原文: "MCP 通过 stdio/http 跨进程提供 Tool/Resource/Prompt"
- Tool 最常见,和平时说的 Tool Use 没本质区别,只是跨进程了(抛饵)。
- Resource 可以作为 SystemMessage 的一部分,成为 Content。
- Prompt 则是预定义的提示词模板,可带参数动态渲染。
三者在 Agent 工作流中协同工作:
启动时读取 Resources 和 Prompts 构建高质量的 System Prompt;运行时根据用户 Query 自主决定调用哪些 Tools;Tool 执行结果回传后继续推理,直至完成任务。
二、远程 MCP 的应用场景
MCP 本质上还是 Tool,只不过包了一层进程,可以通过 stdio 或 HTTP/SSE 来访问。
常见场景
| MCP Server | 功能 | 典型用途 |
|---|---|---|
| 高德地图 MCP | 位置查询、路线规划、POI 搜索 | 酒店查询、导航、地理编码 |
| Chrome DevTools MCP | 打开/关闭页面、点击元素、截图 | 自动化测试、网页信息抓取 |
| FileSystem MCP | 读写文件、创建目录 | 日志记录、数据持久化、配置管理 |
图片注释原文: "高德 MCP 可以做位置查询、路线规划等;ChromeDevTool 控制浏览器,打开关闭页面、点击元素、截图等;fileSystem 读写文件、创建目录等。"
这些 Server 可以是本地的(stdio),也可以是远程的(HTTP/SSE)。比如高德地图官方就提供了远程 MCP 服务,只需要一个 API Key 就能用。
三、一键集成多个 MCP Server
在 LangChain 中,MultiServerMCPClient 支持同时配置多个 MCP Server,无论是本地还是远程。
3.1 配置示例
javascript
go
import { MultiServerMCPClient } from '@langchain/mcp-adapters';
import { ChatOpenAI } from '@langchain/openai';
const mcpClient = new MultiServerMCPClient({
mcpServers: {
// 1. 远程 MCP(高德地图,通过 SSE)
'amap-sse': {
url: 'https://mcp.amap.com/sse?key=你的高德API密钥'
},
// 2. 本地 Node 编写的自定义 MCP(含 Tool + Resource + Prompt)
'my-mcp-server': {
type: 'stdio',
command: 'node',
args: ['路径/my-mcp-server.mjs']
},
// 3. 官方 FileSystem MCP(通过 npx 直接运行)
'file-system-server': {
type: 'stdio',
command: 'npx',
args: [
'@modelcontextprotocol/server-filesystem',
'C:\Users\...\workspace' // 允许访问的根目录
]
},
// 4. Chrome DevTools MCP(通过 npx 运行)
'chrome-devtools-server': {
type: 'stdio',
command: 'npx',
args: [
'--y',
'chrome-devtools-mcp',
'--port', '9222',
'--chrome-path', 'C:\Program Files\Google\Chrome\Application\chrome.exe'
]
}
}
});
图片注释原文: "file-system-server: type:stdio, command:npx, args: '@modelcontextprotocol/server-filesystem', '路径'"
3.2 获取所有 Tool、Resource 和 Prompt
javascript
ini
// 获取所有工具(用于绑定给 LLM)
const tools = await mcpClient.getTools();
// 获取所有 Resources(可注入 System Prompt)
const resources = await mcpClient.listResources();
let resourceContent = '';
for (const [serverName, resList] of Object.entries(resources)) {
for (const res of resList) {
const content = await mcpClient.readResource(serverName, res.uri);
resourceContent += content[0].text;
}
}
// 获取 Prompts(可动态获取提示模板)
const prompts = await mcpClient.listPrompts();
// 例如获取 'travel_guide' 模板并传入城市参数
const promptResult = await mcpClient.getPrompt('travel_guide', { city: '西安' });
// promptResult.messages 即为渲染后的提示消息
图片注释原文: "MultiServerMCPClient getResources;Object.entries 拼成字符串"
这三行代码,就把四个不同来源、不同语言、不同进程的 Server 中的所有能力全部聚合到了一起。这就是 MCP 生态的威力。
四、为什么 MCP 让复用变得如此简单?
在 MCP 之前,如果你想复用别人写的 Tool,通常要:
- 复制代码,修改依赖
- 或者封装成 REST API,自己写 Client
- 语言不同时还要跨语言 RPC
而现在,只要对方按照 MCP 规范暴露了一个 Server(stdio 或 HTTP),你就可以直接通过 MultiServerMCPClient 配置一下 URL 或命令,零代码侵入地拿到所有工具、资源和提示。
图片注释原文: "MCP 本质上还是 tool,只不过还包了一层进程,可以通过 stdio/http 来访问。"
这种"插件化"的架构,让 AI Agent 的能力边界可以无限扩展------需要什么能力,就加一个 MCP Server 配置。
五、生态现状
目前 MCP 生态已经涌现出大量官方和社区贡献的 Server:
- 官方维护:FileSystem、GitHub、Slack、Google Drive 等
- 第三方:高德地图、Browser Automation、Database(PostgreSQL/MySQL)、Redis 等
- 自定义:你可以为自己的业务系统开发专属 MCP Server
未来,MCP 极有可能成为 AI Agent 领域的 "USB 接口标准" ------任何工具只要插上这个接口,就能被任意 Agent 识别和使用。
六、小结
- MCP 架构:Host(Agent) 内嵌 Client ,通过 stdio/HTTP 连接多个 Server
- MCP 能力三原语:Tools(行动) 、Resources(知识) 、Prompts(话术)
MultiServerMCPClient支持同时接入本地和远程多个 Server- 生态正在迅速丰富,从地图、浏览器到文件系统应有尽有
下一篇文章,我们将基于这些 Server,实现一个完整的实战案例:查询酒店 -> 保存结果 -> 浏览器展示图片。