手把手带你搭建一个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执行等智能方面的设计,还是需要开发者根据业务进行处理。

相关推荐
kyriewen1 小时前
我扒了 GPT-5.6 的全部编程跑分——有一项 OpenAI 没敢放出来
前端·gpt·ai编程
前端H2 小时前
微前端 v3 架构升级:从加载隔离到状态协同
前端·架构·状态模式
陆枫Larry3 小时前
小程序包体积优化:用 SVG 图片替换 iconfont,并保留 CSS 控色能力
前端
环境栈笔记4 小时前
多账号浏览器选型检查清单:Profile、权限、Session 和任务日志怎么评估
前端·人工智能·后端·自动化
前端炒粉4 小时前
手写promise
java·前端·javascript
LaughingZhu4 小时前
智能体经典范式构建:ReAct、Plan-and-Solve 与 Reflection
前端·react.js·前端框架
jsonbro5 小时前
手把手带你实现发布订阅模式
前端·vue.js·设计模式
一只猫的梦5 小时前
自动化模块 (Automation Module)
前端·chrome
熊猫钓鱼>_>5 小时前
Electron:当 Web 技术统治桌面
大数据·前端·javascript·人工智能·架构·electron·agent
德福危险5 小时前
从盲打xss到到模板注入:unix靶机渗透之Tempus_fugit4
前端·unix·xss