Claude Code Viewer 与 Claude Code Router 联动

## 简介

本文演示如何在懒猫微服中同时部署 Claude Code Router 与 Claude Code Viewer，并把 Claude Code 的请求平滑转发到 DeepSeek 等第三方模型。按照下述步骤操作后，就能在浏览器里获得完整的 Claude Code 体验，同时由 Router 统一管理模型、路由和密钥。

## Claude Code Router

https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.claudecoderouter

Claude Code Router 是 musistudio 开源的中间层，用来拦截并重写 Claude Code 的 API 请求。它支持为不同场景配置路由规则、在多家模型供应商（OpenRouter、DeepSeek、Ollama、Gemini 等）间自由切换，同时还提供请求/响应转换、`ccr model` CLI 管理以及插件系统，方便你把自定义的推理流程串在一起。

首次打开应用时需要设置 `APIKEY`，默认值是 `123456`。该值会在后续作为 `ANTHROPIC_AUTH_TOKEN`，因此请先确认好再保存。

![image.png](https://dl.playground.lazycat.cloud/guidelines/799/0a2c1719-861a-4763-8869-a894f4fae5bb.png "image.png")

部署成功后的界面如下，我们将在这里配置供应商和路由：

![image.png](https://dl.playground.lazycat.cloud/guidelines/799/22f2c581-788f-42cd-8aa1-7bdbf2d44f1b.png "image.png")

以 DeepSeek 为例，按照下列步骤添加供应商：

1. 点击「从模板导入」，在列表中选择 `deepseek`，并填入自己的 DeepSeek API Key（`sk-xxx`），若没有可在 [DeepSeek 控制台](https://platform.deepseek.com/api_keys) 申请。

   ![image.png](https://dl.playground.lazycat.cloud/guidelines/799/9c2f948b-29bb-4388-a2a2-60f7bf42ad7a.png "image.png")

2. 在同一个对话框中向下滚动至「模型转换器」，把 `deepseek-chat` 与 `deepseek-reasoner` 的转换器都设置为 `tooluse`，确保 Claude Code 的工具调用语义能够正确映射。

   ![image.png](https://dl.playground.lazycat.cloud/guidelines/799/867b04cc-7082-415a-8401-4e311e16f1ea.png "image.png")

3. 切换到右侧「路由」面板，选择刚才配置的 DeepSeek 模型作为默认路由。

   ![image.png](https://dl.playground.lazycat.cloud/guidelines/799/16634e42-7fbc-47e9-bb86-cef14fab76c0.png "image.png")

4. 点击保存后，服务会自动重启，并在容器内监听 `3456` 端口。

## 端口转发

为了让其他应用访问 Router，需要借助「局域网端口转发工具」。

https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.forward

已知 Claude Code Router 运行在容器内的 `3456` 端口，我们可以按下图配置端口转发，把容器端口暴露到 `host.lzcapp`：

![image.png](https://dl.playground.lazycat.cloud/guidelines/799/3db8f7e4-8e17-40c6-b958-1ad67255cbf1.png "image.png")

- 局域网入口类型可根据自身网络环境选择。
- 配置完成后，其它应用就可以通过 `http://host.lzcapp:3456` 调用 Claude Code Router。

## Claude Code Viewer

https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.claudecodeviewer

Claude Code Viewer 由 kimuson 开源，是一个完整的网页版 Claude Code 客户端。它可以启动或恢复会话、实时查看任务输出、查看会话历史、上传文件、执行 Git Diff/Commit/Push，并内置会话调度器与多语言界面，适合远程环境中集中管理 Claude Code 项目。

在懒猫微服中部署 Claude Code Viewer 时，需要把 Router 的地址和密钥传给它：

![image.png](https://dl.playground.lazycat.cloud/guidelines/799/d7cbf65d-eeec-4f6e-82b3-434427432ff7.png "image.png")

- `ANTHROPIC_BASE_URL`：填写 `http://host.lzcapp:3456`，即前文转发后的 Claude Code Router 地址，所有 Claude 请求都会先进入 Router。
- `ANTHROPIC_AUTH_TOKEN`：填写部署 Router 时设置的 `APIKEY`，用于鉴权。

部署成功后，可以直接在 Viewer 中创建项目：

![image.png](https://dl.playground.lazycat.cloud/guidelines/799/1e8f3f4a-9a7e-4ad0-ac26-00dc1802216b.png "image.png")

完成初始化并点击「设置项目」，即可进入熟悉的 Claude Code 工作台：

![image.png](https://dl.playground.lazycat.cloud/guidelines/799/45da7d9e-4fcf-44cf-bd3d-1aa01f040b4f.png "image.png")

至此，Claude Code Viewer 与 Claude Code Router 已成功串联，所有 Claude Code 请求都会通过 Router 路由到 DeepSeek，从而在浏览器中获得稳定、统一的编码体验。