【TypeScript】三分钟让 Trae、Cursor 用上你自己的 MCP

前言

MCP (Model Context Protocol，模型上下文协议)是一种标准化的通信框架，用于大型语言模型(LLM)与外部数据源、API和工具之间的交互。这一协议解决了LLM固有的知识时效性限制问题 - 即模型只能基于训练数据回答问题，无法获取训练截止日期后的实时信息(如今日天气、最新新闻)或执行特定功能(如计算、搜索)。

简单来说，我们可以把 MCP 之于 LLM 想象为扩展插件之于 VSCode，在核心功能外，给它提供更多自定义功能。

接下来我们就来写个 MCP 的 "扩展程序"。

modelcontextprotocol

要实现 MCP Server 需要依赖一个开源库 modelcontextprotocol/typescript-sdk

@modelcontextprotocol/typescript-sdk 是 MCP 协议的官方 TypeScript 实现，为开发者提供了在 Node.js 和浏览器环境中构建 MCP 客户端和服务端的完整工具集。

首先安装依赖，需要 Node 版本大于等于 Node.js v18.x。

bash 复制代码

npm install @modelcontextprotocol/sdk

接下来我们来看官方提供的例子实现一个最基础的 MCP Server，我添加了一些注释来方便理解。

ts 复制代码

// server.ts
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'; // 导入MCP服务器核心组件
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'; // 导入标准输入输出传输层
import { z } from 'zod'; // 导入Zod库，用于输入验证和类型定义

// 创建一个MCP服务器实例
const server = new McpServer({
  name: 'cookie-mcp-server', // 服务器名称
  version: '1.0.0', // 服务器版本
});

// 注册一个加法工具
server.registerTool(
  'cookie-add', // 工具的唯一标识符
  {
    title: 'Addition Tool', // 工具的显示名称
    description: 'Add two numbers', // 工具的描述信息
    inputSchema: { a: z.number(), b: z.number() }, // 定义输入参数的结构和类型：两个数字a和b
  },
  // 工具的实现函数，接收输入参数并返回结果
  async ({ a, b }) => ({
    content: [{ type: 'text', text: String(a + b) }], // 返回a+b的结果作为文本内容
  })
);

// 创建标准输入输出传输层实例
const transport = new StdioServerTransport();

// 连接服务器到传输层，开始接收stdin的消息并通过stdout发送响应
// 这使得MCP服务器可以与语言模型进行通信
await server.connect(transport);
console.log("MCP server is running. Waiting for client connection...");

接下来我们修改 package.json 并进行依赖安装

json 复制代码

{
  "name": "cookie-mcp-server",
  "version": "1.0.0",
  "type": "module",
  "main": "dist/server.js",
  "scripts": {
    "build": "tsc",
    "start": "node dist/server.js",
    "dev": "tsc && node dist/server.js"
  },
  "author": "cookie",
  "dependencies": {
    "@modelcontextprotocol/sdk": "^1.17.0",
    "zod": "^3.25.76"
  },
  "devDependencies": {
    "@types/node": "^20.0.0",
    "typescript": "^5.9.2"
  }
}

现在我们通过 npm run dev 就可以启动我们的 MCP Server。接下来我们来让 Cursor 或 Trea 使用我们的 MCP。

配置 MCP

Cursor

Cursor - 首选项 - Cursor Settings - MCP - "Add new global MCP Server"

然后在配置 JSON 中添加我们的 MCP，在 args 中配置 server.js 的地址。

json 复制代码

{
  "mcpServers": {
    "cookie-mcp-server": {
      "command": "node",
      "args": ["/{你的项目地址}/dist/server.js"]
    }
  }
}

最后我们在 Chat 中调用我们的 MCP 可以看到 "Called MCP tool" 我们的 MCP 被成功调用了。

Trae

Trae - 设置 - MCP - 添加 - 手动添加

然后输入一样的 JSON 配置

json 复制代码

{
  "mcpServers": {
    "cookie-mcp-server": {
      "command": "node",
      "args": ["/{你的项目地址}/dist/server.js"]
    }
  }
}

接下来在使用 Chat 时选择 Builder with MCP

可以看到，在 Trae 中我们的 MCP 也被成功调用了。

调试我们的 MCP

modelcontextprotocol/inspector 是 Model Context Protocol (MCP) 生态系统中的一个开发工具，主要用于调试、测试和检查 MCP 服务器及其功能。我们可以用它来调试我们刚才实现的 MCP。

我们用下面的命令来执行 modelcontextprotocol/inspector：

bash 复制代码

npx @modelcontextprotocol/inspector node dist/server.js

可以看到输出中看到 inspector 的网址

打开后点击连接，即可连接到我们的 MCP Server。

在这里可以验证我们的 MCP Tools