在 Visual Studio Code (VSCode) 中配置 MCP(Model Context Protocol)

前提条件

  1. 安装 VSCode:确保已安装最新版本的 VSCode(建议使用 1.99 或以上版本,支持 MCP)。
  2. 安装 GitHub Copilot 扩展:MCP 通常与 GitHub Copilot 的代理模式(Agent Mode)结合使用,确保已安装并登录 GitHub Copilot。
  3. 启用 MCP 支持:在 VSCode 设置中,确保 chat.mcp.enabled 已启用(默认启用)。
  4. 安装必要工具:根据 MCP Server 的运行需求,可能需要安装 Node.js、Python 或 Docker 等工具。

配置 MCP Server 的步骤

  1. 选择配置方式

VSCode 提供了三种方式来添加 MCP Server:

  • 工作区设置:通过在工作区创建 .vscode/mcp.json 文件配置,适合团队共享。
  • 用户设置:通过 VSCode 的用户设置(settings.json)配置,适用于所有工作区。
  • 自动发现:启用自动发现功能,检测其他工具(如 Claude Desktop)中定义的 MCP Server。

以下以最常用的 工作区设置 为例,介绍如何配置。


  1. 创建 .vscode/mcp.json 文件

  2. 打开工作区

    • 在 VSCode 中打开你的项目文件夹(工作区)。
  3. 创建配置文件

    • 在工作区根目录下创建 .vscode 文件夹(如果不存在)。
    • 在 .vscode 文件夹中创建 mcp.json 文件。
  4. 添加 MCP Server 配置

    • 编辑 mcp.json,添加 MCP Server 的配置。以下是一个示例配置,用于添加 Perplexity MCP Server:

json

{
  "inputs": [
    {
      "type": "promptString",
      "id": "api-key",
      "description": "Perplexity API Key",
      "password": true
    }
  ],
  "servers": {
    "perplexity": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-perplexity"],
      "env": {
        "PERPLEXITY_API_KEY": "${input:api-key}"
      }
    }
  }
}

说明

  • inputs:定义启动服务器时需要输入的变量(如 API 密钥),VSCode 会在首次启动时提示输入,并安全存储。
  • servers:定义 MCP Server 的配置。
    • type:连接类型,通常为 stdio(标准输入/输出)或 sse(服务器发送事件)。
    • command:运行服务器的命令(如 npx、docker 或自定义命令)。
    • args:命令的参数,指定要运行的 MCP Server 包。
    • env:环境变量,用于传递 API 密钥等敏感信息。

注意

  • 确保 command 和 args 指向的 MCP Server 包已正确安装(通过 npm install -g 或本地安装)。
  • 仅使用来自可信来源的 MCP Server,因为它们可能在你的机器上运行任意代码。

  1. 通过命令面板添加 MCP Server

如果你不想手动编辑 mcp.json,可以使用 VSCode 的命令面板:

  1. 打开命令面板:
    • 按 Ctrl+Shift+P(或 Cmd+Shift+P on Mac)。
  2. 输入并选择 MCP: Add Server。
  3. 选择 MCP Server 类型(如 Perplexity、GitHub 等)。
  4. 提供服务器信息(如命令、参数、环境变量)。
  5. 选择存储位置:
    • Workspace Settings:将配置添加到 .vscode/mcp.json。
    • User Settings:将配置添加到全局 settings.json。
  6. 保存后,VSCode 会自动应用配置。

  1. 配置用户设置(全局)

如果你希望 MCP Server 在所有工作区生效,可以编辑用户设置:

  1. 打开 VSCode 设置:
    • 按 Ctrl+,(或 Cmd+, on Mac)打开设置界面。
    • 或者通过命令面板运行 Preferences: Open Settings (JSON)。
  2. 编辑 settings.json,添加以下内容:

json

{
  "mcp": {
    "servers": {
      "my-mcp-server": {
        "type": "stdio",
        "command": "npx",
        "args": ["-y", "@modelcontextprotocol/server-example"]
      }
    }
  }
}
  1. 保存后,配置将应用于所有工作区。

  1. 验证和使用 MCP Server

  2. 检查服务器状态

    • 运行命令 MCP: List Servers(通过命令面板)。
    • 查看已配置的服务器列表,确认服务器状态(绿色小灯表示运行正常)。
  3. 使用代理模式

    • 确保 GitHub Copilot 的代理模式已启用(在设置中启用 chat.agent.enabled)。
    • 打开聊天视图,选择 Agent 模式。
    • 输入任务,代理会自动调用 MCP Server 提供的工具(如文件操作、API 调用等)。
  4. 管理工具

    • 在聊天视图中点击“工具”图标,启用或禁用特定工具。
    • 使用 # 引用特定工具,如 #github 调用 GitHub MCP Server 的工具。

  1. 针对 Windows 的额外注意事项

在 Windows 系统中,某些 MCP Server 配置可能需要调整:

  • 命令修改:将 command 从 npx 改为 cmd,并在 args 中添加 /c 和 npx。示例:

json

{
  "mcpServers": {
    "sequential-thinking": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@modelcontextprotocol/server-sequential-thinking"]
    }
  }
}
  • 环境变量:确保环境变量(如 APPDATA)正确设置。例如:

json

{
  "mcpServers": {
    "sequential-thinking": {
      "command": "cmd",
      "args": ["/c", "set APPDATA=C:\\Users\\YourUsername\\AppData\\Roaming&&", "npx", "-y", "@modelcontextprotocol/server-sequential-thinking"]
    }
  }
}
  • 安装依赖:确保 Node.js 已安装,并通过 npm install -g 安装所需的 MCP Server 包。

  1. 故障排查
  • 服务器未运行
    • 检查聊天视图中的错误通知,点击“显示输出”查看日志。
    • 运行 MCP: List Servers,选择服务器并查看输出日志。
  • 命令失败
    • 确认 command 和 args 正确,尝试在终端手动运行命令以调试。
    • 确保所需工具(如 npx、docker)已安装。
  • 连接问题
    • 如果使用 sse 连接,检查服务器 URL 是否正确且端口未被占用。
  • 配置错误
    • 使用 VSCode 的 IntelliSense 检查 mcp.json 的语法错误。
    • 参考官方配置格式文档:https://code.visualstudio.com/docs/editor/mcp

  1. 示例:配置 GitHub MCP Server

以下是一个配置 GitHub MCP Server 的示例:

  1. 获取 GitHub 个人访问令牌:
    • 登录 GitHub,进入 Settings > Developer settings > Personal access tokens > Fine-grained tokens。
    • 创建令牌,设置必要的权限(如访问仓库)。
    • 复制生成的令牌。
  2. 配置 mcp.json:

json

{
  "mcpServers": {
    "github": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your_token_here"
      }
    }
  }
}
  1. 保存并验证:
    • 运行 MCP: List Servers,确保 GitHub 服务器显示为绿色。
    • 在代理模式下输入 #github list repositories,测试服务器功能。

推荐的 MCP Server

以下是一些常用的 MCP Server,供参考:

  • @modelcontextprotocol/server-filesystem:提供文件系统操作工具。
  • @modelcontextprotocol/server-github:管理 GitHub 仓库、拉取请求等。
  • @modelcontextprotocol/server-perplexity:集成 Perplexity AI 搜索功能。
  • @executeautomation/playwright-mcp-server:支持浏览器自动化。

探索更多服务器:https://github.com/modelcontextprotocol


注意事项

  • 安全性:仅从可信来源安装 MCP Server,审查配置和代码,避免泄露敏感信息。
  • 性能:MCP Server 可能占用系统资源,建议根据需要选择工具。
  • 更新:MCP 生态系统正在快速发展,定期检查 VSCode 和 MCP Server 的更新。
### 在 VSCode配置和使用高德 MCP 插件或功能 要在 VSCode配置和使用高德 MCP 插件或功能,需要遵循以下方法来确保正确的安装与运行环境。以下是详细说明: #### 1. 安装 Node.js 和 npm 高德 MCP 服务依赖于 Node.js 环境,因此首先需要安装 Node.js 和 npm(Node.js 的包管理工具)。可以通过以下命令检查是否已安装: ```bash node -v npm -v ``` 如果未安装,请访问 [Node.js 官方网站](https://nodejs.org/) 下载并安装最新版本[^2]。 #### 2. 配置高德 MCP 服务 根据提供的 JSON 配置内容,高德 MCP 服务可以通过 `npx` 命令直接运行。以下是具体步骤: - 确保安装了 `@amap/amap-maps-mcp-server` 包。可以使用以下命令进行全局安装: ```bash npm install -g @amap/amap-maps-mcp-server ``` - 如果不想全局安装,也可以通过 `npx` 命令临时运行该包。 #### 3. 配置环境变量 在运行高德 MCP 服务之前,需要设置环境变量 `AMAP_MAPS_API_KEY`,这是高德地图 API 的密钥。可以通过以下方式设置: - 在命令行中临时设置: ```bash export AMAP_MAPS_API_KEY=您的高德apikey ``` - 或者在 VSCode 的 `.env` 文件中添加: ```env AMAP_MAPS_API_KEY=您的高德apikey ``` #### 4. 启动高德 MCP 服务 使用以下命令启动高德 MCP 服务: ```bash npx @amap/amap-maps-mcp-server -y ``` 此命令将根据默认配置启动服务,并监听指定端口[^3]。 #### 5. 在 VSCode 中集成高德 MCP 功能 为了在 VSCode 中更好地使用高德 MCP 功能,可以采取以下措施: - **安装相关插件**:搜索并安装与高德地图或地理信息相关的插件,例如 `GeoJSON Viewer` 或其他支持地图可视化的扩展。 - **调试配置**:在 VSCode 的 `launch.json` 文件中添加调试配置,以便直接从 IDE 启动高德 MCP 服务。示例配置如下: ```json { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "启动高德MCP服务", "runtimeExecutable": "npx", "args": ["@amap/amap-maps-mcp-server", "-y"], "env": { "AMAP_MAPS_API_KEY": "您的高德apikey" } } ] } ``` #### 6. 测试服务 启动服务后,可以通过浏览器访问默认地址(如 `http://localhost:8080`)以验证服务是否正常运行[^4]。 --- ### 注意事项 - 确保 API 密钥正确无误,否则可能导致服务无法启动。 - 如果遇到权限问题,可能需要以管理员身份运行命令行工具。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MonkeyKing.sun

对你有帮助的话,可以打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值