手把手带你搭建一个MCP客户端,小白也能学会

你有没有想过大模型是如何调用MCP服务的?MCP和Function call的区别在哪?

今天来一起搭建一个带MCP调用的应用程序,让你更好的理解MCP和大模型的交互原理。

环境准备:

用Node + typescript开发

MCP使用官方的SDK: @modelcontextprotocol/sdk

模型:使用本地部署的ollama+qwen3:8B模型

MCP Server使用本的搭建的一个node mcp server(一个node文件)

搭建完成之后,你可以获得一个可以调用MCP的服务的AI程序。

1. 先说说MCP 架构

MCP是一种:客户端-宿主-服务器 的架构模式。

宿主: 一个AI应用程序。作为客户端的载体,用来启动和管理MCP客户端。

客户端:宿主创建,用来和MCP Server建立连接。

服务器 : 提供工具、资源、提示词等,目前主要都是提供工具调用。

今天做的事情,其实是搭建一个宿主环境,用来创建和管理客户端,执行工具调用能。

2. 客户端与 LLM 交互流程(以工具调用为例)

  1. MCP客户端和MCP服务建立连接。

  2. 获取可用工具列表: 包括工具名称、描述、参数等。

  3. 用户提问: 当用户提问时,将消息和工具描述发送给 LLM,由LLM决定是否需要使用工具。

  4. LLM 决定工具执行:LLM判断需要调用哪些工具,返回一个需要调用的工具列表(包含工具名和参数)

  5. 客户端执行工具调用:应用程序使用MCP服务执行工具调用。

  6. 工具结果返回给 LLM:工具执行完后,将结果返回给客户端。

  7. LLM 生成最终响应:LLM 接收到工具执行结果后,将结果和之前的对话上下文,生成最终响应。

  8. 返回结果。

3. 代码解读

第一步:启动MCP客户端

新建一个Client,然后和MCP服务关联。如果需要同时连接多个MCP服务,可以新建多个Client。

演示的时候,我们只启动一个。

第二步:获取可用工具

可以看到,就是用类似接口调用的方式,从服务上获取工具列表。

这样的极大的方便服务的开发者,增加对tools的管理和控制。

第三步:根据用户提问,调用工具

用户提问后,调用时,需要把tools一起传递给大模型,提示词可写可不写,一般支持工具调用的模型,会自动处理。

提示词案例如下:

大模型返回的信息,如果包含tool_calls,就是需要调用的工具。

tool_calls时一个多工具集合。

第四步:执行工具调用

对于工具的执行,可以一个循环并列调用,对于有依赖关系的,也可以串行调用,这一部分需要自己设计。

执行调用的时候,依旧使用client处理,调用tools/call,让服务执行,返回执行结果。

第五步:返回最终结果

这一步,需要把工具执行结果和相关信息,输入给大模型,再次加工,形成最终的回答。

源码地址:github.com/chenyk2016/...

总结

从这个过程中可以看到,MCP的调用和funtion call没有区别,都是让大模型判断需要使用工具,执行调用。

只是MCP协议的出现,让服务的开发,和服务的调用更加方面,MCP帮我们处理连接、调用。让MCP更加容易管理和使用。

其中工具怎么执行,并行、串行、TODO执行等智能方面的设计,还是需要开发者根据业务进行处理。

相关推荐
欢乐小v16 分钟前
elementui-admin构建
前端·javascript·elementui
霸道流氓气质43 分钟前
Vue中使用vue-3d-model实现加载3D模型预览展示
前端·javascript·vue.js
溜达溜达就好1 小时前
ubuntu22 npm install electron --save-dev 失败
前端·electron·npm
慧一居士1 小时前
Axios 完整功能介绍和完整示例演示
前端
晨岳1 小时前
web开发-CSS/JS
前端·javascript·css
22:30Plane-Moon1 小时前
前端之CSS
前端·css
半生过往1 小时前
前端上传 pdf 文件 ,前端自己解析出来 生成界面 然后支持编辑
前端·pdf
晨岳1 小时前
web开发基础(CSS)
前端·css
.又是新的一天.1 小时前
前端-CSS (样式引入、选择器)
前端·css