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 的高级特性，暂时先忽略）：
const app = express();
app.use(express.json());
// 处理端点的 POST 请求
app.post('/mcp', async (req, res) => {
console.log('Received request:', req.body);
try {
const server = getServer(); // 获取 server 实例，具体实现请见下文
// 初始化 Streamable HTTP 传输实例
const transport = new StreamableHTTPServerTransport({
sessionIdGenerator: undefined, // 不使用 session
enableJsonResponse: true, // server 使用 JSON 进行响应
});
await server.connect(transport); // transport 与 server 实例绑定
await transport.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 这个参数：
const getServer = (): McpServer => {
const server = new McpServer({
name: 'weather-mcp-server',
version: '1.0.0',
});
// 定义 get-current-weather 这个 tool
server.tool(
'get-current-weather',
'获取指定城市的当前天气',
{
city: z
.enum(['北京', '上海', '广州', '深圳'])
.describe('可供查询天气的城市名称'),
},
async ({ city }): Promise<CallToolResult> => {
// get-current-weather 具体实现逻辑
return await getCurrentWeatherHandler(city);
}
);
return server;
};
这里给大家看一下 get-current-weather 具体实现逻辑，即 getCurrentWeatherHandler 函数，相关注释也比较详细：
const getCurrentWeatherHandler = async (
city: '北京' | '上海' | '广州' | '深圳'
): Promise<CallToolResult> => {
// 城市名与城市代码映射关系，为了演示方便只提供北上广深
const cityAdCodeMap = {
北京: '110000',
上海: '310000',
广州: '440100',
深圳: '440300',
};
const adcode = cityAdCodeMap[city];
if (!adcode) {
return {
content: [
{
type: 'text',
text: `Error: Unsupported city name "${city}"`,
},
],
isError: true,
};
}
// 拼接高德天气 API 的请求 URL
const url = `https://restapi.amap.com/v3/weather/weatherInfo?key=${apiKey.default}&city=${adcode}`;
try {
const response = await fetch(url);
if (!response.ok) {
return {
content: [
{
type: 'text',
text: `Error: ${response.status} ${response.statusText}`,
},
],
isError: true,
};
}
// 处理高德天气 API 返回的结果，lives 为天气数据的数组，因为每次只查一个城市所以就取第一个
const { lives: currentWeather } = (await response.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 功能上展现出赶超趋势。
