大数跨境
0
0

TypeScript在Cursor AI MCP服务中的工程化实践

TypeScript在Cursor AI MCP服务中的工程化实践 三七互娱技术团队
2025-05-06
0
导读:本文讲述如何开发标准化的MCP,并在Cursor中应用
01

引言

MCP (模型上下文协议)是什么?


模型上下文协议允许应用程序以标准化的方式为LLM提供上下文,从而将提供上下文的任务与实际的LLM交互分离开来。

02

问题背景

在使用 Cursor AI 调用 MCP(Managed Code Protocol) 服务时,开发者可能会遇到以下痛点:

1. 官方 SDK 示例无法直接适配 Cursor AI

2. 重复性 MCP 代码开发

  • 每个 MCP 服务都需要编写相似的 协议解析、错误处理、日志记录 等基础代码,增加了维护成本。

  • 缺乏统一的工程化方案,不同 MCP 服务的代码风格和架构可能不一致,影响团队协作。

03

问题分析

1. 官方 SDK 与 Cursor AI 的适配问题

主要原因在于一些核心的配置项如果缺失配置的话,CursorAI只会告诉你Client Closed,并不会告知关闭的原因,可能每次都要排查类似的问题。而这些核心配置项在官方SDK文档的位置也比较后面,对于初次开发的人员来说要定位问题比较麻烦。

2. 重复性 MCP 代码开发
(1)每个 MCP 服务需独立实现协议解析、错误处理等基础逻辑。  
(2)代码冗余,维护困难,且容易引入不一致性。  

04

解决方案

对MCP SDK进行工程化封装,提供统一入口和基础模板。首个工具验证通过后,后续工具可复用相同模式快速接入,确保架构统一性。

05

实施过程

开发一个独立的MCP

第一步 安装核心的SDK与第三方库

@modelcontextprotocol/sdk

MCP官方TypeScript SDK,用于搭建MCP的服务器与客户端

Github地址:

https://github.com/modelcontextprotocol/typescript-sdk

作用

  • 提供MCP(Model Context Protocol)的核心功能

  • 包含服务器创建、通信协议和类型定义

  • 提供与LLM通信的标准接口

主要组件

  • Server:创建MCP服务实例

  • StdioServerTransport:基于标准输入/输出的通信传输层

  • CallToolRequestSchema:处理工具调用的请求模式

  • ListToolsRequestSchema:处理工具列表查询的请求模式

示例用法

zod

作用

  • 提供TypeScript优先的数据验证库

  • 用于定义和验证工具输入参数的结构

  • 提供丰富的验证规则和错误处理

主要功能

  • 类型定义与验证

  • 自动类型推断

  • 错误处理与格式化

  • 模式组合与转换

示例用法

第二步 通过SDK创建Server示例

第三步 通过ZOD定义你期望的输入参数

第四步 定义支持的工具列表

参数说明

  • name:工具名称,使用下划线命名法(如your_tool_name)

  • description:工具的详细描述,会展示给LLM

  • inputSchema:输入参数的JSON Schema定义

  • type:通常为"object"

  • properties:定义各个参数的类型和描述

  • 每个参数包含type和description

  • 可以使用enum定义枚举值

  • required:必需参数的名称数组

第五步 定义工具调用的处理逻辑

第六步 开启MCP工具服务

目录结构如下:

06

实施过程

工程化MCP工具开发实践(stdio类型)

目标:开发一个主要处理将PSD文件中的图层按组的层次结构进行解析与导出,文字部分将会被清空的MCP,并处理为一个工程化MCP模板。

核心实现流程如下所示。

第一步 定义配置文件

文件位置:src/config.ts

第二步 定义PSD切图工具的主要逻辑

文件位置:src/tools/psd-slice.ts

第三步 输入内容参数数据结构定义

文件位置:src/schemas/input.ts

第四步 定义一些可能会用到的工具函数

文件位置:src/utils/helpers.ts

第五步 定义MCP工具服务的主入口

文件位置:src/index.ts

第六步 定义构建的脚本

执行构建命令 npm run build 即可完成脚本的构建,构建产物在项目根目录的 build 文件夹下。


第七步 在Cursor中开启使用

新增一个MCP的服务器

假设构建后脚本的绝对路径是:

/Users/KevinKwok/mcp/psd-slice-mcp/build/index.js。

我们自定义一个服务器的名称,并且将Type设置为command类型。

开启Cursor AI的YOLO模式,以支持能够在Agent中让AI直接调用MCP工具

至此,我们已经实现了相关的自动切图MCP工具服务,我们可以直接到新版Cursor中,开启Agent模式后直接对话调用相关的逻辑即可。

简单使用如下:

执行效果如图所示(可以看到图层结构与PSD文件内一致,preview为PSD的预览图)

07

总结

在开发过程中,我们容易遇到以下的一些坑点:

1.初始化Server实例的时候,必须带上如下参数,否则MCP服务启动会失败报错。【Server does not support tools (required for tools/list)】

2.在定义输入与输出的参数中,如果涉及到文件路径相关的输入时,需要对参数添加需要为绝对路径的自然语言描述。否则在cursor AI调用相关工具的时候,其传入的文件路径不存在导致问题。

3.在使用已有MCP工具的时候(例如说构建好的产物),需要注意安装相关依赖,即需要确保相关内容在本地是可以直接正常执行的,否则也会使得MCP服务无法正常使用。

08

展望

期望基于该MCP工程化项目构建一个智能化的MCP开发框架,以实现以下几点功能:

1.开发者提供工具的业务逻辑描述(自然语言/已有的脚本)

2.框架直接按照 config、tools、schema 几个核心步骤生成代码到MCP工程项目内

3.构建后直接能够在MCP的客户端(如Cursor)内直接使用


END


三七互娱技术团队

扫码关注 了解更多



【声明】内容源于网络
0
0
三七互娱技术团队
三七互娱技术中心
内容 123
粉丝 0
三七互娱技术团队 三七互娱技术中心
总阅读41
粉丝0
内容123