Cline使用MCP-TypeScript版本

Cline使用MCP-TypeScript版本

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

---

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

---