【MCP】Claude Code for VS Code 配置阿里云 MCP 工具教程

Claude Code for VS Code 配置阿里云 MCP 工具教程

本教程指导如何在 VS Code 的 Claude Code 插件中配置阿里云 MCP 工具，实现网络搜索和网页解析功能。

1. 背景介绍

1.1 什么是 Claude Code？

Claude Code 是 Anthropic 推出的 AI 编程工具，通过 VS Code 插件或 CLI 为开发者提供 AI 辅助编程能力。

1.2 什么是 MCP？

MCP (Model Context Protocol) 是一个开放标准，允许 AI 工具与外部工具、数据库和 API 进行交互，从而扩展其功能。

1.3 阿里云 MCP 市场

阿里云百炼平台提供了多种预集成的 MCP 服务，如：

WebSearch - 网络搜索
WebParser - 网页解析
Amap Maps - 高德地图
等等...

2. 准备工作

2.1 安装必要软件

软件	要求	说明
VS Code	1.80+	代码编辑器
Claude Code 插件	最新版	VS Code 扩展商店搜索 "Claude Code"
阿里云账号	已注册	用于获取 API Key

2.2 检查环境

bash 复制代码

# 确认 VS Code 已安装 Claude Code 扩展
# 打开 VS Code，按 Ctrl+Shift+X 搜索 "Claude Code"

3. 获取阿里云 MCP 配置信息

3.1 登录阿里云百炼平台

访问阿里云百炼控制台
使用阿里云账号登录

3.2 获取 API Key

进入 API-KEY 管理 页面
创建或复制已有的 API Key
格式：sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

3.3 获取 MCP 服务地址

进入 MCP 服务 页面
找到需要使用的 MCP 服务（如 WebSearch）
查看 外部调用 或集成页面
复制 SSE URL

服务	SSE URL
WebSearch	`https://dashscope.aliyuncs.com/api/v1/mcps/WebSearch/sse`
WebParser	`https://dashscope.aliyuncs.com/api/v1/mcps/WebParser/sse`

4. 配置步骤

4.1 创建配置文件

在项目根目录创建 .mcp.json 文件：

bash 复制代码

touch .mcp.json

4.2 配置文件格式

json 复制代码

{
  "mcpServers": {
    "server-name": {
      "type": "sse",
      "url": "https://dashscope.aliyuncs.com/api/v1/mcps/xxx/sse",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

4.3 配置示例

单服务配置：

json 复制代码

{
  "mcpServers": {
    "qwenimage": {
      "type": "sse",
      "url": "https://dashscope.aliyuncs.com/api/v1/mcps/WebSearch/sse",
      "headers": {
        "Authorization": "Bearer sk-6dbc4cd26f424caa9c4a873d43eb0af5"
      }
    }
  }
}

多服务配置：

json 复制代码

{
  "mcpServers": {
    "qwenimage": {
      "type": "sse",
      "url": "https://dashscope.aliyuncs.com/api/v1/mcps/WebSearch/sse",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    },
    "qwenparser": {
      "type": "sse",
      "url": "https://dashscope.aliyuncs.com/api/v1/mcps/WebParser/sse",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

4.4 添加到 .gitignore

bash 复制代码

# .gitignore
.mcp.json

注意：不要将包含 API Key 的配置文件提交到代码仓库！

5. 测试验证

5.1 重启 VS Code

完全关闭 VS Code（Cmd+Q 或 Alt+F4）
重新打开项目

5.2 测试 WebSearch

让我帮你搜索信息：

复制代码

请使用 qwenimage MCP 工具搜索：OpenAI 最新模型有哪些？

预期输出：

复制代码

搜索结果：
- o3: 2024年12月发布，推理模型
- o3-mini: 2025年1月发布，轻量版
- GPT-4.5: 预计2025年2月发布

5.3 测试 WebParser

让我帮你解析网页：

复制代码

请使用 qwenparser MCP 工具访问：https://httpbin.org/html

预期输出：

复制代码

网页标题：Herman Melville MobyDick
内容摘要：这是《白鲸》小说的开头部分...

6. 常见问题

Q1: MCP 工具没有响应？

解决方法：

检查 API Key 是否正确
确认 SSE URL 是否完整
重启 VS Code

Q2: 返回 403 错误？

可能原因：

API Key 没有开通对应 MCP 权限
MCP 服务配额已用尽

解决方法：登录阿里云控制台检查配额和权限

Q3: 配置不生效？

检查步骤：

确认文件名为 .mcp.json（不是 .mcp-config.json）
确认文件在项目根目录
重启 VS Code

Q4: 多个 MCP 服务冲突？

解决方法：

项目级 .mcp.json 会覆盖用户级配置
建议统一使用项目级配置

7. 进阶用法

7.1 配置级别说明

级别	配置文件	作用范围	优先级
项目级	`.mcp.json`	仅当前项目	高
用户级	VSCode settings.json	所有项目	低

推荐：使用项目级 .mcp.json，便于团队共享。

7.2 常用 MCP 服务列表

服务名称	功能	SSE URL
WebSearch	网络搜索	`/mcp/WebSearch/sse`
WebParser	网页解析	`/mcp/WebParser/sse`
Amap Maps	地图服务	`/mcp/amap-maps/sse`

7.3 环境变量管理

为提高安全性，可以使用环境变量：

json 复制代码

{
  "mcpServers": {
    "qwenimage": {
      "type": "sse",
      "url": "https://dashscope.aliyuncs.com/api/v1/mcps/WebSearch/sse",
      "headers": {
        "Authorization": "Bearer ${DASHSCOPE_API_KEY}"
      }
    }
  }
}

在 .env 文件中：

bash 复制代码

DASHSCOPE_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

参考资料

附录：完整配置文件模板

json 复制代码

{
  "mcpServers": {
    "qwenimage": {
      "type": "sse",
      "url": "https://dashscope.aliyuncs.com/api/v1/mcps/WebSearch/sse",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    },
    "qwenparser": {
      "type": "sse",
      "url": "https://dashscope.aliyuncs.com/api/v1/mcps/WebParser/sse",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

最后更新：2025年1月