MCP实操系列 | 20行JS代码秒速上手MCP服务开发（附源码）

关注

原创 2025-06-25 11:04:04 1k 阅读 AI 写同款· GEO 优化 ›

【MCP Node.js SDK 全栈进阶指南】中级篇（5）：MCP客户端高级开发在前面的系列文章中，我们主要关注了服务器端的开发，包括基础服务器构建、资源设计、身份验证与授权以及错误处理与日志系统。本篇文章将转向客户端，探讨MCP TypeScript-SDK在客户端开发中的高级应用。客户端开发是MCP应用的重要组成部分，它连接了用户与服务器，提供了交互界面和功能入口。一个设计良好的客户端不仅能提供流畅的用户体验，还能确保与服务器的高效通信和数据处理。在本文中，我们将深入探讨MCP客户端API的高级用法、自定义客户端封装、跨平台客户端设计以及客户端性能优化等关键主题。MCP TypeS 阅读详情

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

前言

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

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

本文主要包含四部分

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

一张图理解MCP架构

MCP架构分为三部分：host（主机）、client（客户端）、server（服务端）。其中 server 可分为两种local server（本地服务） 和 remote server（远程服务） 。

MCP架构图

两步接入使用MCP

1. 下载&安装

# 克隆本MCP教程项目代码
git clone git@gitee.com:changelink/mcp-so-easy.git
# 进入项目目录
cd mcp-so-easy
# 安装依赖
npm install

2. 客户端配置

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

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

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

3. 调用体验：

提问： 88加22等于多少

调用成功

开发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"),
  }),
  execute: async (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"),
  }),
  execute: async (args) => {
    // 执行减法计算
    return String(args.a - args.b);
  },
});
/** 后面的代码不动 end **/

2. 调试代码

# 普通调试
node server/server-simple.js
# 使用官方 MCP Inspector 工具调试命令
npx @modelcontextprotocol/inspector node server/server-simple.js --stdio

浏览器访问http://127.0.0.1:6274/打开调试界面如下图：

MCP Inspector 工具调试界面

3. 到客户端刷新MCP服务

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

刷新MCP服务

4.调用测试

提问：999加8等于多少

成功调用了减法计算器

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

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

1. 修改启动参数

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

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

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

2. 启动远程MCP服务

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

# 这里使用项目中已经准备好的远程MCP服务文件：server/server-remote.js
node server/server-remote.js

3. 客户端配置

# 此配置复制粘贴到 mcpServers 对象中
"remote-calculator": {
  "url": "http://localhost:8080/sse"
}

远程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官方文档: https://mcp-docs.cn/introduction
[2] FastMCP官方文档: https://github.com/punkpeye/fastmcp
[3] 本MCP教程项目代码gitee地址: https://gitee.com/changelink/mcp-so-easy