超越Cursor？最强编辑器重大更新！带你动手体验VSCode MCP Streamable HTTP传输！ - 链载Ai

2025 年 5 月 9 日凌晨，Visual Studio Code（VSCode）发布了全新的 1.100 版本^[1]。本次更新亮点颇多，尤其是 AI 编程方面。其中最重大的更新就是 Copilot 支持了 Streamable HTTP 传输方式的 MCP server 的接入。

本篇文章将通过实现一个简单的、能够获取实时天气的示例 streamable HTTP MCP server，带你动手体验 VSCode 这次重大更新！

Streamable HTTP

在最新的Model Context Protocol（MCP，模型上下文协议）版本（2025-03-26）^[2]中引入了 Streamable HTTP 的通信方式，正式取代了旧版本中的 SSE 通信方式，成为了新的远程 MCP 交互标准。

Streamable HTTP 通信方式下的 MCP server 只需要暴露一个同时支持 POST/GET 的端点（之前 SSE 需要两个端点）：

MCP client 向 server 发送消息时，必须使用 POST 方法，server 根据消息类型进行 SSE 或 JSON 响应；
MCP client 向 server 发送 GET 请求时，server 会初始化一个单独的 SSE 连接用于 server 向 client 发送请求消息与通知消息。

关于 Streamable HTTP 的更多实现细节，在本人之前的文章有讨论过，感兴趣的朋友可以详细了解下。

Copilot MCP

VSCode Copilot 从 2025 年 3 月的更新（version 1.99）开始支持了 Agent Mode，自然也支持了模型上下文协议（Model Context Protocol，MCP），全面对标 Cursor、Windsurf 等一众明星 AI 编辑器。

彼时的 Copilot 和 Cursor 等一样，只支持 MCP 的 Stdio 和 SSE 通信方式。而本次更新 VSCode 弯道超车，让 Copilot MCP 支持了最新的 Streamable HTTP 通信协议，在 AI 编辑器圈子里有着里程碑的意义。

如何配置 MCP server

我们来实际体验一下 VSCode 通过 Streamable HTTP 接入 MCP server。

写一个简单的 weather-mcp

为了演示方便，我这里使用MCP 官方的 Typescript SDK^[3]简单实现了一个能获取指定城市实时天气的 MCP server，通信方式为 Streamable HTTP。

获取城市实时天气的能力是基于高德地图的天气 API^[4]，想使用该 API 需要去申请开发者 key。

代码具体实现比较简单：按照 Streamable HTTP 的规范，基于express Web 框架^[5]对 MCP server 端点（这里是/mcp）的 POST 请求进行了处理（GET 用于 server notification/request 的高级特性，暂时先忽略）：

constapp = express();
app.use(express.json());
// 处理端点的 POST 请求
app.post('/mcp',async(req, res) => {
console.log('Received request:', req.body);
try{
 constserver = getServer();// 获取 server 实例，具体实现请见下文
  // 初始化 Streamable HTTP 传输实例
 consttransport =newStreamableHTTPServerTransport({
   sessionIdGenerator:undefined,// 不使用 session
   enableJsonResponse:true,// server 使用 JSON 进行响应
  });
 awaitserver.connect(transport);// transport 与 server 实例绑定
 awaittransport.handleRequest(req, res, req.body);// 具体处理请求
 }catch(error) {
  // 异常捕获与处理
 console.error('Error handling MCP request:', error);
 if(!res.headersSent) {
   res.status(500).json({
    jsonrpc:'2.0',
    error: {
     code:-32603,
     message:'Internal server error',
    },
    id:null,
   });
  }
 }
});
// 启动 MCP server 服务
app.listen(3000,()=>{
console.log('Server is running on port 3000');
});

MCP server 的实例通过getServer函数获得。这里我们定义了一个get-current-weather的 tool，用于获取指定城市的当前天气，大模型需要传入的只有指定城市名称city这个参数：

constgetServer = ():McpServer=>{
constserver =newMcpServer({
  name:'weather-mcp-server',
  version:'1.0.0',
 });
// 定义 get-current-weather 这个 tool
 server.tool(
 'get-current-weather',
 '获取指定城市的当前天气',
  {
   city: z
    .enum(['北京','上海','广州','深圳'])
    .describe('可供查询天气的城市名称'),
  },
 async({ city })romise<CallToolResult> => {
  // get-current-weather 具体实现逻辑
  returnawaitgetCurrentWeatherHandler(city);
  }
 );

  returnserver;
};

这里给大家看一下get-current-weather具体实现逻辑，即getCurrentWeatherHandler函数，相关注释也比较详细：

constgetCurrentWeatherHandler =async(
 city:'北京'|'上海'|'广州'|'深圳'
)romise<CallToolResult> => {
// 城市名与城市代码映射关系，为了演示方便只提供北上广深
constcityAdCodeMap = {
 北京:'110000',
 上海:'310000',
 广州:'440100',
 深圳:'440300',
};
constadcode = cityAdCodeMap[city];
if(!adcode) {
 return{
   content: [
    {
    type:'text',
     text:`Error: Unsupported city name "${city}"`,
    },
   ],
   isError:true,
  };
 }
// 拼接高德天气 API 的请求 URL
consturl =`https://restapi.amap.com/v3/weather/weatherInfo?key=${apiKey.default}&city=${adcode}`;
try{
 constresponse =awaitfetch(url);
 if(!response.ok) {
  return{
    content: [
     {
     type:'text',
      text:`Error{response.status}${response.statusText}`,
     },
    ],
    isError:true,
   };
  }
 // 处理高德天气 API 返回的结果，lives 为天气数据的数组，因为每次只查一个城市所以就取第一个
 const{ lives: currentWeather } = (awaitresponse.json())as{
   lives: unknown[];
  };
 return{
   content: [
    {
    type:'text',
     text:JSON.stringify(currentWeather.at(0),null,2),
    },
   ],
  };
 }catch(error) {
 return{
   content: [
    {
    type:'text',
     text:`Error{error}`,
    },
   ],
   isError:true,
  };
 }
};

由于高德天气 API 需要将指定城市的文本名称转换为代码（adcode），这里为了演示方便，就强制改工具只支持 “北上广深” 的天气获取。

添加 weather-mcp

点开 activity bar 里的 Copilot Chat，然后和 stdio、SSE 通信方式下的 MCP server 一样，首先将 copilot 模式切换为 agent（方可支持 MCP）：

然后在下方输入框内会出现一个工具样式的图标，点击一下就会展示出当前可供 agent 使用的 tools 列表，以及添加 MCP server 的选项：

点击 Add MCP Server 之后，就会出现让你选择 stdio、SSE 或 streamable HTTP 通信方式的 MCP server，这里我们选择 streamable HTTP：

然后会让我们分别填写 MCP server 的 HTTP 端点（我们示例的 weather-mcp 是http://localhost:3000/mcp），以及 MCP server 在配置中的唯一 ID，这里我起名weather-mcp-server：

随后会询问我们该 MCP server 是添加到 workspace（只对当前 workspace 生效）还是添加到用户配置（全局生效），这个根据实际需求选择就可以：

根据上一步选择的配置生效范围，创建配置的位置会有所不同：

Workspace 生效：会在当前项目下的 .vscode 目录下生成一个 mcp.json 文件；
全局配置生效：会在全局配置的 settings.json 中增加 mcp 字段，用于配置 MCP。

至此，如果嫌以上过程比较繁琐，还可以通过两种方法达到同样目的，以上的方法只是更加直观，对初学者友好：

调出 VSCode 控制面板（Command Palette），快捷键一般是ctrl+shift+P或者⌘+shift+P（MacOS），输入 MCP: Add Server，之后步骤与以上类似；

也可以直接在对应位置添加配置 JSON 就好：如果当前 workspace 生效，则创建.vscode/mcp；全局配置生效，则在全局settings.json中增加 mcp 字段。

最终，生成的 MCP server 配置如下，区别于 stdio 和 SSE 的就是这里的 type 需要配置为http：

{
 "servers": {
   "weather-mcp-server": {
     "type":"http",
     "url":"http://localhost:3000/mcp"
    }
  }
}

运行起来！

首先，我们需要将 weather-mcp-server 启动。对于我们的 weather-mcp-server，需要使用tsc命令构建项目然后通过node运行（提前配置好 NodeJS 运行环境）：

然后我们在 VSCode MCP server 配置这里，能看到 code lens 区域显示启动 weather-mcp-server。对于 streamable HTTP 的通信方式，这里 Start 的意思就是让 VSCode 作为 MCP client 去连接 weather-mcp-server：

在 VSCode 输出控制台能看到连接 weather-mcp-server 成功：

下面我们再回到 copilot 界面，确保在 agent 模式下，我们来验证下 weather-mcp-server 的功能。

这里我提出了以下问题：“如果我现在穿着始祖鸟羽绒服去广州 city walk 会发生什么？可以使用 tools 去获取最新的天气。”

可以看到大模型（这里用的 OpenAI GPT-4.1）选择去使用我们 weather-mcp-server 的get-current-weather工具，并看到输入为{ "city": "广州"}：

点击 continue 以确认使用 MCP，大模型会结合 MCP server 返回的结果，给出精准的回答（Output 就是我们 weather-mcp-server 的get-current-weather工具返回的 MCP response）：

VSCode 和 Cursor 一众编辑器的大战在所难免

在近两月，AI 编程赛道的竞争与融资甚是激烈：

Cursor：AI 编辑器界长期以来的老大，其母公司 Anysphere 近期完成了新一轮融资，使得公司估值达到了近 90 亿美元，约合人民币 650 亿，较年初增长近三倍；
Windsurf：长期以来与 Cursor 对标，Agent 模式开拓者，很多用户觉得 Windsurf 的 Cascade 模式要更加丝滑。近期如愿以偿地被 OpenAI（ChatGPT 的母公司，不用多说了吧）收购，抱紧大腿。

此外，Google、Anthropic 等公司也都在自己的 AI 编程领域中做了许多更新迭代，如 Gemini 2.5、Cline 等。

如此竞争激烈下手握 VSCode 的微软，这样的 AI 大佬级公司也是不甘示弱的，尤其是面对 Cursor、Windsurf 这种 VSCode Fork 产品，一直以来在 AI 编程被他们吊打是很憋屈的（近日微软封禁了 Cursor 工具中 C/C++/C#等语言的支持就是急了的表现 ?）。VSCode 其实纸面实力优势明显，有着雄厚的技术资源、庞大的用户基数。近期关于 AI 功能的几次更新，也有赶超 Cursor 的趋势。

总结

本文介绍了 VSCode 1.100 版本的更新亮点，特别是 Copilot 对 Streamable HTTP 传输方式的支持。文章通过一个示例项目weather-mcp，展示了如何基于 Streamable HTTP 构建 MCP server 并与 VSCode 集成。

此外，文章还对比了 VSCode 与 Cursor、Windsurf 等 AI 编辑器的竞争态势。尽管 Cursor 和 Windsurf 在 AI 编程领域表现强劲，但 VSCode 凭借其技术资源和用户基础，正逐步缩小差距，并在 AI 功能上展现出赶超趋势。