VS Code Copilot Chat 配置 MCP Server 全攻略(以 Next AI Draw.io 为例)
从零开始,手把手教你让 Copilot Chat 拥有「画画」超能力 🎨
目录
- [一、什么是 MCP?](#一、什么是 MCP?)
- 二、前置环境准备
- 三、配置方式详解
- [3.1 方式一:mcp.json 配置文件(推荐)](#3.1 方式一:mcp.json 配置文件(推荐))
- [3.2 方式二:命令面板引导添加](#3.2 方式二:命令面板引导添加)
- [3.3 方式三:扩展市场安装](#3.3 方式三:扩展市场安装)
- 四、配置字段完整参考
- [五、AI 提供商配置大全](#五、AI 提供商配置大全)
- 六、验证与排错
- [6.1 重载 VS Code](#6.1 重载 VS Code)
- [6.2 检查 MCP 日志](#6.2 检查 MCP 日志)
- [6.3 指令面板检查状态](#6.3 指令面板检查状态)
- [6.4 实战测试](#6.4 实战测试)
- [七、MCP 工具用法(以 Draw.io 为例)](#七、MCP 工具用法(以 Draw.io 为例))
- 八、常见问题排查手册
- 九、进阶技巧
- 十、总结
- 参考资源
一、什么是 MCP?
1.1 概念
MCP(Model Context Protocol,模型上下文协议) 是由 Anthropic 公司于 2024 年底提出的开放标准协议。它的核心目标是:标准化 AI 模型与外部工具、数据源之间的连接方式。
通俗的类比:
传统方式:每个 AI 应用 ↔ 每个工具都要单独写适配代码(像每种手机都要专属充电器)
MCP 方式:AI 应用 ↔ MCP 协议 ↔ 工具(像 USB-C,一种接口通吃所有设备)
1.2 架构
┌──────────────────┐ ┌──────────────────┐
│ MCP Client │ │ MCP Server │
│ │ MCP Protocol │ │
│ · VS Code │◄──────────────────►│ · 文件系统访问 │
│ · Claude Desktop│ (stdio/HTTP) │ · 数据库查询 │
│ · Cursor │ │ · API 调用 │
│ · 其他 AI 应用 │ │ · 浏览器自动化 │
│ │ │ · 图表生成 ✨ │
└──────────────────┘ └──────────────────┘
1.3 MCP Server 能提供什么?
| 能力 | 说明 | 示例 |
|---|---|---|
| Tools(工具) | AI 可调用的函数 | 读写文件、查询数据库、生成图表 |
| Resources(资源) | 只读数据上下文 | 文件内容、API 响应、数据库记录 |
| Prompts(提示模板) | 预定义的提示词 | /drawio.new-diagram 快速创建图表 |
| MCP Apps(交互应用) | 内嵌 UI 组件 | 表单、可视化图表、拖拽列表 |
1.4 为什么需要 MCP?
- 统一标准:一次编写 MCP Server,所有 MCP Client 都能用
- 降低门槛:不需要为每个 AI 应用单独开发插件
- 安全可控:工具运行在本地或沙箱中,用户可精细控制权限
- 生态丰富:社区已有数百个 MCP Server,覆盖各种场景
二、前置环境准备
2.1 软件要求
| 软件 | 最低版本 | 推荐版本 | 检查命令 |
|---|---|---|---|
| VS Code | ≥ 1.96 | 最新稳定版 | code --version |
| Node.js | ≥ 18.0 | ≥ 20.0 | node -v |
| npm | ≥ 9.0 | 最新版 | npm -v |
| GitHub Copilot | 已安装并登录 | 最新版 | 扩展面板检查 |
注意:MCP 支持是 VS Code 1.96 版本引入的新特性。如果你的 VS Code 版本过低,请先升级。
2.2 网络要求
-
MCP Server 首次运行时会通过
npx自动从 npm 下载,需要能访问 npm registry -
如果网络不畅,可设置国内镜像:
bashnpm config set registry https://registry.npmmirror.com -
本文示例使用的 AI 提供商(如 DeepSeek、OpenAI 等)需要能访问对应的 API 端点
2.3 可选准备
- 一个 AI 提供商的 API Key(DeepSeek、OpenAI、Claude 等任选一个即可)
- 基本了解 JSON 格式和命令行操作
三、配置方式详解
VS Code 提供了 三种 配置 MCP Server 的方式,下面逐一介绍。
3.1 方式一:mcp.json 配置文件(推荐)
这是最灵活、最适合团队协作的方式,配置文件可以纳入版本控制。
第一步:确定配置文件位置
VS Code 支持两级配置:
| 级别 | 路径 | 作用范围 | 适用场景 |
|---|---|---|---|
| 工作区级别 | <项目根>/.vscode/mcp.json |
当前项目 | 团队共享配置,纳入 Git |
| 用户级别 | ~/.config/Code/User/mcp.json(Linux) |
所有项目 | 个人常用工具 |
建议:项目相关的 MCP Server 放在工作区级别,个人通用工具放在用户级别。
第二步:创建配置文件
在项目根目录创建 .vscode/mcp.json 文件:
json
{
"servers": {
"drawio": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@next-ai-drawio/mcp-server@latest"],
"env": {
"AI_PROVIDER": "deepseek",
"AI_MODEL": "deepseek-chat",
"DEEPSEEK_API_KEY": "你的DeepSeek-API-Key"
}
}
}
}
⚠️ 关键陷阱:顶层 key 是 servers 不是 mcpServers!
很多网上教程(尤其是 Claude Desktop 的教程)使用 "mcpServers" 作为顶层 key,但 VS Code 的 mcp.json 要求使用 "servers"。这是最常见的配置失败原因!
json
// ❌ 错误:这是 Claude Desktop 的格式,VS Code 不识别
{
"mcpServers": { ... }
}
// ✅ 正确:VS Code 的格式
{
"servers": { ... }
}
第三步:配置 AI 提供商
根据你使用的 AI 服务,修改 env 中的环境变量。详见 第五节。
第四步:重载 VS Code
配置修改后,按 Ctrl+Shift+P,输入并选择 Developer: Reload Window。
第五步:确认信任
首次启动 MCP Server 时,VS Code 会弹出 信任对话框 ,询问你是否信任此服务器。点击 确认信任 即可。
如果没看到弹窗,检查 VS Code 右下角是否有通知提示。
3.2 方式二:命令面板引导添加
适合不熟悉 JSON 配置的用户,通过 UI 引导完成。
操作步骤:
- 按
Ctrl+Shift+P,输入MCP: Add Server并回车 - 在弹出的引导流程中依次填写:
| 引导项 | 填写内容 |
|---|---|
| 目标位置 | 选择Workspace(工作区)或 Global(全局) |
| Server 名称 | drawio(可自定义) |
| 类型(Type) | stdio |
| 命令(Command) | npx |
| 参数(Arguments) | 第一项填-y,点「+」添加第二项填 @next-ai-drawio/mcp-server@latest |
| 环境变量(Environment Variables) | 点「+」逐个添加:AI_PROVIDER → deepseek、AI_MODEL → deepseek-chat、DEEPSEEK_API_KEY → 你的Key |
- 完成后 VS Code 会自动生成对应的
mcp.json配置
3.3 方式三:扩展市场安装
部分 MCP Server 已发布到 VS Code 扩展市场,可以直接安装。
操作步骤:
- 打开扩展面板(
Ctrl+Shift+X) - 在搜索框输入
@mcp查看所有可用 MCP Server - 找到目标 MCP Server,点击 安装 或右键选择 安装到工作区
- 根据需要配置参数
局限 :并非所有 MCP Server 都发布到了扩展市场。本文的
next-ai-draw-io推荐使用方式一或方式二。
四、配置字段完整参考
4.1 基础配置结构
json
{
"servers": {
"<服务器名称>": {
// === 连接配置(二选一) ===
// stdio 模式:启动本地进程
"type": "stdio",
"command": "npx", // 启动命令(必填)
"args": ["-y", "包名"], // 命令参数(选填,数组格式)
// HTTP 模式:连接远程服务
// "type": "http",
// "url": "https://example.com/mcp",
// === 环境变量 ===
"env": {
"变量名": "变量值"
},
// === 沙箱配置(可选,仅 Linux/macOS) ===
"sandboxEnabled": true,
"sandbox": {
"filesystem": {
"allowWrite": ["${workspaceFolder}"]
},
"network": {
"allowedDomains": ["api.example.com"]
}
}
}
}
}
4.2 字段详解
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
type |
string | 是 | "stdio"(本地进程通信)或 "http"(远程 HTTP 通信) |
command |
string | stdio 必填 | 启动 MCP Server 的命令,如npx、node、python 等 |
args |
string\[\] | 选填 | 传给 command 的参数,每个参数是数组的一个元素 |
url |
string | http 必填 | 远程 MCP Server 的 URL |
env |
object | 选填 | 传给 MCP Server 进程的环境变量(API Key 等放这里) |
sandboxEnabled |
boolean | 选填 | 是否启用沙箱隔离(仅 Linux/macOS) |
sandbox |
object | 选填 | 沙箱详细规则(文件系统权限、网络域名白名单等) |
4.3 敏感信息安全实践
❌ 不推荐:硬编码 API Key
json
{
"servers": {
"drawio": {
"env": {
"OPENAI_API_KEY": "sk-abc123def456" // 绝对不要这样!
}
}
}
}
✅ 推荐方案一:使用 VS Code 输入变量
json
{
"servers": {
"drawio": {
"env": {
"OPENAI_API_KEY": "${input:openaiApiKey}"
}
}
}
}
首次启动时会弹出输入框,输入后会被安全存储。
✅ 推荐方案二:使用环境变量引用
先在终端或 .bashrc 中设置:
bash
export DEEPSEEK_API_KEY="sk-xxx"
然后在 mcp.json 中不设置 env 字段,MCP Server 会自动继承系统环境变量。
✅ 推荐方案三:将 mcp.json 加入 .gitignore
bash
echo ".vscode/mcp.json" >> .gitignore
五、AI 提供商配置大全
next-ai-draw-io MCP Server 支持几乎所有主流 AI 提供商。以下是完整的 env 配置参考:
5.1 DeepSeek(国内首选,性价比高)
json
"env": {
"AI_PROVIDER": "deepseek",
"AI_MODEL": "deepseek-chat",
"DEEPSEEK_API_KEY": "sk-你的Key"
}
可选模型:deepseek-chat(V3)、deepseek-reasoner(R1)
5.2 OpenAI
json
"env": {
"AI_PROVIDER": "openai",
"AI_MODEL": "gpt-4o",
"OPENAI_API_KEY": "sk-你的Key",
"OPENAI_BASE_URL": "https://api.openai.com/v1"
}
可选模型:gpt-4o、gpt-4o-mini、gpt-4-turbo、o1、o3-mini
5.3 Anthropic Claude
json
"env": {
"AI_PROVIDER": "anthropic",
"AI_MODEL": "claude-sonnet-4-5-20250929-v1:0",
"ANTHROPIC_API_KEY": "sk-ant-你的Key"
}
可选模型:claude-opus-4-5、claude-sonnet-4-5、claude-haiku-3-5
5.4 Google Gemini
json
"env": {
"AI_PROVIDER": "google",
"AI_MODEL": "gemini-2.5-pro",
"GOOGLE_GENERATIVE_AI_API_KEY": "你的Key"
}
可选模型:gemini-2.5-pro、gemini-2.5-flash、gemini-2.0-flash
5.5 SiliconFlow(国内,有免费额度)
json
"env": {
"AI_PROVIDER": "siliconflow",
"AI_MODEL": "deepseek-ai/DeepSeek-V3",
"SILICONFLOW_API_KEY": "你的Key"
}
5.6 Azure OpenAI
json
"env": {
"AI_PROVIDER": "azure",
"AI_MODEL": "gpt-4o",
"AZURE_RESOURCE_NAME": "你的Azure资源名",
"AZURE_API_KEY": "你的Key"
}
5.7 AWS Bedrock
json
"env": {
"AI_PROVIDER": "bedrock",
"AI_MODEL": "global.anthropic.claude-sonnet-4-5-20250929-v1:0",
"AWS_REGION": "us-east-1",
"AWS_ACCESS_KEY_ID": "你的AK",
"AWS_SECRET_ACCESS_KEY": "你的SK"
}
5.8 更多提供商
| 提供商 | AI_PROVIDER 值 |
需要的环境变量 |
|---|---|---|
| OpenRouter | openrouter |
OPENROUTER_API_KEY |
| Ollama(本地) | ollama |
OLLAMA_BASE_URL |
| AIHubMix | aihubmix |
AIHUBMIX_API_KEY |
| Novita | novita |
NOVITA_API_KEY |
| Gateway | gateway |
见各 Gateway 文档 |
六、验证与排错
6.1 重载 VS Code
每次修改 mcp.json 后,都需要重载 VS Code 才能使配置生效:
快捷键 :Ctrl+Shift+P → 输入 Developer: Reload Window → 回车
也可以完全关闭 VS Code 再重新打开(更彻底)。
6.2 检查 MCP 日志
VS Code 会为每个 MCP Server 生成单独的日志文件,这是排查问题的第一手资料。
日志文件位置
Linux:
bash
# 找到最新的日志目录
ls -lt ~/.config/Code/logs/ | head -5
# 进入最新目录,查看 drawio 的 MCP 日志
cat ~/.config/Code/logs/<日期>/window1/mcpServer.mcp.config.ws0.drawio.log
macOS:
bash
ls -lt ~/Library/Application\ Support/Code/logs/ | head -5
cat ~/Library/Application\ Support/Code/logs/<日期>/window1/mcpServer.mcp.config.ws0.drawio.log
Windows:
powershell
# PowerShell
dir $env:APPDATA\Code\logs\ | Sort-Object LastWriteTime -Descending | Select-Object -First 5
Get-Content $env:APPDATA\Code\logs\<日期>\window1\mcpServer.mcp.config.ws0.drawio.log
正常日志示例
2026-07-13 11:13:17.812 [info] 正在启动服务器 drawio
2026-07-13 11:13:17.813 [info] 连接状态: 正在启动
2026-07-13 11:13:17.820 [info] 连接状态: 正在运行
2026-07-13 11:13:18.992 [info] MCP server running on stdio
2026-07-13 11:13:19.003 [info] Discovered 10 tools ← 关键!看到这个就成功了
异常日志排查
| 日志关键词 | 可能原因 | 解决方案 |
|---|---|---|
command not found |
npx 或 node 不在 PATH 中 | 检查 Node.js 安装 |
EADDRINUSE |
端口被占用 | 杀掉占用进程或换端口 |
401 / 403 |
API Key 无效 | 检查 API Key 是否正确 |
ECONNREFUSED |
网络不通 | 检查代理/防火墙设置 |
No tools discovered |
MCP Server 启动异常 | 查看完整 stderr 输出 |
查看远程 MCP Server 输出
如果看不到日志文件,可以手动测试:
bash
# 手动启动 MCP Server,观察输出
npx -y @next-ai-drawio/mcp-server@latest
正常输出应该是:
[MCP-DrawIO] [INFO] Starting MCP server for Next AI Draw.io (embedded mode)...
[MCP-DrawIO] [INFO] MCP server running on stdio
按 Ctrl+C 退出。
6.3 指令面板检查状态
VS Code 提供了一系列 MCP 管理命令,在 Ctrl+Shift+P 中可用:
| 命令 | 功能 |
|---|---|
MCP: List Servers |
列出所有 MCP Server 及状态 |
MCP: Open Workspace Folder Configuration |
打开工作区 mcp.json |
MCP: Open User Configuration |
打开用户级 mcp.json |
MCP: Add Server |
引导添加新服务器 |
MCP: Reset Trust |
重置 MCP 服务器的信任状态 |
MCP: Browse Resources |
浏览 MCP 资源 |
6.4 实战测试
配置完成后,在 Copilot Chat 中发一条测试指令:
画一个简单的架构图:包含 Web 前端、API 服务、数据库三层
如果配置成功,你会看到:
- Copilot 显示「正在调用工具...」
- 浏览器自动打开
http://localhost:6002 - draw.io 编辑器中显示生成的架构图
七、MCP 工具用法(以 Draw.io 为例)
next-ai-draw-io MCP Server 提供了 10 个工具,可以完成从创建到导出的完整图表工作流。
7.1 工具列表
| 工具 | 功能 | 典型用法 |
|---|---|---|
start_session |
启动绘画会话,打开浏览器预览 | 每次画图前自动调用 |
create_new_diagram |
从 XML 创建全新图表 | 「画一个流程图」 |
edit_diagram |
编辑现有图表中的元素 | 「把用户服务改成蓝色」 |
get_diagram |
获取当前图表的 XML | 「看看现在的图」 |
load_diagram |
加载已有图表 XML | 恢复之前保存的图 |
export_diagram |
导出为 PNG/SVG 文件 | 「导出为 PNG」 |
add_page |
添加新页面/标签页 | 「加一页画部署架构」 |
delete_page |
删除指定页面 | 「删掉第二页」 |
list_pages |
列出所有页面 | 「现在有几页?」 |
7.2 画图实战示例
示例一:画微服务架构图
你对 Copilot 说 :
帮我画一个电商系统的微服务架构图,包含:Nginx 网关、用户服务、订单服务、商品服务、库存服务、MySQL 数据库、Redis 缓存、RabbitMQ 消息队列
Copilot 会自动:
- 启动 draw.io 会话并打开浏览器
- 生成包含所有组件和连线的架构图
- 用不同颜色区分不同层(网关层、服务层、数据层)
示例二:画时序图
你对 Copilot 说 :
画一个用户登录的时序图:浏览器 → Nginx → 认证服务 → Redis → MySQL
示例三:修改已有图表
你对 Copilot 说 :
把订单服务的颜色改成绿色,在订单服务和库存服务之间加一条连线
示例四:导出图表
你对 Copilot 说 :
把当前图表导出为 PNG,背景用白色
7.3 Draw.io XML 格式简介
如果你需要手动编写复杂图表,了解基本 XML 格式会很有帮助:
xml
<mxGraphModel>
<root>
<mxCell id="0"/> <!-- 根元素(必须有) -->
<mxCell id="1" parent="0"/> <!-- 默认图层(必须有) -->
<!-- 矩形节点 -->
<mxCell id="2" value="节点名称"
style="rounded=1;fillColor=#d5e8d4;strokeColor=#82b366;"
vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
</mxCell>
<!-- 连线 -->
<mxCell id="e1" style="endArrow=classic;edgeStyle=orthogonalEdgeStyle;"
edge="1" parent="1" source="2" target="3">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
常用形状样式:
| 形状 | style 值 |
|---|---|
| 圆角矩形 | rounded=1;whiteSpace=wrap;html=1 |
| 圆柱体(数据库) | shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1 |
| 三角形 | triangle;whiteSpace=wrap;html=1 |
| 椭圆 | ellipse;whiteSpace=wrap;html=1 |
| 菱形(判断) | rhombus;whiteSpace=wrap;html=1 |
| 云朵 | shape=cloud;whiteSpace=wrap;html=1 |
八、常见问题排查手册
Q1:配置了 mcp.json,但 Copilot 无法识别 MCP 工具
检查清单:
-
mcp.json的顶层 key 是"servers"而不是"mcpServers" - JSON 格式正确(可用
python3 -m json.tool mcp.json验证) - 已执行
Developer: Reload Window - 检查日志文件是否显示
Discovered X tools - VS Code 版本 ≥ 1.96
Q2:页面一直显示「加载中」转圈
原因:draw.io 编辑器的 iframe 与 MCP Server 之间的通信未建立。
解决方法:
在浏览器中打开 http://localhost:6002?mcp=<sessionId>,按 F12 打开开发者工具,在 Console 中执行:
javascript
// 手动加载图表数据
fetch('/api/state?sessionId=' + new URLSearchParams(location.search).get('mcp'))
.then(r => r.json())
.then(s => {
document.querySelector('iframe')
.contentWindow
.postMessage(JSON.stringify({
action: 'load',
xml: s.xml,
autosave: 1
}), '*');
});
Q3:API 调用失败,提示认证错误
检查清单:
- API Key 是否正确(注意不要有多余空格)
- API Key 是否还有余额/额度
- 网络是否能访问 API 端点
-
AI_PROVIDER的值是否拼写正确
Q4:npx 下载 MCP Server 很慢
解决方法:
bash
# 设置 npm 国内镜像
npm config set registry https://registry.npmmirror.com
# 或临时使用
npx --registry=https://registry.npmmirror.com -y @next-ai-drawio/mcp-server@latest
Q5:如何同时配置多个 MCP Server?
在 servers 对象中添加多个条目即可:
json
{
"servers": {
"drawio": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@next-ai-drawio/mcp-server@latest"],
"env": { "AI_PROVIDER": "deepseek", "AI_MODEL": "deepseek-chat", "DEEPSEEK_API_KEY": "你的Key" }
},
"playwright": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@playwright/mcp@latest"]
},
"filesystem": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@anthropic/mcp-server-filesystem", "/path/to/allowed/dir"]
}
}
}
Q6:如何禁用某个 MCP Server?
不需要删除配置,可以通过命令面板临时禁用:
Ctrl+Shift+P→MCP: List Servers- 选择目标服务器 → 选择
Disable
或在扩展视图的「MCP SERVERS - INSTALLED」区域右键点击服务器 → 选择「禁用」。
Q7:MCP Server 的端口冲突怎么办?
默认端口是 6002。如果被占用,MCP Server 会自动尝试 6002-6020 范围内的端口。
查看实际使用的端口:
bash
# 查看 MCP 日志中的端口信息
grep -r "HTTP server running" ~/.config/Code/logs/ | tail -1
Q8:沙箱模式是什么?要不要开?
沙箱模式(sandboxEnabled: true)在 Linux/macOS 上可用,它能:
- 限制 MCP Server 只能访问你指定的文件路径
- 限制 MCP Server 只能连接你白名单中的网络域名
- 自动批准沙箱内工具调用(不需要每次确认)
建议:如果担心安全性,可以开启;日常开发使用通常不需要。
九、进阶技巧
9.1 团队共享 MCP 配置
将 .vscode/mcp.json 纳入 Git 版本控制,但不要硬编码 API Key:
json
{
"servers": {
"drawio": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@next-ai-drawio/mcp-server@latest"],
"env": {
"AI_PROVIDER": "deepseek",
"AI_MODEL": "deepseek-chat",
"DEEPSEEK_API_KEY": "${input:deepseekApiKey}"
}
}
}
}
每个团队成员在首次使用时输入自己的 API Key。
9.2 使用自定义 AI 端点
如果你使用 AI 代理或中转服务(如 OneAPI、AIHubMix 等),只需设置对应的 BASE_URL:
json
"env": {
"AI_PROVIDER": "openai",
"AI_MODEL": "gpt-4o",
"OPENAI_API_KEY": "你的Key",
"OPENAI_BASE_URL": "https://你的代理地址/v1"
}
9.3 设置同步(跨设备共享)
启用 VS Code 设置同步后,MCP 配置可以在多台设备间同步:
Ctrl+Shift+P→Settings Sync: Configure- 确保 MCP Servers 选项已勾选
9.4 调试 MCP 通信
如需深入调试 MCP 通信过程,可以查看 VS Code 的 MCP 网关日志:
bash
# Linux
cat ~/.config/Code/logs/<日期>/mcpGateway.log
# macOS
cat ~/Library/Application\ Support/Code/logs/<日期>/mcpGateway.log
9.5 编辑器中管理 MCP Server
VS Code 提供了专门的 MCP 编辑器界面:
- 打开
.vscode/mcp.json - 编辑器会显示内联操作按钮(CodeLens):
- ▶️ 启动服务器
- ⏹️ 停止服务器
- 📋 查看日志
- 🔄 重启服务器
9.6 在 Dev Container 中使用
如果你使用 VS Code Dev Container,MCP Server 可以运行在容器内:
json
{
"servers": {
"drawio": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@next-ai-drawio/mcp-server@latest"],
"env": { ... }
}
}
}
将此配置放在工作区级别的 .vscode/mcp.json 中,MCP Server 会在容器内启动。
十、总结
配置流程速查
┌─────────────────────┐
│ 1. 创建 mcp.json │ 项目根目录/.vscode/mcp.json
├─────────────────────┤
│ 2. 填写 servers │ 注意 key 是 "servers"!
├─────────────────────┤
│ 3. 配置 AI 提供商 │ 填写 API Key 和模型
├─────────────────────┤
│ 4. Reload Window │ Ctrl+Shift+P → Reload
├─────────────────────┤
│ 5. 确认信任弹窗 │ 点击「信任」
├─────────────────────┤
│ 6. 测试 │ 对 Copilot 说「画个图」
└─────────────────────┘
核心要点回顾
| 要点 | 说明 |
|---|---|
| 配置文件 | .vscode/mcp.json |
| 顶层 key | "servers" (不是 "mcpServers"!) |
| 通信方式 | stdio(本地进程)或 http(远程服务) |
| 启动命令 | 通常是npx -y <npm包名> |
| 环境变量 | API Key 等敏感信息放在env 中 |
| 生效方式 | 修改配置后必须Reload Window |
| 日志位置 | ~/.config/Code/logs/<日期>/window1/mcpServer.*.log |
三个「不要」
- ❌ 不要 在
mcp.json中硬编码 API Key 并提交到公开仓库 - ❌ 不要 用
mcpServers(那是 Claude Desktop 的格式) - ❌ 不要忘记修改配置后重载 VS Code 窗口
参考资源
Happy Coding with MCP! 🚀