MCP实操系列 | 20行JS代码搞定MCP服务开发(附源码)

667 阅读5分钟

我是一个普普通通的封面图

我是一个普普通通的封面图

前言

MCP协议出来已经有一阵子了,网络上也已经有不少关于学习MCP的文章,大多偏理论概念,实操部分较少或不易上手。还没遇到一篇对初学者足够简单上手开发的,所以试着通过几个由浅入深完整代码示例写一个尽量简单易上手的MCP实操系列教程,希望对大家有帮助。

Note:
本文旨在让读者快速上手开发自己的MCP服务。有关MCP的更详细的内容可直接访问MCP官方文档[1]

本文主要包含四部分

1.一张图理解MCP架构。
2.两步接入使用MCP服务。
3.20行JS代码搞定MCP服务开发。
4.四行代码修改实现远程MCP服务。

一张图理解MCP架构

MCP架构分为三部分:host(主机)client(客户端)server(服务端)。其中 server 可分为两种local server(本地服务)remote server(远程服务)

MCP架构图

MCP架构图

两步接入使用MCP

1. 下载&安装
# 克隆本MCP教程项目代码
git clone git@gitee.com:changelink/mcp-so-easy.git
# 进入项目目录
cd mcp-so-easy
# 安装依赖
npm install
2. 客户端配置

以流行的VScode插件cline中的配置为例

以流行的VScode插件cline中的配置为例

# 此配置复制粘贴到 mcpServers 对象中,如上图
# Windows 用户请将"args"中的"/"替换为"\\"
"calculator": {
    "command": "node",
    "args": ["/<替换为你的文件目录>/mcp-so-easy/server/server-simple.js"]
}    

详细可参考下载的代码中的README.md文件。

3. 调用体验:

提问: 88加22等于多少

调用成功

调用成功

20行JS代码搞定MCP服务开发

1. 编写代码

你可以以项目中的server/server-simple.js文件作为模版来开发你自己的MCP服务。

// 引入 FastMCP 和 zod
import { FastMCP } from "fastmcp"// 用于创建 MCP 服务器的库
import { z } from "zod"// 用于参数校验
// 创建一个 MCP 服务器实例
const server = new FastMCP({
  name"calculator",
  version"1.0.0",
});
// 添加一个工具,处理加法计算
server.addTool({
  name"addition",
  description"对两个数字做求和计算,遇到提供两个数字求相加结果的问题优先使用本工具解决",
  parameters: z.object({
    a: z.number().describe("第一个数字,例如 5"),
    b: z.number().describe("第二个数字,例如 3.2"),
  }),
  executeasync (args) => {
    // 执行加法计算
    return String(args.a + args.b);
  },
});
// 启动服务
server.start({
  transportType"stdio",
});

上述就是一个MCP服务的完整代码了。20行极简代码无typescript配置原生nodejs直接运行

Note:
本MCP教程项目代码中所使用的FastMCP是基于MCP官方SDK封装的、更简洁易用的MCP服务端构建库,更详细的信息请访问FastMCP官方文档[2]

在上述代码中添加减法工具代码如下:

/** 在加法计算工具代码后添加以下代码 start  **/
// 再添加一个工具,处理减法计算
server.addTool({
  name"subtraction",
  description"计算两个数字的差值,遇到提供两个数字求相减结果的问题优先使用本工具解决",
  parameters: z.object({
    a: z.number().describe("第一个数字,例如 5"),
    b: z.number().describe("第二个数字,例如 3.2"),
  }),
  executeasync (args) => {
    // 执行减法计算
    return String(args.a - args.b);
  },
});
/** 后面的代码不动 end **/ 
2. 调试代码
# Windows 用户请将 server/server-simple.js 中的"/"替换为"\"
# 普通调试
node server/server-simple.js
# 使用官方 MCP Inspector 工具调试命令
npx @modelcontextprotocol/inspector node server/server-simple.js --stdio

点击访问上述命令行中的提示中如下形式的链接: http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=1aa8424afc42f7ab88ab3fef85f26924e2359bbce5a849ba1a36a3196ab944bb MCP Inspector 工具调试界面

MCP Inspector 工具调试界面

3. 到客户端刷新MCP服务

如下图所示步骤操作:点击刷新按钮再点击工具展开,可以看到工具列表中已经增加了subtraction(减法计算工具)。

刷新MCP服务

刷新MCP服务

4.调用测试

提问: 999加8等于多少

成功调用了减法计算器

成功调用了减法计算器

这就算是完成了一个MCP服务小工具的开发啦,很简单吧(* ̄︶ ̄)

四行代码修改实现远程MCP服务

1. 修改启动参数

通过修改server.start 方法中的参数来实现远程服务。代码如下:

// 启动远程服务
server.start({
  transportType"httpStream",
  httpStream: {
    port8080,
  },
});

可参考server/server-remote.js文件中的代码。

2. 启动远程MCP服务

项目根目录下输入以下命令启动远程MCP服务:

# 这里使用项目中已经准备好的远程MCP服务文件:server/server-remote.js
# Windows 用户请将"/"替换为"\"
node server/server-remote.js
3. 客户端配置
# 此配置复制粘贴到 mcpServers 对象中
"remote-calculator": {
  "url": "http://localhost:8080/sse"
}

远程MCP服务成功配置状态

远程MCP服务成功配置状态

调用测试这里就不重复了,可以自行验证。

4. 部署上云

以上操作部署到云服务器(对外开放对应的端口:如8080)或者部署到云函数就可把你的MCP服务共享给其他人使用了。(关于如何上云,购买服务器之类的问题,这里就不展开讲了,网上已经有很多成熟的教程)

多工具MCP服务体验:

本MCP教程项目代码中我还准备了一个包含多个实用工具的MCP服务代码文件:server/server-multi-tools.js。有兴趣的话可以根据上述教程调用,修改里面的代码调试一下,希望可以加深你对MCP服务开发的理解!

结语

希望大家通过本文可以快速开发出自己的MCP服务,也可以把自己的MCP服务项目分享到社区,让AI应用的生态更加繁荣,让世界更好玩(* ̄︶ ̄)!

Note:
下一篇就要开始讲MCP客户端啦,我会继续由浅入深地带大家一步一步开发一个的支持MCP的客户端程序。感兴趣的同学可以提前预习一下本MCP教程项目代码中的client目录中的代码。本MCP教程项目代码gitee地址[3]

如对文中内容有疑问题,欢迎留言。如对您有帮助,可一键三连+投币Thanks♪(・ω・)ノ!

引用链接

[1] MCP官方文档: mcp-docs.cn/introductio…
[2] FastMCP官方文档: github.com/punkpeye/fa…
[3] 本MCP教程项目代码gitee地址: gitee.com/changelink/…