vscode 1.100 新版AI功能尝鲜，教你自定义开发MCP服务解决实际问题，纯干货

四颗小鱼丸
733 阅读5分钟

VSCode MCP自定义服务开发与应用实践

前言

最近VSCode更新到了1.100版本，这个版本非常好用，原生自带AI聊天功能和支持MCP服务，提示词规则设置等AI功能，对于提升开发效率有很大帮助。看到网上很多文章没有实际案例且泛泛而谈，让有些人不知道MCP服务有什么用或者不知道如何开发一个属于自己本地的MCP服务，本文将通过多语言翻译这个实际业务来详细介绍MCP服务的概念、开发流程以及在VSCode中的应用。

实战.png

什么是MCP服务？

MCP（Model Context Protocol）服务我的理解就是中间处理层，它可以获取大模型的上下文内容，然后你就可以对大模型内容进行数据处理，还能执行文件操作、调用外部API等更多功能。MCP服务可以极大地扩展AI处理业务能力的边界。

对于我来说，MCP服务的主要用途是：

  • 调用企业内部API，实现与现有系统的集成
  • 处理特定格式的数据转换
  • 执行文件操作，如多语言资源文件的生成和复制
  • 扩展AI助手的能力，使其能够完成更复杂的任务

这个是MCP服务的开发文档，有兴趣的可以看看

modelcontextprotocol.io/introductio…

在学MCP开发前先看下大模型接入MCP服务后是怎样的

!以下是大模型调用MCP服务进行多语言进行翻译和下载文件到项目的实际使用效果

mcpserve.png

多语言.png

MCP服务开发环境准备

MCP服务可以用多种编程语言开发，如Node.js、Python等。本人比较擅长node，本文将以Node.js为例，介绍如何开发MCP服务。 在开始开发MCP服务前，我们需要用到以下环境和工具：

  1. Node.js环境：建议安装最新版本的Node.js
  2. TypeScript：推荐使用TypeScript开发，提供更好的类型检查和开发体验
  3. VSCode：1.100及以上版本，支持MCP服务集成
  4. MCP SDK：使用官方提供的SDK快速开发MCP服务

MCP服务开发步骤

1. 初始化项目

首先，创建一个新的基于TS的Node项目并安装必要的依赖：

mkdir mcp-serve
cd mcp-serve
npm init -y
npm install @modelcontextprotocol/sdk axios zod typescript
npm install -D @types/node

以下是两个mcp服务开发的核心库介绍

@modelcontextprotocol/sdk 是一个专为 Node.js 环境设计的 npm 包，提供了创建和管理MCP服务器的核心功能：

  • 定义和注册工具（tools）
  • 处理与AI模型的通信
  • 提供标准化的请求/响应格式
  • 支持多种传输方式（如stdio）

@zod 一个TypeScript优先的数据验证库，在MCP服务中用于：

  • 定义工具输入参数的类型和验证规则
  • 确保接收到的数据符合预期格式
  • 提供运行时类型安全
  • 自动生成TypeScript类型定义

2. 配置TypeScript

创建tsconfig.json文件，配置TypeScript编译选项：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"]
}

3. 定义MCP服务和实现业务功能

创建src/index.ts文件，定义MCP服务和工具：

主要实现了调用API翻译多语言和下载多语言到项目两个功能。

业务代码一般写在server.tool这里面，大模型会根据需求调用对应的服务工具

11.png

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";
import { geti18n, TranslateToEn, downFile } from "./api";
import path from "path";
import fs from "fs";

// 创建MCP服务实例
const server = new McpServer({
  name: "my-custom-mcp-server",
  version: "1.0.0",
});

const port = process.env.PORT;

// 定义多语言翻译工具
server.tool(
  "translationI18n",
  {
    input: z.string(),
  },
  async ({ input }) => {
    // 匹配所有 ##...## 的内容
    const regex = /##([\s\S]+?)##/g;
    let matches = input.matchAll(regex);
    let result = input;
    
    for (const match of matches) {
      const value = match[1];
      if (!value) continue;
      
      let params: Record<string, any> = {
        language: 1,
        autoAlias: true,
        value: value,
      };
      
      // 企业版需要英文翻译
      if (port === "5500") {
        params.valueEn = await TranslateToEn(value);
      }
      
      // 调用多语言接口
      const alias = await geti18n(params);
      if (alias) {
        result = result.replace(match[0], alias);
      }
    }
    
    return {
      content: [
        {
          type: "text",
          text: result,
        },
      ],
    };
  }
);

// 定义多语言复制工具
server.tool(
  "copyI18n",
  {
    rootPath: z.string(),
  },
  async ({ rootPath }) => {
    let langArr = [{ name: "ZhCn", value: 1, filePath: "ZhCn.js" }];
    
    // 企业版需要英文文件
    if (port === "5500") {
      langArr.push({ name: "EnUs", value: 2, filePath: "EnUs.js" });
    }
    
    let result = "";
    try {
      for (let lang of langArr) {
        const langTargetPath = path.join(
          rootPath,
          "src/lang/source",
          lang.filePath
        );
        const tempFilePath = path.join(rootPath, lang.filePath);
        
        // 创建写入流下载文件
        const writer = fs.createWriteStream(tempFilePath);
        const res = await downFile(lang.value);
        res.data.pipe(writer);
        
        await new Promise<void>((resolve, reject) => {
          writer.on("finish", () => resolve());
          writer.on("error", (err) => reject(err));
        });
        
        // 复制到目标目录并删除临时文件
        fs.copyFileSync(tempFilePath, langTargetPath);
        fs.unlinkSync(tempFilePath);
        
        console.log(`${lang.name}文件复制成功`);
        result = `${tempFilePath}文件复制成功`;
      }
    } catch (error) {
      console.log("文件复制失败", error);
      result = `文件复制失败${error},${rootPath},`;
    }
    
    return {
      content: [
        {
          type: "text",
          text: result,
        },
      ],
    };
  }
);

// 启动MCP服务
async function startServer() {
  const transport = new StdioServerTransport();
  await server.start(transport);
  console.log("MCP服务已启动");
}

startServer().catch(console.error);

编译和运行MCP服务

  1. 添加编译脚本到package.json：
{
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js"
  }
}
  1. 编译TypeScript代码：
npm run build

在VSCode中使用MCP服务

MCP服务开发完成后接下来就可以在vscode中使用了

1. 配置VSCode

首选项-设置-打开设置(json)中添加以下内容

设置.png

33.png

    "mcp": {
        "servers": {
            "mcp-server": {
                "command": "node",
                "args": [
                    "D:\\Users\\Administrator\\Documents\\wenfeng\\mcp-serve\\dist\\index.js"
                ],
                "env": {
                    "Token": "",
                    "URL": "",
                    "PORT": ""
                }
            }
        }
    }

这里定义mcp服务要运行的脚本位置以及一些环境变量，在node项目中可以用以下方式接收

const token = process.env.Token;
const url = process.env.URL;

源码获取

以上是mcp服务的完整开发流程和使用方式，不懂的可以评论交流，完整源码已上传到GitHub，欢迎下载学习和提出改进建议：

github项目地址

如果这个项目对你有所启发，希望点个Star支持！

avatar
文章
阅读
粉丝