免费玩转 AI 编程!Claude Code Router + Qwen3-Code 实战教程

1.前言

Claude Code Router 是一个开源的工具,旨在增强和扩展 Anthropic 的 Claude Code 功能,特别是在 AI 编码工作流中的应用。它允许用户将请求路由到不同的 AI 模型,从而提供更灵活、高效和成本效益的解决方案。

Claude Code Router 的核心功能包括:

  • 路由请求到不同模型:用户可以将请求路由到多种 AI 模型,如 OpenRouter、DeepSeek、Ollama、Google Gemini、Volcengine 等,以适应不同任务的需求 。
  • 自定义配置 :用户可以通过配置文件(如 \~/.claude-code-router/config.json)定义路由规则、API 密钥、模型提供商和模型选择逻辑,以满足特定任务需求 。
  • 动态模型切换:用户可以在运行时动态切换模型,以适应不同任务类型和性能需求 。
  • 成本优化:通过智能路由和模型选择,Claude Code Router 可以帮助用户降低 AI 服务的使用成本,尤其是在处理长上下文或高推理任务时 。
  • 集成与扩展:支持与 GitHub Actions、CI/CD 工作流集成,支持插件系统和自定义功能扩展,以增强功能性和灵活性

​ 用这个工具啊,能让现有的那些模型也实现 Claude Code 的功能。目前它支持不少主流模型厂商的模型,比如 OpenRouter 那边的 google/gemini-2.5-pro、anthropic/claude-sonnet-4、anthropic/claude-3.7-sonnet 这些;还有 DeepSeek 的 deepseek-chat 和 deepseek-reasoner;本地用的 ollama 提供的模型也能支持;另外像谷歌的 Gemini 系列、火山引擎、魔搭社区、阿里百炼这些平台的模型也都行。而且啊,魔搭社区现在每天有 2000 次免费的模型调用机会。咱们正好可以借着这个福利,用它平台上的 qwen3-code 模型,这样就能免费用上 Claude Code 工具啦。

下面就带大家手把手教大家使用者工具。

2.工具安装

首先我们需要在开源项目上找到这个开源项目github.com/musistudio/...

安装

1.安装 Node.js

如果电脑上没有安装node.js 我们首先需要安装。这里我们使用linux 平台上安装。

进入到/mnt/f/work/code/AIcode/aiother 目录下。输入下面命令

arduino 复制代码
curl -fsSL https://deb.nodesource.com/setup_lts.x| sudo bash -
sudo apt-get install -y nodejs
node --version

确保电脑上node安装完成。

安装 Claude Code

我们输入下面的命令安装Claude Code

sql 复制代码
npm install -g @anthropic-ai/claude-code
claude --version

看到上面的画面 说明我们的Claude Code安装完成。

安装Claude Code Router

bash 复制代码
npm install -g @musistudio/claude-code-router
ccr -v

看到上面的画面 说明我们的ccr 也安装完成。

配置

接下来我们配置一下config.json。配置文件路径在`~/.claude-code-router/,这里我们使用魔搭社区提供的免费api 所以提供简单的配置

json 复制代码
{
  "LOG": true,
  "CLAUDE_PATH": "",
  "HOST": "127.0.0.1",
  "PORT": 3456,
  "API_TIMEOUT_MS": "600000",
  "PROXY_URL": "",
  "transformers": [],
  "Providers": [
    {
      "name": "modelscope",
      "api_base_url": "https://api-inference.modelscope.cn/v1/chat/completions",
      "api_key": "魔搭社区APIkey",
      "models": [
        "Qwen/Qwen3-Coder-480B-A35B-Instruct",
        "Qwen/Qwen3-235B-A22B-Thinking-2507",
        "ZhipuAI/GLM-4.5"
      ],
      "transformer": {
        "use": [
          [
            "maxtoken",
            {
              "max_tokens": 65536
            }
          ]
        ],
        "Qwen/Qwen3-Coder-480B-A35B-Instruct": {
          "use": [
            "enhancetool"
          ]
        },
        "Qwen/Qwen3-235B-A22B-Thinking-2507": {
          "use": [
            "reasoning"
          ]
        }
      }
    }
  ],
  "Router": {
    "default": "modelscope,Qwen/Qwen3-Coder-480B-A35B-Instruct",
    "background": "modelscope,Qwen/Qwen3-Coder-480B-A35B-Instruct",
    "think": "modelscope,Qwen/Qwen3-Coder-480B-A35B-Instruct",
    "longContext": "modelscope,Qwen/Qwen3-Coder-480B-A35B-Instruct",
    "longContextThreshold": 60000,
    "webSearch": "modelscope,Qwen/Qwen3-Coder-480B-A35B-Instruct"
  }
}

你也可以配置多个其他模型厂商的模型,具体配置可以参考github.com/musistudio/...

以上配置完成后,我们就看启动这ccr工具了

使用 Router 运行 Claude Code

使用 router 启动 Claude Code:

命令行窗口模式

css 复制代码
ccr code

​ 看到上面画面我们就可以使用了。

UI 模式

为了获得更直观的体验,您可以使用 UI 模式来管理您的配置:

复制代码
ccr ui

​ 这将打开一个基于 Web 的界面,您可以在其中轻松查看和编辑您的 config.json 文件。

​ 打开这个UR链接我们可以看到下面的页面

接下来我们验证下是否可行

我们首先查看下魔搭社区提供的当天免费额度。

我们查看一下模型的消耗,

​ 这里我们看到模型的消耗了,不过这里不确定是否是本次消耗。不过确定是消耗了。

​ 通过上面的方法我们就可以实现使用魔搭社区提供的免费的qwen3-code 模型来使用claude-code 这种命令行方式的vibe-coding开发了,哈哈是不是挺爽的。

3.项目实战

接下来我们使用claude-code+qwen3-code 实现一个小项目。

打地鼠游戏

我们这里使用腾讯开源的CloudBase-AI-ToolKit 开源项目提供的cloudbase-vue-template 模版项目来构建项目。我们下载项目解压到本地

我们启动ccr code

我的问题

yaml 复制代码
你的任务创建一个简单的网页版"打地鼠"游戏。以下是游戏的详细规则:
  1. 游戏界面是一个 4x4 的网格。
  2. 每隔 1 - 2 秒,会有一只"地鼠"随机出现在一个格子里。
  3. 玩家点击"地鼠"即可得分,分数需要实时显示。
  4. 游戏包含一个"开始/重新开始"按钮和一个 30 秒的倒计时。

在编写代码时,要确保结构清晰,逻辑正确,并且代码具有良好的可读性。使用vue3来实现上述功能

接下来我们让他编写文档部署步骤

复制代码
如何启动这个项目,请给出详细安装部署文档,请使用中文

结果很快给我代码使用的文档包括项目结构都给我列出来了。

我们运行下面的命令

shell 复制代码
npm run dev

浏览器打开http://127.0.0.1:5174/

一个打地鼠游戏就出来了

网站复刻

接下来我们把这个网站复刻出来

上面是一个网站的截图,我们把这个截图发给GLM-4.5V模型,让它把这个网站需求整理出来。我们使用硅基流动提供的网页版GLM-4.5V模型。

这个GLM-4.5V模型能力还是非常强的很快通过多模态模型能力把复刻网站内容写出来

如果没有硅基的小伙伴可以去这个地址cloud.siliconflow.cn/i/e0f6GCrN 新户可以送14元。

接下来我们把文档内容保存markdown文档。

这需求文档看起来非常棒 1分钟不到给我写出来了。我们把文档复制到当前项目目录下。

接下来我们输入下面的提示词

shell 复制代码
请基于复刻网站需求文档.md需求文档的内容,结合CLAUDE.md代码框架的结构,按照需求文档使用vue3来实现来生成网站内容。

qwen3-code 模型继续阅读代码生成任务清单

经过20分钟左右AI 帮我把活干完了。

我们运行一下 这下把我惊艳到了,下面是首页。

点击首页上方的特点居然还有字页面内容

常见问题也可以点开

产品的定价好像也是有模有样的

哈哈小小qwen3-code 把这个项目给复刻出来了,效果还真不错。

4.总结

今天主要带大家详细了解并实践了借助 Claude Code Router 工具,结合魔搭社区提供的免费模型调用福利,实现 AI 辅助编码开发的全过程。该工具作为一款灵活的 AI 模型路由工具,凭借多模型适配、自定义配置、动态切换以及成本优化等核心能力,为开发者提供了高效且经济的编码解决方案,尤其通过魔搭社区的免费额度,让普通用户也能轻松体验 Claude Code 式的命令行开发流程。

项目通过与 AI 对话的方式完成代码生成与项目构建,极大简化了开发流程 ------ 从 4x4 网格的打地鼠游戏,到完整网站的复刻,均能通过自然语言指令快速实现,支持前端交互逻辑、页面布局设计以及项目部署文档生成等核心开发环节。无论是从需求描述到代码输出,还是从功能调试到最终运行,整个过程都高效直观,显著降低了传统开发模式的时间成本。

这种 AI 辅助编码的方案为开发者快速验证想法、完成项目原型提供了理想选择,尤其适合需要高效实现前端交互、快速复刻页面的场景。它的实践展示了 AI 在编程领域的实用价值,有望成为开发者日常开发中的得力助手。感兴趣的小伙伴可以按照文中的步骤安装配置工具,借助魔搭社区的免费模型调用机会亲自尝试,体验 AI 驱动的高效编码带来的便捷。今天的分享就到这里结束了,我们下一篇文章见。

相关推荐
kymjs张涛11 分钟前
零一开源|前沿技术周刊 #15
前端·javascript·面试
reacx12 分钟前
# 第三章:状态管理架构设计 - 从 Zustand 到 React Query 的完整实践
前端
古夕13 分钟前
Vue3 + vue-query 的重复请求问题解决记录
前端·javascript·vue.js
不知名程序员第二部14 分钟前
前端-业务-架构
前端·javascript·代码规范
Bug生产工厂14 分钟前
React支付组件设计与封装:从基础组件到企业级解决方案
前端·react.js·typescript
小喷友14 分钟前
阶段三:进阶(Rust 高级特性)
前端·rust
华仔啊15 分钟前
面试官:请解释一下 JS 的 this 指向。别慌,看完这篇让你对答如流!
前端·javascript
Strayer15 分钟前
Tauri2.0打包构建报错
前端
小高00716 分钟前
💥💥💥前端“隐藏神技”:15 个高效却鲜为人知的 Web API 大起底
前端·javascript
flyliu17 分钟前
再再次去搞懂事件循环
前端·javascript