前言做AI Agent开发最折磨人的是什么每接入一类外部能力就要写一套胶水代码、适配一套接口、处理不同返回格式。想让AI查地图单独封装高德接口想读写本地文件重新写文件操作函数想控制浏览器又要对接Chrome调试协议。代码冗余、维护成本爆炸换个大模型还要重新适配一遍工具调用逻辑。直到我用上MCPModel Context Protocol协议彻底解决这个痛点。读完本文你能学到MCP协议核心价值为什么它是AI工具统一标准Node.jsLangChain完整可运行代码同时对接3种MCP服务真实实战场景AI自主查询酒店、生成文档、打开浏览器分页展示图片开发中高频踩坑点与修复方案多MCP服务协同Agent完整执行流程一、先搞懂MCP到底是什么MCP全称模型上下文协议是AI领域标准化工具通信协议业内俗称AI万能USB插头。传统工具接入痛点每个第三方服务、本地能力都要单独写适配层返回格式不统一每次调用都要手动做数据兼容切换大模型、更换工具时大量代码需要重构MCP带来的改变所有工具统一封装成MCP Server通过stdio/HTTP两种方式通信。客户端只需要一次配置就能自动读取全部工具交给LLM自由调用。本文实战用到3套成熟MCP服务amap-maps-streamableHTTP远程HTTP服务高德地图查位置、酒店、路线filesystem本地子进程服务读写本地文件、创建目录、生成md文档chrome-devtools本地子进程服务操控Chrome浏览器新开标签、修改页面标题、打开图片链接二、项目前置依赖安装新建项目安装全部依赖包复制执行npminstalldotenv langchain/mcp-adapters langchain/openai chalk langchain.env环境变量配置项目根目录新建.env文件填入密钥DEEPSEEK_API_KEY你的DeepSeek密钥 AMAP_KEY你的高德地图key三、完整可运行实战代码 mcp-test.jsimportdotenv/config;import{MultiServerMCPClient}fromlangchain/mcp-adapters;import{ChatOpenAI}fromlangchain/openai;importchalkfromchalk;import{HumanMessage,SystemMessage,ToolMessage}fromlangchain/core/messages;// 初始化DeepSeek大模型兼容OpenAI调用格式constmodelnewChatOpenAI({modelName:deepseek-v4-pro,apiKey:process.env.DEEPSEEK_API_KEY,temperature:0,// 设为0保证工具调用稳定不随机发散configuration:{baseURL:https://api.deepseek.com/v1,},});// 多MCP服务统一客户端配置constmcpClientnewMultiServerMCPClient({mcpServers:{// 高德地图远程MCP服务HTTP流式传输amap-maps-streamableHTTP:{url:https://mcp.amap.com/mcp?key${process.env.AMAP_KEY}},// 本地文件系统MCPnpx启动子进程限定访问目录filesystem:{command:npx,args:[-y,modelcontextprotocol/server-filesystem,C:/Users/Administrator/Desktop/ai_doubao_ysw/ai/agent_in_action/remote-mcp]},// Chrome浏览器控制MCP本地调试端口9222chrome-devtools:{command:npx,args:[-y,chrome-devtools-mcplatest,]}}});// 自动拉取全部MCP服务暴露的工具consttoolsawaitmcpClient.getTools();// 将所有工具绑定到大模型模型自动识别可用操作constmodelWithToolsmodel.bindTools(tools);/** * Agent循环执行核心函数 * param {string} query 用户任务指令 * param {number} maxIterations 最大迭代轮次防止死循环 * returns {string} 最终执行结果 */asyncfunctionrunAgentWithTools(query,maxIterations30){constmessages[newHumanMessage(query)];// 循环执行模型思考→调用工具→接收结果→再次思考for(leti0;imaxIterations;i){console.log(chalk.bgGreen(第${i1}轮迭代));constresponseawaitmodelWithTools.invoke(messages);messages.push(response);// 无工具调用任务结束返回最终回答if(!response.tool_calls||response.tool_calls.length0){console.log(chalk.bgRed(AI 最终回答${response.content}));returnresponse.content}console.log(chalk.bgBlue(本轮工具调用${response.tool_calls.map(tt.name).join(, )}));// 逐个执行模型发起的工具调用for(consttoolCallofresponse.tool_calls){constfoundTooltools.find(tt.nametoolCall.name);if(foundTool){consttoolResultawaitfoundTool.invoke(toolCall.args);letcontentStr;// 兼容MCP两种返回格式纯字符串 / {text: 内容} 对象if(typeoftoolResultstring){contentStrtoolResult;}elseif(toolResulttoolResult.text){contentStrtoolResult.text;}// 将工具执行结果存入消息队列供下一轮模型推理messages.push(newToolMessage({content:contentStr,tool_call_id:toolCall.id}));}}}// 达到最大迭代次数返回最后一条AI输出returnmessages[messages.length-1].content;}// 实战任务查询北京南站最近3家酒店、生成文档、浏览器分页打开酒店图片并修改标签标题awaitrunAgentWithTools(北京南站附近的酒店最近的 3 个酒店拿到酒店图片打开浏览器每个tab一个url展示并且把页面标题改为酒店名同时将酒店信息、步行/驾车路线保存为本地md文档);// 关闭所有MCP进程连接awaitmcpClient.close();四、实战场景完整执行效果需求拆解调用高德MCP定位北京南站筛选距离最近3家酒店获取坐标、地址、评分、图片链接、步行/驾车路线调用FileSystem MCP自动生成北京南站附近酒店及路线指南.md保存全部数据调用Chrome DevTools MCP新开3个浏览器标签分别加载酒店图片修改每个Tab页面标题为对应酒店名称生成文档核心内容节选北京南站附近酒店及路线指南北京南站| 坐标116.378059, 39.867679| 北京市丰台区 推荐酒店概览序号酒店名称评分步行距离驾车距离1汉庭酒店(北京南站北广场店)⭐4.4约403米约1.2公里2海友酒店(北京南站南广场店)⭐4.4约1.6公里约1.8公里3桔子酒店(北京南站店)⭐4.6约1.5公里约1.6公里酒店路线详情每家酒店单独区块包含完整步行分步指引、驾车路线、商圈信息最后附带综合对比表格与入住推荐建议。浏览器执行动作Agent拿到每家酒店图片URL后自动调用Chrome工具新建独立Tab页跳转图片链接修改页面document.title为酒店全称3个酒店对应3个独立浏览器标签五、开发高频踩坑提醒坑1Chrome MCP启动失败报错无法连接Chrome调试端口解决启动Chrome时开启远程调试端口chrome --remote-debugging-port9222必须先打开带调试端口的浏览器再运行脚本。坑2FileSystem无权限读写文件报错文件夹访问拒绝解决npx参数里的目录路径必须是绝对路径Windows路径分隔符统一用/不要用\。坑3工具调用频繁失效、模型乱输出解决LLM配置temperature:0降低随机度保证工具调用逻辑稳定最大迭代次数建议设置20~30避免多轮工具调用中断。坑4MCP返回数据解析报错部分MCP工具返回对象带text字段部分直接返回纯字符串代码中做了双重兼容不要删除类型判断逻辑。坑5脚本运行结束进程残留代码末尾必须执行await mcpClient.close()否则npx启动的子进程会常驻后台占用端口。六、MCP核心优势总结统一工具标准高德、文件、浏览器三类能力一套客户端管理无需单独写接口适配可复用生态任何人开发MCP Server直接接入项目不用重构Agent逻辑本地/远程双模式高德HTTP远程服务、文件/浏览器本地子进程服务同时兼容Agent自动编排大模型自主判断何时调用地图、何时写文件、何时操控浏览器不用手动拆分任务低维护成本新增工具仅需在mcpServers配置新增节点其余代码完全不用改动
写Agent还要重复封装工具？一套MCP多服务方案，3个能力让AI自动查地图、读写文件、操控浏览器
前言做AI Agent开发最折磨人的是什么每接入一类外部能力就要写一套胶水代码、适配一套接口、处理不同返回格式。想让AI查地图单独封装高德接口想读写本地文件重新写文件操作函数想控制浏览器又要对接Chrome调试协议。代码冗余、维护成本爆炸换个大模型还要重新适配一遍工具调用逻辑。直到我用上MCPModel Context Protocol协议彻底解决这个痛点。读完本文你能学到MCP协议核心价值为什么它是AI工具统一标准Node.jsLangChain完整可运行代码同时对接3种MCP服务真实实战场景AI自主查询酒店、生成文档、打开浏览器分页展示图片开发中高频踩坑点与修复方案多MCP服务协同Agent完整执行流程一、先搞懂MCP到底是什么MCP全称模型上下文协议是AI领域标准化工具通信协议业内俗称AI万能USB插头。传统工具接入痛点每个第三方服务、本地能力都要单独写适配层返回格式不统一每次调用都要手动做数据兼容切换大模型、更换工具时大量代码需要重构MCP带来的改变所有工具统一封装成MCP Server通过stdio/HTTP两种方式通信。客户端只需要一次配置就能自动读取全部工具交给LLM自由调用。本文实战用到3套成熟MCP服务amap-maps-streamableHTTP远程HTTP服务高德地图查位置、酒店、路线filesystem本地子进程服务读写本地文件、创建目录、生成md文档chrome-devtools本地子进程服务操控Chrome浏览器新开标签、修改页面标题、打开图片链接二、项目前置依赖安装新建项目安装全部依赖包复制执行npminstalldotenv langchain/mcp-adapters langchain/openai chalk langchain.env环境变量配置项目根目录新建.env文件填入密钥DEEPSEEK_API_KEY你的DeepSeek密钥 AMAP_KEY你的高德地图key三、完整可运行实战代码 mcp-test.jsimportdotenv/config;import{MultiServerMCPClient}fromlangchain/mcp-adapters;import{ChatOpenAI}fromlangchain/openai;importchalkfromchalk;import{HumanMessage,SystemMessage,ToolMessage}fromlangchain/core/messages;// 初始化DeepSeek大模型兼容OpenAI调用格式constmodelnewChatOpenAI({modelName:deepseek-v4-pro,apiKey:process.env.DEEPSEEK_API_KEY,temperature:0,// 设为0保证工具调用稳定不随机发散configuration:{baseURL:https://api.deepseek.com/v1,},});// 多MCP服务统一客户端配置constmcpClientnewMultiServerMCPClient({mcpServers:{// 高德地图远程MCP服务HTTP流式传输amap-maps-streamableHTTP:{url:https://mcp.amap.com/mcp?key${process.env.AMAP_KEY}},// 本地文件系统MCPnpx启动子进程限定访问目录filesystem:{command:npx,args:[-y,modelcontextprotocol/server-filesystem,C:/Users/Administrator/Desktop/ai_doubao_ysw/ai/agent_in_action/remote-mcp]},// Chrome浏览器控制MCP本地调试端口9222chrome-devtools:{command:npx,args:[-y,chrome-devtools-mcplatest,]}}});// 自动拉取全部MCP服务暴露的工具consttoolsawaitmcpClient.getTools();// 将所有工具绑定到大模型模型自动识别可用操作constmodelWithToolsmodel.bindTools(tools);/** * Agent循环执行核心函数 * param {string} query 用户任务指令 * param {number} maxIterations 最大迭代轮次防止死循环 * returns {string} 最终执行结果 */asyncfunctionrunAgentWithTools(query,maxIterations30){constmessages[newHumanMessage(query)];// 循环执行模型思考→调用工具→接收结果→再次思考for(leti0;imaxIterations;i){console.log(chalk.bgGreen(第${i1}轮迭代));constresponseawaitmodelWithTools.invoke(messages);messages.push(response);// 无工具调用任务结束返回最终回答if(!response.tool_calls||response.tool_calls.length0){console.log(chalk.bgRed(AI 最终回答${response.content}));returnresponse.content}console.log(chalk.bgBlue(本轮工具调用${response.tool_calls.map(tt.name).join(, )}));// 逐个执行模型发起的工具调用for(consttoolCallofresponse.tool_calls){constfoundTooltools.find(tt.nametoolCall.name);if(foundTool){consttoolResultawaitfoundTool.invoke(toolCall.args);letcontentStr;// 兼容MCP两种返回格式纯字符串 / {text: 内容} 对象if(typeoftoolResultstring){contentStrtoolResult;}elseif(toolResulttoolResult.text){contentStrtoolResult.text;}// 将工具执行结果存入消息队列供下一轮模型推理messages.push(newToolMessage({content:contentStr,tool_call_id:toolCall.id}));}}}// 达到最大迭代次数返回最后一条AI输出returnmessages[messages.length-1].content;}// 实战任务查询北京南站最近3家酒店、生成文档、浏览器分页打开酒店图片并修改标签标题awaitrunAgentWithTools(北京南站附近的酒店最近的 3 个酒店拿到酒店图片打开浏览器每个tab一个url展示并且把页面标题改为酒店名同时将酒店信息、步行/驾车路线保存为本地md文档);// 关闭所有MCP进程连接awaitmcpClient.close();四、实战场景完整执行效果需求拆解调用高德MCP定位北京南站筛选距离最近3家酒店获取坐标、地址、评分、图片链接、步行/驾车路线调用FileSystem MCP自动生成北京南站附近酒店及路线指南.md保存全部数据调用Chrome DevTools MCP新开3个浏览器标签分别加载酒店图片修改每个Tab页面标题为对应酒店名称生成文档核心内容节选北京南站附近酒店及路线指南北京南站| 坐标116.378059, 39.867679| 北京市丰台区 推荐酒店概览序号酒店名称评分步行距离驾车距离1汉庭酒店(北京南站北广场店)⭐4.4约403米约1.2公里2海友酒店(北京南站南广场店)⭐4.4约1.6公里约1.8公里3桔子酒店(北京南站店)⭐4.6约1.5公里约1.6公里酒店路线详情每家酒店单独区块包含完整步行分步指引、驾车路线、商圈信息最后附带综合对比表格与入住推荐建议。浏览器执行动作Agent拿到每家酒店图片URL后自动调用Chrome工具新建独立Tab页跳转图片链接修改页面document.title为酒店全称3个酒店对应3个独立浏览器标签五、开发高频踩坑提醒坑1Chrome MCP启动失败报错无法连接Chrome调试端口解决启动Chrome时开启远程调试端口chrome --remote-debugging-port9222必须先打开带调试端口的浏览器再运行脚本。坑2FileSystem无权限读写文件报错文件夹访问拒绝解决npx参数里的目录路径必须是绝对路径Windows路径分隔符统一用/不要用\。坑3工具调用频繁失效、模型乱输出解决LLM配置temperature:0降低随机度保证工具调用逻辑稳定最大迭代次数建议设置20~30避免多轮工具调用中断。坑4MCP返回数据解析报错部分MCP工具返回对象带text字段部分直接返回纯字符串代码中做了双重兼容不要删除类型判断逻辑。坑5脚本运行结束进程残留代码末尾必须执行await mcpClient.close()否则npx启动的子进程会常驻后台占用端口。六、MCP核心优势总结统一工具标准高德、文件、浏览器三类能力一套客户端管理无需单独写接口适配可复用生态任何人开发MCP Server直接接入项目不用重构Agent逻辑本地/远程双模式高德HTTP远程服务、文件/浏览器本地子进程服务同时兼容Agent自动编排大模型自主判断何时调用地图、何时写文件、何时操控浏览器不用手动拆分任务低维护成本新增工具仅需在mcpServers配置新增节点其余代码完全不用改动
