系列简介从零搭建一个多 Agent AI 助手覆盖原理、实现、部署全链路。不讲空话每篇都有可运行的代码。项目地址https://github.com/CodeMomentYY/LangGraph-Agent本篇目标接入 MCP 工具生态让 Agent 的能力不再受限于手写工具回顾整个系列我们来看看系统全景架构图。前言大家好我是一名前端工程师。都说前端“已死”那与其担心被 AI 替代不如打入敌人内部于是我开始折腾 Agent 开发。折腾下来发现Agent 的核心不是算法而是“工程能力”怎么设计架构、怎么串联服务、怎么把 LLM 的能力落地成产品。这些恰好是我们擅长的事。这个系列记录我从零搭建多 Agent 系统的完整过程。只聊技术知识和设计思路代码交给 AI 写。如果你也想从应用层切入 AI希望这个系列对你有帮助。读完本篇你将学到MCP 是什么为什么 Agent 需要它用 langchain-mcp-adapters 接入语雀 MCP 服务器手写工具 vs MCP 工具什么时候该用哪种从零到完整 Agent 系统的全景回顾背景与动机前几篇我们给 Agent 加了多 Agent 协作、流式输出、记忆能力。但你会发现一个问题Agent 只能访问我们几个手写工具提供的数据。为什么可以查实时天气因为我们写了get_weather。但如果我想让 Agent 帮我查语雀文档、读 GitHub 仓库、获取 Figma 设计稿呢这些数据有两个共同特点在第三方平台上语雀、GitHub、Figma、飞书等这些平台数据都在各自平台的库中需要授权才能访问这些数据不能随意爬取你得有ACCESS TOKEN授权才能读写如果每个平台都手写一个工具函数工作量巨大而且不具备拓展性。MCP 的出现就是为了解决这个问题把“连接授权平台、获取私有数据”这件事标准化让 Agent 通过统一协议就能触达各种平台的数据。核心概念MCP 是什么MCP Model Context Protocol模型上下文协议由 Anthropic 在 2024 年底提出。通过MCP 来访问各个平台上的私有数据究其本质也是用来增强上下文信息的。LLM 的知识截止于训练时间训练的也是一些公开信息它不知道你的语雀文档写了什么、你的 GitHub 仓库有哪些 Issue、你的 Figma 设计稿长什么样。这些数据散落在各个平台而且都需要授权才能访问。MCP 做的事情是定义一套标准协议让 MCP Server 封装好平台的认证和 API 调用逻辑Agent 只需要配一个 Token就能通过统一接口读写这些平台的数据。类比理解MCP 就像 USB 接口标准——键盘、鼠标、U盘都用同一个口你不需要为每个设备单独装驱动。MCP Server 就是“驱动”帮你处理好和平台的对接细节。架构上MCP 采用 Client-Server 模式通信方式支持 stdio本地子进程适合开发和 HTTP SSE远程服务适合生产Agent 工具调度Function Calling说到这里你可能会有个疑问MCP Server 把工具暴露出来了但Agent 怎么知道该调哪个工具答案是Function Calling。回忆一下第 1 篇我们用 Prompt 约定格式Action: get_weather(北京)让 LLM 输出固定文本然后自己解析字符串提取工具名和参数——这其实就是在“模拟” Function Calling。现代 LLMClaude、GPT、DeepSeek 等把这个过程内置了你把工具的名称、描述、参数格式传给 LLM它判断需要调工具时直接返回 JSON 格式的调用指令不需要你自己解析字符串。手写工具 vs MCP 工具我们项目里两种都有什么时候该用哪种手写工具MCP 工具开发成本高写代码 测试低配置即用灵活性完全自定义受限于 MCP Server 提供的能力维护自己维护社区 / 官方维护适合场景定制逻辑、内部 API通用能力文档、数据库、设计稿我的建议通用能力优先找 MCP Server找不到或者需要定制逻辑时再手写。动手实现Step 1安装依赖pipinstalllangchain-mcp-adapterslangchain-mcp-adapters是 LangChain 官方提供的 MCP 适配器能把 MCP 工具自动转成 LangChain Tool 格式无缝接入我们的 Agent。Step 2接入语雀 MCP Server因为之前我写过一个「语雀 MCP」所以这里用语雀 MCP Server 作为示例——接入后 Agent 就能搜索、读取语雀文档。 语雀 MCP 工具接入 通过 langchain-mcp-adapters 连接语雀 MCP 服务器 importasynciofromlangchain_mcp_adapters.clientimportMultiServerMCPClient _mcp_toolsNone# 全局缓存def_load_mcp_tools_sync()-list:加载 MCP 工具asyncdef_load():clientMultiServerMCPClient({yuque:{transport:stdio,command:npx,args:[-y,momentyy/yuque-mcp-server],env:{YUQUE_API_TOKEN:your-token,YUQUE_BASE_URL:https://www.yuque.com/api/v2,},}})returnawaitclient.get_tools()returnasyncio.run(_load())defget_yuque_mcp_tools()-list:获取语雀 MCP 工具列表带缓存global_mcp_toolsif_mcp_toolsisNone:_mcp_tools_load_mcp_tools_sync()return_mcp_tools关键点transport: stdio本地通过子进程启动 MCP Servernpx -y momentyy/yuque-mcp-server直接用 npx 运行不需要全局安装get_tools()返回的就是标准的 LangChain Tool 列表和手写的tool函数格式完全一样Step 3注册到工具列表MCP 工具加载后和手写工具一起注册到 Agent# tools/__init__.pyfromapp.agent.tools.weatherimportget_weatherfromapp.agent.tools.recommendimportrecommend_activityfromapp.agent.tools.web_fetchimportfetch_webpagefromapp.agent.tools.mcp_yuqueimportget_yuque_mcp_tools ALL_TOOLS[get_weather,# 手写工具recommend_activity,# 手写工具fetch_webpage,# 手写工具]get_yuque_mcp_tools()# MCP 工具自动追加就这么简单——MCP 工具和手写工具在 Agent 眼里没有任何区别都是“可调用的函数”。Dispatcher 分流到 tools 路径后LLM 会根据用户问题自动选择调哪个工具。Step 4新增 MCP 工具MCP 的核心价值在于即插即用。假设明天你想让 Agent 能读取 Figma 设计稿不需要写任何业务代码只需要在配置里多加一个 ServerclientMultiServerMCPClient({yuque:{transport:stdio,command:npx,args:[-y,momentyy/yuque-mcp-server],env:{YUQUE_API_TOKEN:...},},# 新增Figma MCP Server一行配置搞定figma:{transport:stdio,command:npx,args:[-y,xx/figma-mcp-server],env:{FIGMA_ACCESS_TOKEN:...},},})加完这几行Agent 就自动获得了 Figma 的能力读取设计稿、获取组件信息、导出切图。不需要改 Agent 代码不需要改路由逻辑不需要改前端——工具层的变化对上层完全透明。这就是“即插即用”的含义MCP 生态里有上千个现成的 Server你想用哪个就配哪个Agent 的能力边界由你决定。Step 5验证效果接入后Agent 自动获得了语雀相关的能力大致流程如下# 读取语雀文档用户读一下这个文档 https://xxx.yuque.com/xxx/xxx/xxxAgent → 调用 yuque_get_doc → 返回文档内容 → 总结回复Web 端验证效果注意我们没有为这些能力写任何业务代码——全部由 MCP Server 提供Agent 只是“调用”。多端交互除了 Web 界面项目里面我还接入了钉钉机器人Stream 模式让 Agent 能在群聊里直接使用。这里就就不展开讲了感兴趣的小伙伴可以自己尝试一下。代码位置https://github.com/CodeMomentYY/LangGraph-Agent/blob/main/server/app/dingtalk_bot.py系列回顾6 篇文章我们从零搭建了一个完整的多 Agent 系统。回顾一下整个系列的内容篇主题核心能力第 1 篇Agent 的本质LLM 工具 循环第 2 篇三种工作模式ReAct、Plan-and-Solve、Reflection第 3 篇多 Agent 协作Dispatcher 专业 Agent 串行/并行第 4 篇全栈产品化落地FastAPI SSE 流式 Vue3 前端第 5 篇上下文记忆能力短期 JSON 长期 ChromaDB RAG第 6 篇Agent 工具生态Agent 工具调度 MCP 接入系统全景架构图刨根问底序号问题1️⃣QMCP 和 Function Calling 有什么区别AFunction Calling 是 LLM 层面的能力——LLM 决定调什么函数、传什么参数。MCP 是工具层面的标准——定义工具怎么暴露、怎么被发现、怎么被调用。两者是互补的LLM 通过 Function Calling 决定调哪个工具MCP 负责把工具标准化地接进来。2️⃣QMCP Server 是怎么运行的Astdio 模式下Agent 启动时会 fork 一个子进程运行 MCP Server比如npx momentyy/yuque-mcp-server通过标准输入输出通信。Server 常驻内存Agent 需要调工具时发请求Server 执行后返回结果。本篇小结MCP 是 AI 工具的标准化协议让工具像 USB 设备一样即插即用langchain-mcp-adapters一行代码把 MCP 工具转成 LangChain Tool无缝接入手写工具适合定制逻辑MCP 适合通用能力两者互补写在最后6 篇文章写完回头看这个系列的核心观点只有一个Agent 开发的门槛不在 AI在工程。LLM 是现成的调 API 就行真正需要你动手的是怎么设计多 Agent 协作架构、怎么做流式输出、怎么管理记忆、怎么接入工具生态、怎么让它在多个端上跑起来。这些全是工程问题而工程能力恰好是我们每天都在练的。如果你跟着这个系列走了一遍你会发现从零搭一个能用的 Agent 系统没有想象中那么难。难的不是某个技术点而是把所有东西串起来的那个过程。希望这个系列对你有帮助。如果有问题或者想法欢迎在评论区交流 。
第 6 篇：Agent 实战系列完结，最后聊聊 MCP
系列简介从零搭建一个多 Agent AI 助手覆盖原理、实现、部署全链路。不讲空话每篇都有可运行的代码。项目地址https://github.com/CodeMomentYY/LangGraph-Agent本篇目标接入 MCP 工具生态让 Agent 的能力不再受限于手写工具回顾整个系列我们来看看系统全景架构图。前言大家好我是一名前端工程师。都说前端“已死”那与其担心被 AI 替代不如打入敌人内部于是我开始折腾 Agent 开发。折腾下来发现Agent 的核心不是算法而是“工程能力”怎么设计架构、怎么串联服务、怎么把 LLM 的能力落地成产品。这些恰好是我们擅长的事。这个系列记录我从零搭建多 Agent 系统的完整过程。只聊技术知识和设计思路代码交给 AI 写。如果你也想从应用层切入 AI希望这个系列对你有帮助。读完本篇你将学到MCP 是什么为什么 Agent 需要它用 langchain-mcp-adapters 接入语雀 MCP 服务器手写工具 vs MCP 工具什么时候该用哪种从零到完整 Agent 系统的全景回顾背景与动机前几篇我们给 Agent 加了多 Agent 协作、流式输出、记忆能力。但你会发现一个问题Agent 只能访问我们几个手写工具提供的数据。为什么可以查实时天气因为我们写了get_weather。但如果我想让 Agent 帮我查语雀文档、读 GitHub 仓库、获取 Figma 设计稿呢这些数据有两个共同特点在第三方平台上语雀、GitHub、Figma、飞书等这些平台数据都在各自平台的库中需要授权才能访问这些数据不能随意爬取你得有ACCESS TOKEN授权才能读写如果每个平台都手写一个工具函数工作量巨大而且不具备拓展性。MCP 的出现就是为了解决这个问题把“连接授权平台、获取私有数据”这件事标准化让 Agent 通过统一协议就能触达各种平台的数据。核心概念MCP 是什么MCP Model Context Protocol模型上下文协议由 Anthropic 在 2024 年底提出。通过MCP 来访问各个平台上的私有数据究其本质也是用来增强上下文信息的。LLM 的知识截止于训练时间训练的也是一些公开信息它不知道你的语雀文档写了什么、你的 GitHub 仓库有哪些 Issue、你的 Figma 设计稿长什么样。这些数据散落在各个平台而且都需要授权才能访问。MCP 做的事情是定义一套标准协议让 MCP Server 封装好平台的认证和 API 调用逻辑Agent 只需要配一个 Token就能通过统一接口读写这些平台的数据。类比理解MCP 就像 USB 接口标准——键盘、鼠标、U盘都用同一个口你不需要为每个设备单独装驱动。MCP Server 就是“驱动”帮你处理好和平台的对接细节。架构上MCP 采用 Client-Server 模式通信方式支持 stdio本地子进程适合开发和 HTTP SSE远程服务适合生产Agent 工具调度Function Calling说到这里你可能会有个疑问MCP Server 把工具暴露出来了但Agent 怎么知道该调哪个工具答案是Function Calling。回忆一下第 1 篇我们用 Prompt 约定格式Action: get_weather(北京)让 LLM 输出固定文本然后自己解析字符串提取工具名和参数——这其实就是在“模拟” Function Calling。现代 LLMClaude、GPT、DeepSeek 等把这个过程内置了你把工具的名称、描述、参数格式传给 LLM它判断需要调工具时直接返回 JSON 格式的调用指令不需要你自己解析字符串。手写工具 vs MCP 工具我们项目里两种都有什么时候该用哪种手写工具MCP 工具开发成本高写代码 测试低配置即用灵活性完全自定义受限于 MCP Server 提供的能力维护自己维护社区 / 官方维护适合场景定制逻辑、内部 API通用能力文档、数据库、设计稿我的建议通用能力优先找 MCP Server找不到或者需要定制逻辑时再手写。动手实现Step 1安装依赖pipinstalllangchain-mcp-adapterslangchain-mcp-adapters是 LangChain 官方提供的 MCP 适配器能把 MCP 工具自动转成 LangChain Tool 格式无缝接入我们的 Agent。Step 2接入语雀 MCP Server因为之前我写过一个「语雀 MCP」所以这里用语雀 MCP Server 作为示例——接入后 Agent 就能搜索、读取语雀文档。 语雀 MCP 工具接入 通过 langchain-mcp-adapters 连接语雀 MCP 服务器 importasynciofromlangchain_mcp_adapters.clientimportMultiServerMCPClient _mcp_toolsNone# 全局缓存def_load_mcp_tools_sync()-list:加载 MCP 工具asyncdef_load():clientMultiServerMCPClient({yuque:{transport:stdio,command:npx,args:[-y,momentyy/yuque-mcp-server],env:{YUQUE_API_TOKEN:your-token,YUQUE_BASE_URL:https://www.yuque.com/api/v2,},}})returnawaitclient.get_tools()returnasyncio.run(_load())defget_yuque_mcp_tools()-list:获取语雀 MCP 工具列表带缓存global_mcp_toolsif_mcp_toolsisNone:_mcp_tools_load_mcp_tools_sync()return_mcp_tools关键点transport: stdio本地通过子进程启动 MCP Servernpx -y momentyy/yuque-mcp-server直接用 npx 运行不需要全局安装get_tools()返回的就是标准的 LangChain Tool 列表和手写的tool函数格式完全一样Step 3注册到工具列表MCP 工具加载后和手写工具一起注册到 Agent# tools/__init__.pyfromapp.agent.tools.weatherimportget_weatherfromapp.agent.tools.recommendimportrecommend_activityfromapp.agent.tools.web_fetchimportfetch_webpagefromapp.agent.tools.mcp_yuqueimportget_yuque_mcp_tools ALL_TOOLS[get_weather,# 手写工具recommend_activity,# 手写工具fetch_webpage,# 手写工具]get_yuque_mcp_tools()# MCP 工具自动追加就这么简单——MCP 工具和手写工具在 Agent 眼里没有任何区别都是“可调用的函数”。Dispatcher 分流到 tools 路径后LLM 会根据用户问题自动选择调哪个工具。Step 4新增 MCP 工具MCP 的核心价值在于即插即用。假设明天你想让 Agent 能读取 Figma 设计稿不需要写任何业务代码只需要在配置里多加一个 ServerclientMultiServerMCPClient({yuque:{transport:stdio,command:npx,args:[-y,momentyy/yuque-mcp-server],env:{YUQUE_API_TOKEN:...},},# 新增Figma MCP Server一行配置搞定figma:{transport:stdio,command:npx,args:[-y,xx/figma-mcp-server],env:{FIGMA_ACCESS_TOKEN:...},},})加完这几行Agent 就自动获得了 Figma 的能力读取设计稿、获取组件信息、导出切图。不需要改 Agent 代码不需要改路由逻辑不需要改前端——工具层的变化对上层完全透明。这就是“即插即用”的含义MCP 生态里有上千个现成的 Server你想用哪个就配哪个Agent 的能力边界由你决定。Step 5验证效果接入后Agent 自动获得了语雀相关的能力大致流程如下# 读取语雀文档用户读一下这个文档 https://xxx.yuque.com/xxx/xxx/xxxAgent → 调用 yuque_get_doc → 返回文档内容 → 总结回复Web 端验证效果注意我们没有为这些能力写任何业务代码——全部由 MCP Server 提供Agent 只是“调用”。多端交互除了 Web 界面项目里面我还接入了钉钉机器人Stream 模式让 Agent 能在群聊里直接使用。这里就就不展开讲了感兴趣的小伙伴可以自己尝试一下。代码位置https://github.com/CodeMomentYY/LangGraph-Agent/blob/main/server/app/dingtalk_bot.py系列回顾6 篇文章我们从零搭建了一个完整的多 Agent 系统。回顾一下整个系列的内容篇主题核心能力第 1 篇Agent 的本质LLM 工具 循环第 2 篇三种工作模式ReAct、Plan-and-Solve、Reflection第 3 篇多 Agent 协作Dispatcher 专业 Agent 串行/并行第 4 篇全栈产品化落地FastAPI SSE 流式 Vue3 前端第 5 篇上下文记忆能力短期 JSON 长期 ChromaDB RAG第 6 篇Agent 工具生态Agent 工具调度 MCP 接入系统全景架构图刨根问底序号问题1️⃣QMCP 和 Function Calling 有什么区别AFunction Calling 是 LLM 层面的能力——LLM 决定调什么函数、传什么参数。MCP 是工具层面的标准——定义工具怎么暴露、怎么被发现、怎么被调用。两者是互补的LLM 通过 Function Calling 决定调哪个工具MCP 负责把工具标准化地接进来。2️⃣QMCP Server 是怎么运行的Astdio 模式下Agent 启动时会 fork 一个子进程运行 MCP Server比如npx momentyy/yuque-mcp-server通过标准输入输出通信。Server 常驻内存Agent 需要调工具时发请求Server 执行后返回结果。本篇小结MCP 是 AI 工具的标准化协议让工具像 USB 设备一样即插即用langchain-mcp-adapters一行代码把 MCP 工具转成 LangChain Tool无缝接入手写工具适合定制逻辑MCP 适合通用能力两者互补写在最后6 篇文章写完回头看这个系列的核心观点只有一个Agent 开发的门槛不在 AI在工程。LLM 是现成的调 API 就行真正需要你动手的是怎么设计多 Agent 协作架构、怎么做流式输出、怎么管理记忆、怎么接入工具生态、怎么让它在多个端上跑起来。这些全是工程问题而工程能力恰好是我们每天都在练的。如果你跟着这个系列走了一遍你会发现从零搭一个能用的 Agent 系统没有想象中那么难。难的不是某个技术点而是把所有东西串起来的那个过程。希望这个系列对你有帮助。如果有问题或者想法欢迎在评论区交流 。
