用 TypeScript 在 10 分钟内构建你的第一个 MCP 服务器

手把手教你用 TypeScript 10 分钟搭建首个 MCP 服务器,支持对接 Claude Desktop、Zed 等主流主机;涵盖项目初始化、SDK 集成、工具定义与调试全流程,让 AI 智能体轻松连接数据库、API 等数据源。

发布于2025年3月25日 02:39
编辑零重力瓦力
评论0
阅读371

MCP(Model Context Protocol,模型上下文协议)是一个开源协议,专门用于 连接智能体(AI Agent)与数据,它最初由 Anthropic 提出,目前已被许多科技公司采用。技术达人 Roy Derks 通过这个教程,将指导你如何使用 TypeScript 搭建你的第一个 MCP 服务器。完成后,你将能够构建并连接工具到 MCP 主机,例如 Claude Desktop。

什么是 MCP?

MCP(模型上下文协议,Model Context Protocol) 是一个让智能体轻松连接各种工具的协议。它主要由三个核心组件组成:

1. MCP 服务器(MCP Servers)

充当 桥梁,用于连接 API、数据库或代码,并将这些数据源公开为工具。可使用 Python 或 TypeScript SDK 构建。

2. MCP 客户端(MCP Clients)

这些客户端使用 MCP 协议来与 MCP 服务器通信。也可以使用 Python 或 TypeScript SDK 进行开发。

3. MCP 主机(MCP Hosts)

在服务器和客户端之间进行数据交换,确保通信顺畅。目前流行的 MCP 主机包括 Claude Desktop、Zed 和 Sourcegraph Cody。

什么是 MCP

MCP 服务器的作用

MCP 服务器能够提供各种工具,任何 MCP 主机都可以访问它们。这意味着开发者可以快速将智能体连接到各种新的工具,而无需编写自定义集成代码。

如何搭建 MCP 服务器?

以下是使用 TypeScript SDK 来构建 MCP 服务器,并使用 Claude Desktop 作为测试主机的完整示例。

步骤 1:安装依赖

首先,创建一个新项目,并初始化 npm 包。然后,安装 MCP 服务器所需的依赖项,并配置 package.json 和 tsconfig.json。

创建项目文件夹

mkdir mcp-server
cd mcp-server

创建 package.json

在 mcp-server 目录下,新建 package.json,内容如下:

{
  "name": "mcp-server",
  "version": "0.1.0",
  "description": "Model Context Protocol 服务器示例",
  "private": true,
  "type": "module",
  "bin": {
    "mcp-server": "./build/index.js"
  },
  "files": [
    "build"
  ],
  "scripts": {
    "build": "tsc && node -e \"require('fs').chmodSync('build/index.js', '755')\"",
    "prepare": "npm run build",
    "watch": "tsc --watch",
    "inspector": "npx @modelcontextprotocol/inspector build/index.js"
  },
  "dependencies": {
    "@modelcontextprotocol/sdk": "0.6.0"
  },
  "devDependencies": {
    "@types/node": "^20.11.24",
    "typescript": "^5.3.3"
  }
}

创建 tsconfig.json

在 mcp-server 目录下,新建 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"]
}

安装依赖

npm install

步骤 2:编写基础代码

在 src 目录下,新建 index.ts,并添加以下代码:

import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import {
  CallToolRequestSchema,
  ErrorCode,
  ListToolsRequestSchema,
  McpError,
} from "@modelcontextprotocol/sdk/types.js";

const server = new Server({
  name: "mcp-server",
  version: "1.0.0",
}, {
  capabilities: {
    tools: {}
  }
});

server.setRequestHandler(ListToolsRequestSchema, async () => {
  return { tools: [] };
});

server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === "name_of_tool") {
    return {};
  }
  throw new McpError(ErrorCode.ToolNotFound, "工具未找到");
});

const transport = new StdioServerTransport();
await server.connect(transport);

步骤 3:定义并添加 MCP 工具

现在,我们来创建一个 MCP 工具,比如 计算两个数的和:

server.setRequestHandler(ListToolsRequestSchema, async () => {
  return {
    tools: [{
      name: "calculate_sum",
      description: "计算两个数的总和",
      inputSchema: {
        type: "object",
        properties: {
          a: { type: "number" },
          b: { type: "number" }
        },
        required: ["a", "b"]
      }
    }]
  };
});

server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === "calculate_sum") {
    const { a, b } = request.params.arguments;
    return { toolResult: a + b };
  }
  throw new McpError(ErrorCode.ToolNotFound, "工具未找到");
});

步骤 4:将 MCP 服务器集成到 Claude Desktop

在 claude_desktop_config.json 中注册 MCP 服务器:

{
  "mcpServers": {
    "mcp-server": {
      "command": "node",
      "args": [
        "/Users/YOUR_USER/mcp-server/build/index.js"
      ]
    }
  }
}

重启 Claude Desktop,你应该能在工具列表中看到 calculate_sum!

Claude Desktop 工具列表

Claude Desktop 工具列表

步骤 5:调用 REST API 作为 MCP 工具

server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === "httpbin_json") {
    try {
      const response = await fetch('https://httpbin.org/json', {
        method: 'GET',
        headers: {
          'accept': 'application/json'
        }
      });

      if (!response.ok) {
        throw new Error(`HTTP 错误!状态码:${response.status}`);
      }

      const data = await response.json();
      return { toolResult: data };
    } catch (e) {
      throw new Error("请求失败");
    }
  }
});

相关文章

GPT-6 Astra 做完整游戏,39 小时与 15.6 亿 token 账本
AI 教程知识
2026年9月14日
0 条评论
小创

GPT-6 Astra 做完整游戏,39 小时与 15.6 亿 token 账本

开发者 Emm Tee 用 GPT-6 Astra 加 Blender 做出完整可玩的送报游戏 PaperRoute,并公开了逐小时、逐 token 的完整账本:39 小时追踪工时、15.6 亿 token、90 次提交。他把流程拆成八步:先写自己的 brief,只给机制不给美术方向,把游戏引擎和画面表现跑成两条独立工作流,角色概念图在 ChatGPT 做、网格走 Meshy、由 Astra 完成减面绑定,每一次改动都产出审查渲染图。他还给出了未验证的部分:手机端稳定 60fps 尚无定论。

#智能体#Blender#3D建模
阅读全文
ChatGPT Work 深度实测,一句自然语言调度 223 个内置工具完成自主闭环
AI 教程知识
2026年9月14日
0 条评论
小创

ChatGPT Work 深度实测,一句自然语言调度 223 个内置工具完成自主闭环

ChatGPT Work 是 OpenAI 推出的自主智能体操作系统,具备全网访问、持久化文件系统及无头浏览器等核心能力。其内置 223 个工具与 44 项技能,支持代码运行、网站部署及自然语言定时任务,实现从指令到可交付成果的闭环。实测显示其能自主完成路线规划、数据抓取等复杂工作流。但系统存在间接提示词注入风险及多代理文件冲突问题,使用时需注意安全边界与版本管理。

#AI工具#智能体#ChatGPT Work
阅读全文
GPT-Image-2.5 实战选型指南,教你用双模型搞定精准改图与草图成图
AI 教程知识
2026年9月14日
0 条评论
小创

GPT-Image-2.5 实战选型指南,教你用双模型搞定精准改图与草图成图

OpenAI 发布 GPT-Image-2.5,核心突破在于实现无漂移局部精修。API 端拆分为 Flare 与 Sunburst 双模型:Flare 主打低延迟与高吞吐,适合批量出图;Sunburst 专注高精度多轮编辑,保障品牌物料一致性。前端新增草图模式、模板系统及图上评论功能,提升创作效率。该模型解决了 AI 改图画面漂移痛点,已在多个平台落地应用,但在超长对话多层修改场景下仍存在回溯局限。

#AI 绘画#生图模型#ChatGPT
阅读全文
互动讨论

评论区

围绕《用 TypeScript 在 10 分钟内构建你的第一个 MCP 服务器》展开交流,未登录用户可浏览评论,登录后可参与讨论。

评论数
0
登录后参与评论
支持发表观点与回复一级评论,互动后将同步到消息中心。
登录后评论
暂无评论,欢迎成为第一个参与讨论的人。