关键词：VSCode、Claude Code、Claude Code Router、Claude Code Chat、第三方API、可视化、OpenAI兼容、Gemini CLI、AI编程、Vibe Coding

---

让 Claude Code像 Copilot 一样丝滑！一个VSCode 免费插件，实现可视化接入第三方 API，0成本0费用， 完整指南

在 Vibe Coding 当道的 2025 年，Claude Code 已成为不少开发者的「外挂大脑」。
然而——

• • 贵：官方 API 价格居高不下

• • 受限：模型只能选 Claude，无法自由切换

• • 体验差：终端敲命令，终究不如侧边栏对话直观

好消息！只需 30 分钟，就能把 Claude Code 变成：

• • ✅ 支持任意 OpenAI 兼容模型（Gemini、DeepSeek、OpenRouter…）

• • ✅ VSCode 侧边栏可视化操作，和 GitHub Copilot 一样顺手

跟着本文，一步步搞定！

---

1 核心思路：Claude Code Router +Claude Code Chat，双剑合璧

组件	作用	开源地址
Claude Code Router	把 Claude 的「请求」转成 OpenAI 格式，再转发给任意第三方模型	musistudio/claude-code-router
Claude Code Chat	VSCode 插件，提供侧边栏对话界面	claude-code-chat

注意：原版 Claude Code Chat 插件仅支持官方 Claude，本文教你使用魔改版本来完全支持 Claude Code Router。

---

2 环境准备(安装CC以及CCR)

依赖	一键安装
Node.js ≥ 20	官网下载
Claude Code	npm i -g @anthropic-ai/claude-code
Router	npm i -g @musistudio/claude-code-router

---

3 配置 Claude Code Router

1. 1. 首次启动配置向导（推荐 UI 方式）需要新建.claude-code-router文件夹和配置  config.json；具体可以参考我上篇文章

2. 零成本也能爽用 Claude Code：3 分钟搞定 5 大免费方案（不翻墙、不限速）

   ccr ui

3. 获取flow免费api，DeepseekV3.1（阿里出品，限时免费）

   

   每日2000次免费调用，多模型可用

4. 

   .输入指令ccr ui出来配置文件信息

5. 选择平台

   

   填写上面平台对应申请的api

   

每项都需要填写，非常重要

1. 2. 验证

   ccr code

   出现熟悉的终端界面即成功。

2. 

---

4 魔改 VSCode 插件：2分钟让 Claude Code Chat 支持 Router

https://github.com/asunnyboy861/claude-code-chat-ccr/tree/main

打开开源项目claude-code-chat-ccr，下载VSIX文件到桌面

1.安装到VSCODE

2.设置

3.ccr start看是否链接正常，若正常就可以直接使用，若无法连接，ccr ui来配置连接设置即可；若ccr ui也无法打开，需要修改端口，然后从新使用命令ccr ui来打开

可以正常使用

5 安装插件（任选其一）

方式	步骤
懒人包	下载 Releases 页面 的 .vsix 直接安装
亲手编译	在 VSCode 按 Ctrl+Shift+P → Extensions: Install from VSIX → 选中上一步生成的文件

---

6 开始使用

1. 1. 打开 VSCode 设置（Ctrl+,）
   搜索 claudePath，填入 ccr code（或 Router 的完整路径）。

2. 2. 侧边栏点击「Claude Code Chat」图标，即可像 Copilot 一样：

   • • 划选代码 → 一键解释 / 重构

   • • 输入需求 → 自动生成代码片段

   • • 任意模型 → 实时切换

---

🔥