免费玩转 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 工作流集成,支持插件系统和自定义功能扩展,以增强功能性和灵活性

picture.image

用这个工具啊,能让现有的那些模型也实现 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 工具啦。

picture.image

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

2.工具安装

首先我们需要在开源项目上找到这个开源项目https://github.com/musistudio/claude-code-router/blob/main/README\_zh.md

picture.image

安装

1.安装 Node.js

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

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


 
 
 
 
   
curl -fsSL https://deb.nodesource.com/setup\_lts.x| sudo bash -  
sudo apt-get install -y nodejs  
node --version

picture.image

确保电脑上node安装完成。

安装 Claude Code

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


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

picture.image

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

安装Claude Code Router


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

picture.image

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

配置

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


 
 
 
 
   
{  
  "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"  
}  
}

你也可以配置多个其他模型厂商的模型,具体配置可以参考https://github.com/musistudio/claude-code-router/blob/main/ui/config.example.json

picture.image

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

使用 Router 运行 Claude Code

使用 router 启动 Claude Code:

命令行窗口模式


 
 
 
 
   
ccr code

picture.image

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

UI 模式

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


 
 
 
 
   
ccr ui

picture.image

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

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

picture.image

picture.image

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

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

picture.image

picture.image

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

picture.image

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

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

3.项目实战

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

打地鼠游戏

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

picture.image

我们启动ccr code

picture.image

我的问题


 
 
 
 
   
你的任务创建一个简单的网页版“打地鼠”游戏。以下是游戏的详细规则:  
  1.游戏界面是一个4x4的网格。  
2.每隔1-2秒,会有一只“地鼠”随机出现在一个格子里。  
3.玩家点击“地鼠”即可得分,分数需要实时显示。  
4.游戏包含一个“开始/重新开始”按钮和一个30秒的倒计时。  
  
在编写代码时,要确保结构清晰,逻辑正确,并且代码具有良好的可读性。使用vue3来实现上述功能

picture.image

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


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

picture.image

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

我们运行下面的命令


 
 
 
 
   
npm run dev

picture.image

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

一个打地鼠游戏就出来了

picture.image

网站复刻

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

picture.image

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

picture.image

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

picture.image

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

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

picture.image

img

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

picture.image

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


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

picture.image

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

picture.image

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

picture.image

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

picture.image

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

picture.image

常见问题也可以点开

picture.image

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

picture.image

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

4.总结

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

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

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

超算挑战赛实战!AI 一键生成中医药科普短视频,青少年轻松学药材

dify案例分享-100% 识别率!发票、汇票、信用证全搞定的通用票据识别工作流

dify案例分享-AI 助力初中化学学习:用 Qwen Code+Dify 一键生成交互式元素周期表网页

dify案例分享-解锁 AI 搜索新玩法:Dify 秘塔搜索工作流搭建教程与效果展示

AI 驱动开发:20 分钟搞定智能发票申请单系统

0
0
0
0
评论
未登录
看完啦,登录分享一下感受吧~
暂无评论