实践是最好的学习,看了很多MCP的文章,还是不懂MCP干啥的,不清楚原理,不如自己搭一个,半小时,彻底掌握MCP。
今天教大家来用typescript搭建一个简单的 MCP 服务,纯粹用于演示功能。
这个案例不解决任何实际问题,只为直观地展示MCP的资源 (Resources) 、工具 (Tools) 和 提示 (Prompts) 这三个核心概念。
实现下面几个功能:
一个资源:用于查询服务器的运行状态(假的)。
两个工具:一个用于回显消息,另一个用于执行简单的数学计算。
一个提示:用于引导LLM生成口号。
一、项目搭建
1、项目设置 package.json
{ "name": "simple-mcp-demo-server", "version": "1.0.0", "type": "module", "scripts": { "build": "tsc", "start": "node --experimental-specifier-resolution=node build/index.js" }, "dependencies": { "@modelcontextprotocol/sdk": "^1.12.1", "zod": "^3.25.53" }, "devDependencies": { "@types/node": "^20.17.58", "typescript": "^5.8.3" }}
2、 TypeScript 配置 tsconfig.json
{ "compilerOptions": { "target": "ES2022", "module": "Node16", "moduleResolution": "Node16", "outDir": "./build", "rootDir": "./src", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": ["src/**/*"], "exclude": ["node_modules"]}
3、核心代码 (src/index.ts)
import { McpServer, ResourceTemplate } from "@modelcontextprotocol/sdk/server/mcp.js";import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";import { z } from "zod"; // 用于定义工具和提示的输入验证schema// 1. 创建MCP服务器实例// McpServer 是您与MCP协议的核心接口。const server = new McpServer({ name: "Demo互动服务器", // 服务器的名称 version: "1.0.0", // 服务器的版本 capabilities: { // 声明服务器支持的能力,使客户端可以发现这些功能 resources: {}, tools: {}, prompts: {}, },});// 2. 暴露一个只读的“资源 (Resource)”// 资源用于向大型语言模型(LLM)暴露数据和内容,类似于Web API中的GET请求。// 它们不应执行显著的计算或产生副作用。server.resource( "status", // 资源的内部名称 "resource://status/server", // 资源的URI模板,这是一个固定URI,表示服务器状态 async (uri) => { // 当客户端请求此资源时,返回预设的服务器状态信息。 return { contents: [ { uri: uri.href, text: "服务器运行正常,无已知错误。自上次启动以来已处理 100 次请求。", mimeType: "text/plain" }, ], }; });console.error("已注册资源: resource://status/server"); // 使用console.error进行日志输出,避免干扰stdio传输// 3. 提供两个“工具 (Tool)”// 工具允许LLM通过服务器执行操作,预期会执行计算并产生副作用。// 工具调用通常需要用户的批准。// 工具 A: 消息回显器server.tool( "echo_message", // 工具的内部名称 "回显您输入的任何消息", // 对人类友好的描述 { // 输入参数的Zod schema,Zod是一个用于schema验证的库。 message: z.string().describe("要回显的文本消息"), // 消息内容 }, async ({ message }) => { // 工具的执行逻辑 return { content: [ { type: "text", text: `你说了:${message}`, // 返回原样消息,前面加上“你说了:” }, ], }; });console.error("已注册工具: echo_message");// 工具 B: 简单数字计算器server.tool( "simple_calculation", // 工具的内部名称 "执行两个数字之间的简单加减乘除运算", // 对人类友好的描述 { a: z.number().describe("第一个数字"), b: z.number().describe("第二个数字"), operator: z.enum(["+", "-", "*", "/"]).describe("要执行的运算(+, -, *, /)"), }, async ({ a, b, operator }) => { let result: number | string; try { switch (operator) { case "+": result = a + b; break; case "-": result = a - b; break; case "*": result = a * b; break; case "/": if (b === 0) { return { // 如果除数为零,返回错误信息 content: [{ type: "text", text: "错误:除数不能为零。" }], isError: true, // 标记为错误结果 }; } result = a / b; break; default: return { content: [{ type: "text", text: "错误:不支持的运算符。" }], isError: true, }; } return { content: [ { type: "text", text: `结果:${result}`, // 返回计算结果 }, ], }; } catch (error: any) { return { content: [{ type: "text", text: `执行计算时发生错误: ${error.message}` }], isError: true, }; } });console.error("已注册工具: simple_calculation");// 4. 定义一个“提示 (Prompt)”// 提示是可重用的模板,旨在帮助LLM与服务器有效互动,通常由用户控制,以UI元素(如斜杠命令)的形式呈现。server.prompt( "generate_slogan", // 提示的内部名称 "为给定主题生成一句口号", // 对人类友好的描述 { theme: z.string().describe("口号的主题,例如“环保”或“创新”"), }, ({ theme }) => { // 返回一个消息数组,指导LLM如何生成口号 return { messages: [ { role: "user", // 消息角色,这里模拟用户对LLM的请求 content: { type: "text", text: `请为“${theme}”主题生成一句有创意且吸引人的口号。要求口号简短有力,易于传播。`, }, }, ], }; });console.error("已注册提示: generate_slogan");// 5. 启动服务器并连接到Stdio传输// Stdio传输通过标准输入/输出来通信,适用于本地进程和命令行工具。async function main() { const transport = new StdioServerTransport(); await server.connect(transport); console.error("MCP演示服务器已成功启动,并监听Stdio传输。"); // 使用console.error避免干扰Stdio通信}// 捕获可能发生的致命错误main().catch((error) => { console.error("服务器启动时发生致命错误:", error); process.exit(1); // 以非零退出码表示错误});
4、运行:
- 保存文件:
将上述 package.json
和 tsconfig.json
保存到您的项目根目录。
在项目根目录下创建 src
文件夹,并将 src/index.ts
文件保存到其中。
- 安装依赖:
打开终端或,导航到项目根目录,然后运行:
⚠️node版本用最新的24
npm install
3. 编译 TypeScript 代码:
npm run build
这将在 build
文件夹中生成 index.js
文件。
- 运行服务器:
npm start
服务器将启动,并打印启动日志
二、测试
使用 npx @modelcontextprotocol/inspector
来测试这个服务器,这是一个用于测试MCP服务器的工具。
在另一个终端中,运行:
npx @modelcontextprotocol/inspector node --experimental-specifier-resolution=node build/index.js
等待服务器启动
用浏览器打开http://127.0.0.1:6274
然后点击connect连接到我们的MCP服务
左下角显示MCP服务的日志:
顶部功能区,可以用来测试每个功能。
还记得我们实现的几个功能吗?切换按钮,就可以看到我们的服务提供哪些功能。
Resources资源
资源用于向大模型暴露数据,一般不执行计算和任务。
我们写一个显示服务器运行状态的资源,点击Stats,可以看到右侧返回了服务器状态。
3、 Prompts提示词
提示词是可复用的模板,帮用户快速生成提示词。
例如我们输入“紧跟时代步伐”,就会输出我们设定的提示词模板。
4、Tools工具
工具允许LLM通过服务器执行操作,帮助运行任务。
5、输出MCP配置
点击Server Entry 就会复制配置
复制出来的配置长这样:
包含命令,参数,环境变量等。我们主要用到的是命令和参数。
三、如何在Cursor中配置MCP
添加MCP
打开Cursor Setting
点击添加MCP server
起个名称叫“mcp-demo”,将下面的配置复制进去
注意build/index.js要换成完整的文件路径,可以参考我的,但是要换成你自己的。
"mcp-demo": { "command": "node", "args": [ "--experimental-specifier-resolution=node", "***/build/index.js" ]}
2、启动
添加完成之后,可以看到,服务器亮起小绿点。就说明成功了。
不过cursor只支持工具,其他两个MCP功能不支持。
3、使用
直接在cursor的对话框说:使用simple_calculation计算1+2
之后会有一个Run tools的提示,点击运行就会调用MCP工具。
就这样,下课。
如果对你有帮助,别忘了一键三连🐶