网站导航
> 技术文档 > VSCode中通过Claude Code Router和Claude Code Chat可视化的使用claude code（支持调用第三方api）_claude-code-chat vscode

VSCode中通过Claude Code Router和Claude Code Chat可视化的使用claude code（支持调用第三方api）_claude-code-chat vscode

网友: 技术文档 2025-09-02 19:09:45

很多人应该都用过Claude Code了，除了命令行版本，VSCode也有官方插件。虽然Claude Code功能强大，但价格偏高，模型选择受限，而且在VSCode中操作命令行始终不够顺手，体验上不如Copilot自然。不过现在这两个问题都有了不错的解决方案：

首先，GitHub上的Claude Code Router提供了OpenAI兼容API接入Claude Code的便捷方式，完美解决了第三方API接入的问题。

其次，VSCode插件Claude Code Chat为Claude Code提供了类似Copilot的直观操作界面。但需要注意的是，这个插件默认只能直接调用Claude Code，并不支持Claude Code Router。好在它开源了源码，我们可以通过简单修改配置文件并重新打包的方式，使其兼容Claude Code Router。

下面我会先简单介绍这几个项目，并详细说明安装配置流程。

1 Claude Code

Claude Code 是 Anthropic 推出的创新型 Vibe 编程工具。与 Cursor 等代码代理工具类似，它支持开发者在命令行终端中进行交互式编程，通过 AI 辅助显著提升编码效率和体验。

该工具现已原生支持 Windows 系统，无需依赖 WSL。
安装只需在命令行执行：

npm install -g @anthropic-ai/claude-code

安装完成后，直接输入 claude 命令即可启动使用。

2 Claude Code Router

Anthropic 为 Claude Code 提供了自定义 API 功能，允许用户配置 Claude Code 调用兼容 Anthropic API 格式的第三方模型，从而实现更灵活经济的应用场景。

开源项目 claude-code-router 正是基于这一特性开发的中间层工具。它能将 Claude Code 发出的 Anthropic API 请求转换为 OpenAI API 格式，并转发至任意兼容 OpenAI API 的模型（如 OpenRouter、Google Gemini、DeepSeek 等），最后将响应转换回 Anthropic 格式返回给 Claude Code。

2.1 安装

确保已安装 Claude Code 后，通过命令行执行以下安装命令：

npm install -g @musistudio/claude-code-router

2.2 配置方法

提供两种配置方式：

  1. 手动创建并配置 ~/.claude-code-router/config.json 文件
  2. 通过 UI 界面进行配置（推荐）

详细配置说明请参阅项目帮助文档。
VSCode中通过Claude Code Router和Claude Code Chat可视化的使用claude code（支持调用第三方api）_claude-code-chat vscode

完成配置后，在命令行输入 ccr code 即可运行，界面与 Claude Code 完全一致，但实际调用的是之前配置的第三方模型。

3 Claude Code Chat

Claude Code Chat 是专为 VS Code 设计的智能插件，安装过程十分便捷。只需在 VS Code 扩展商店搜索\"Claude Code Chat\"，点击安装即可完成。不过我们暂不安装此插件，后续将对其进行修改以支持 Claude Code Router。
VSCode中通过Claude Code Router和Claude Code Chat可视化的使用claude code（支持调用第三方api）_claude-code-chat vscode

4 修改Claude Code Chat以支持Claude Code Router

大致步骤：

  1. 修改extension.ts的claude路径
    在Claude Code Chat仓库的src/extension.ts文件中，补充以下变量
const claudePathWindows = config.get<string>(\'claudePath\', \'claude\');

同时，将所有启动进程的claude路径修改为claudePathWindows。
例如，
VSCode中通过Claude Code Router和Claude Code Chat可视化的使用claude code（支持调用第三方api）_claude-code-chat vscode
此外，在package.json文件中，新增一个控制claudeCodeChat.claudePath的设置项

\"claudeCodeChat.claudePath\": {\"type\": \"string\",\"default\": \"claude\",\"description\": \"Path to Claude executable on Windows or non-WSL environments\"},
  1. 打包插件
    完成修改后，将项目打包为VSIX插件：

注意：建议安装Visual Studio Enterprise的C++环境（勾选Node.js开发选项），避免编译错误

在命令行中依次执行以下四个安装步骤：

npm installnpm run compilenpm install -g vscevsce package

四个步骤的简要说明：

  1. 安装项目依赖
  2. 编译JavaScript代码
  3. 安装VSIX打包工具
  4. 生成VSIX安装包

完成后，项目根目录会生成.vsix扩展安装文件。

  1. 安装扩展
    在VS Code中
  • 按Ctrl+Shift+P
  • 输入\"Extensions: Install from VSIX\"
  • 选择生成的.vsix文件

或通过插件市场：

  • 点击右上角三个点
  • 选择\"Install from VSIX\"选项
    VSCode中通过Claude Code Router和Claude Code Chat可视化的使用claude code（支持调用第三方api）_claude-code-chat vscode
  1. 开始畅玩：
    至此，只需修改插件设置中的第一个Claude Path参数为ccr code，就可以使用接入第三方api的Claude Code Chat啦。如果希望更改模型，需要到Claude Code Router中调整。模型调用完全取决于Claude Code Router的配置，thinking mode下会调用Claude Code Router配置的思考模型。
    VSCode中通过Claude Code Router和Claude Code Chat可视化的使用claude code（支持调用第三方api）_claude-code-chat vscode
    VSCode中通过Claude Code Router和Claude Code Chat可视化的使用claude code（支持调用第三方api）_claude-code-chat vscode
    实际效果
    这里我用的是中转api，所以模型名称会有时间后缀
    VSCode中通过Claude Code Router和Claude Code Chat可视化的使用claude code（支持调用第三方api）_claude-code-chat vscode

已经打包好的扩展
2025.8.16 更新，插件设置添加了claude路径配置，允许在claude与ccr code之间随时切换

如果上述步骤出现了问题，可以直接使用我预先打包好的扩展
此外，我已将修改后的插件源码开源在Github上，欢迎查阅。

2025.8.16 补充

Gemini 开源了 Gemini CLI 项目，直接对标 Claude Code。该工具提供每分钟 60 次、每日 1000 次的免费调用额度。若想在 Claude Code 中使用 Gemini CLI 的 Gemini 2.5 Pro 模型，可通过 CLIProxyAPI 将本地的Gemini CLI转换为 OpenAI 兼容的 API 接口，然后修改 Claude 环境变量中的 base_url 和 api_key 即可调用。

修改 Claude API Key 和 Base URL 方法：

PowerShell 命令：

[Environment]::SetEnvironmentVariable(\"ANTHROPIC_AUTH_TOKEN\", \"dummy\", \"User\")[Environment]::SetEnvironmentVariable(\"ANTHROPIC_BASE_URL\", \"http://localhost:端口号\", \"User\")

CMD 命令：

setx ANTHROPIC_AUTH_TOKEN \"dummy\"setx ANTHROPIC_BASE_URL \"http://localhost:端口号\"

注意：
请勿通过 Claude Code Router 调用 CLIProxyAPI 提供的 API 端口，以避免Claude Code → Router → CLIProxyAPI的多级调用链条。

网络标签：

相关问题