Cline使用MCP-TypeScript版本

Cline使用MCP-TypeScript版本

Cline使用MCP-TypeScript版本-本地服务

---

文章目录

• Cline使用MCP-TypeScript版本
• • @[toc]
  • 1-思路梳理
  • 2-过程问题
  • 3-上手实操
  • • 1-运行MCP官网TypeScript样例
    • 2-本地创建TypeScript版本MCP
    • 3-项目编译
    • 4-配置MCP服务器-Cline版本

1-思路梳理

• 1）运行MCP官网TypeScript样例Quickstart
• 1）本地创建TypeScript版本MCP
• 2）进行TypeScript编译
• 3）Cline配置MCP的服务地址(执行的是本地路径)
• 4）进行本地Cline调试

---

2-过程问题

• 1）如何解决npm的依赖问题
• 2）MCP-TypeScrpt代码解读
• 3）如何配置MCP服务器

---

3-上手实操

1-运行MCP官网TypeScript样例

先看一下MCP官网TypeScript样例是个什么样子，能不能把依赖下载下来！编译之后，会生成一个build/index.js文件

• MCP官网TypeScript样例：https://gitee.com/enzoism/quickstart-resources/tree/main/weather-server-typescript
• 运行MCP官网TypeScript样例Quickstart
• MCP-代码解读TypeScript版本

当前为了简化index.ts的业务逻辑，更换了一个模拟的业务操作查询天气的逻辑

• 1）简化index.ts内容

MCP的服务器，并不像FunctionCall那样，定义好【函数】+【业务描述】+【JsonSchema】后，将工具注册到tools中即可；MCP还需要依赖编译等操作，所以最好是把MCP官网TypeScript样例中的demo下载下来，只改动index.ts，先体会一下整体的MCP业务如何提供服务的

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";// 定义天气数据类型
interface WeatherInfo {temperature: number;condition: string;humidity: number;windSpeed: number;
}// 模拟城市天气数据
const weatherData = {"北京": { temperature: 20, condition: "晴朗", humidity: 45, windSpeed: 8 },"上海": { temperature: 25, condition: "多云", humidity: 60, windSpeed: 12 },"广州": { temperature: 28, condition: "小雨", humidity: 75, windSpeed: 6 },"深圳": { temperature: 27, condition: "阴天", humidity: 70, windSpeed: 10 },"杭州": { temperature: 22, condition: "多云", humidity: 65, windSpeed: 9 }
} as const satisfies Record<string, WeatherInfo>;// 模拟函数调用和数据返回
function getWeatherInfo(city: string): { content: Array<{ type: "text"; text: string }> } {const weather = weatherData[city as keyof typeof weatherData];if (!weather) {const availableCities = Object.keys(weatherData).join("、");return {content: [{type: "text",text: `未找到城市 ${city} 的天气信息。支持的城市包括：${availableCities}`}]};}// 模板字符串格式const weatherText = `${city}的天气信息：温度：${weather.temperature}°C天气：${weather.condition}湿度：${weather.humidity}%风速：${weather.windSpeed}m/s`.replace(/^\s+/gm, "");  // 使用正则移除行首空格return {content: [{type: "text",text: weatherText}]};
}// 创建 MCP 服务器
const server = new McpServer({name: "weather-server",version: "1.0.0",description: "城市天气信息服务"
});// 注册天气查询工具
server.tool("get-weather","获取指定城市的天气信息",{city: z.string().describe("城市名称（如：北京、上海、广州、深圳）")},async ({ city }) => {return getWeatherInfo(city);}
);// 启动服务器
async function main() {const transport = new StdioServerTransport();await server.connect(transport);
}main().catch((error) => {console.error("初始化失败:", error);process.exit(1);
});

---

• 2）依赖安装说明

# 1-安装依赖
pnpm install @modelcontextprotocol/sdk
npm install -g typescript
npm install -g zod# 2-进行软件编译
npm run build# 3-配置MCP服务器配置
> 下面会补充该部分逻辑

---

2-本地创建TypeScript版本MCP

MCP的服务器，并不像FunctionCall那样，定义好【函数】+【业务描述】+【JsonSchema】后，将工具注册到tools中即可；MCP还需要依赖编译等操作，所以最好是把MCP官网TypeScript样例中的demo下载下来，只改动index.ts，先体会一下整体的MCP业务如何提供服务的

• 1）编写一个假的天气服务

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";// 定义天气数据类型
type WeatherInfo = {temperature: number;condition: string;humidity: number;windSpeed: number;
};// 模拟城市天气数据(模拟数据库查询)
const weatherData: Record<string, WeatherInfo> = {"北京": { temperature: 20, condition: "晴朗", humidity: 45, windSpeed: 8 },"上海": { temperature: 25, condition: "多云", humidity: 60, windSpeed: 12 },"广州": { temperature: 28, condition: "小雨", humidity: 75, windSpeed: 6 },"深圳": { temperature: 27, condition: "阴天", humidity: 70, windSpeed: 10 },"杭州": { temperature: 22, condition: "多云", humidity: 65, windSpeed: 9 }
};// 数据查询和返回逻辑的函数
function getWeatherInfo(city) {const weather = weatherData[city];if (!weather) {return {content: [{type: "text",text: `未找到城市 ${city} 的天气信息。支持的城市包括：${Object.keys(weatherData).join("、")}`}]};}return {content: [{type: "text",text: `${city}的天气信息：温度：${weather.temperature}°C天气：${weather.condition}湿度：${weather.humidity}%风速：${weather.windSpeed}m/s`}]};
}// 创建 MCP 服务器
const server = new McpServer({name: "weather-server",version: "1.0.0",description: "城市天气信息服务"
});// 注册天气查询工具
server.tool("get-weather","获取指定城市的天气信息",{city: z.string().describe("城市名称（如：北京、上海、广州、深圳）")},async ({ city }) => {return getWeatherInfo[city];}
);// 启动服务器
async function main() {const transport = new StdioServerTransport();await server.connect(transport);console.error("天气服务器已启动");
}main().catch((error) => {console.error("服务器启动失败:", error);process.exit(1);
});

---

3-项目编译

编译之后，会生成一个dist/index.js文件

# 1-安装依赖
pnpm install @modelcontextprotocol/sdk# 2-安装TypeScript等其他依赖
npm install -g typescript
npm install -g zod# 3-进行软件编译
npm run build

---

4-配置MCP服务器-Cline版本

当前使用Cline插件使用MCP服务, VSCode头部有一个搜索框，搜索[MCP服务器]

• 搜索的位置
  

• 搜索[MCP服务器]后
  

• 点击配置之后是一个JSON配置文件

{"mcpServers": {"weather": {"command": "node","args": ["/Users/rong/Desktop/2025-03-04-BPM使用苦恼/weather-server-typescript/build/index.js"]}}
}

• 添加后就可以直接进行对话了
  

• cline配置的MCP配置地址

根据每个人安装的版本和具体的地址可能会有小的差异，不影响整体的理解

/Users/rong/Library/Application Support/Code/User/globalStorage/hybridtalentcomputing.cline-chinese/settings

---