我用 Claude Code 搭了一个远程 Claude web：手机发指令，本地电脑自己写代码

最近我用 Claude Code 做了一个自己的 Claude Web 项目。

这个项目的核心目的很简单：

把原本只能在终端里使用的 Claude Code，搬到浏览器页面上。

然后通过 Cloudflare 内网穿透，把本地电脑上的 Claude Code 暴露到公网。

这样我就可以在手机上发指令，让本地电脑自己写代码。

这不是一个复杂的大项目，但它解决了我一个非常真实的使用痛点。

我现在的使用方式是：

手机浏览器
   ↓
Cloudflare Tunnel 公网地址
   ↓
本地电脑上的 Claude Web
   ↓
本地电脑上的 Claude Code
   ↓
本地项目代码目录

也就是说，手机只是操作入口，真正干活的是我本地电脑上的 Claude Code。

---

一、为什么要做这个项目？

Claude Code 本身很好用。

正常情况下，我们会在项目目录里打开终端，然后执行：

cd your-project
claude

Claude Code 就可以基于当前项目目录进行代码分析、文件修改、生成文件、解释项目结构等操作。

但是我的使用场景有点特殊。

我把 Claude Code 的模型请求代理到了 DeepSeek。这样做有几个好处：

1. 成本更低；
2. 可以灵活切换模型；
3. 仍然可以继续使用 Claude Code 这个工具；
4. 适合个人开发者长期高频使用。

但是代理之后也带来了一个问题：

Claude 官方手机 App 不能直接连接我这个代理后的 Claude Code 环境。

终端里能用，电脑上能用，但是手机上不方便用。

如果我人在外面，突然想到一个需求，想让 Claude Code 帮我改一下本地项目代码，就很麻烦。

理论上可以用 SSH 远程连电脑，但手机上用 SSH 操作 Claude Code，体验并不好。

所以我干脆自己做了一个 Web 页面：

让 Claude Code 继续运行在本地电脑上，但操作入口变成浏览器页面。

这样我只需要打开手机浏览器，就可以和本地电脑上的 Claude Code 对话。

---

二、这个项目真正解决的是什么问题？

这个项目不是重新开发一个 AI 编程工具。

Claude Code 已经是一个很强的 AI 编程工具了，我没有必要重新造轮子。

我真正想解决的是这些问题：

1. Claude Code 只能在终端里用，手机上不方便；
2. 代理、API、模型参数每次配置都比较麻烦；
3. 多个对话不好恢复；
4. 想远程控制本地电脑写代码；
5. 想让本地电脑作为自己的 AI 编程工作站。

所以这个项目的定位更像是：

给 Claude Code 做一个 Web 控制台。

原来的使用流程是：

用户
   ↓
终端
   ↓
Claude Code
   ↓
API
   ↓
大模型

现在变成了：

用户
   ↓
浏览器页面
   ↓
Claude Web
   ↓
Claude Code
   ↓
API
   ↓
大模型

Claude Web 只是中间的操作层。

真正理解项目、修改代码、执行开发任务的，还是 Claude Code。

---

三、项目部署方式：本地电脑 + Cloudflare 内网穿透

这个项目有一个关键点：

Claude Web 不是部署在云服务器上，而是部署在我的个人本地电脑上。

为什么不部署到云服务器？

原因很简单：Claude Code 要操作项目文件。

我的项目代码都在本地电脑里，比如：

/Users/xxxx/Documents

如果我把 Claude Web 部署到云服务器上，那么 Claude Code 能操作的就是服务器上的文件，而不是我本地电脑里的项目代码。

这就不符合我的真实需求。

所以我选择把 Claude Web 部署在本地电脑上。

然后再通过 Cloudflare Tunnel 做内网穿透，把本地服务暴露到公网。

最终访问链路是：

手机浏览器
   ↓
Cloudflare Tunnel 域名
   ↓
本地电脑 Claude Web 服务
   ↓
本地电脑 Claude Code
   ↓
本地项目目录

这样做之后，我就可以在手机浏览器里打开自己的 Claude Web，然后输入需求。

比如：

帮我检查一下当前项目的登录逻辑

或者：

把首页按钮样式调整一下，整体更接近苹果官网的风格

然后真正执行任务的是我本地电脑上的 Claude Code。

所以这个项目最有价值的地方不是"手机写代码"，而是：

手机发指令，本地电脑自动写代码。

---

四、项目登录页

因为这个项目最终会通过 Cloudflare Tunnel 暴露到公网，所以不能直接裸奔。

我先做了一个简单的访问密码页面。

用户打开页面后，需要输入访问密码，登录之后才能进入 Claude Code Chat 页面。

这个页面虽然简单，但非常必要。

因为这个项目背后连接的是 Claude Code，而 Claude Code 是有能力操作本地项目文件的。

如果没有访问控制，相当于把本地电脑的代码操作入口暴露到了公网。

目前我只是先做了简单的密码访问。

后续如果长期使用，安全这一块还需要继续加强，比如：

1. 接入 Cloudflare Access；
2. 增加登录态过期；
3. 增加 IP 白名单；
4. 增加操作日志；
5. 敏感配置后端保存，不暴露给前端。

这个项目是自用工具，可以先把核心链路跑通，但安全问题不能忽视。

---

五、主页面：把终端对话搬到浏览器

登录之后，就会进入 Claude Code Chat 页面。

这个页面的主要作用是把原来终端里的对话，改成浏览器里的聊天界面。

原本我们是在终端里输入：

帮我修改这个页面

现在可以直接在浏览器输入框里发送。

页面底部输入框支持：

Enter 发送
Shift + Enter 换行

这更符合普通聊天工具的使用习惯。

对我来说，这个功能最大的价值是手机端可用。

终端适合电脑开发，但不适合手机操作。

手机上打开一个网页，输入一句需求，让本地电脑的 Claude Code 继续干活，这个体验明显更顺。

---

六、设置工作目录：让 Claude Code 知道操作哪个项目

Claude Code 和普通聊天机器人不一样。

普通聊天机器人只需要回答问题。

但 Claude Code 是要进入项目目录，读取文件、分析代码、修改文件的。

所以工作目录非常关键。

比如我当前配置的是：

/Users/xiajing/Documents

这意味着 Claude Code 当前可以围绕这个目录进行操作。

如果我要切换项目，就需要切换工作目录。

所以我在设置页里做了一个工作目录配置。

这个功能看起来很小，但对 Claude Code 这类工具非常重要。

因为：

工作目录决定了 Claude Code 当前能看到哪个项目，也决定了它能修改哪些文件。

如果没有这个配置，每次都要在终端里手动 cd 到不同目录，手机端使用就会很麻烦。

页面化之后，我可以直接在设置里切换目录。

后续还可以继续升级成"项目列表"：

情绪分析小程序：/Users/xiajing/project/emotion
量化交易项目：/Users/xiajing/project/quant
博客系统项目：/Users/xiajing/project/blog

点击项目名称，自动切换工作目录和对应会话。

这样它就不只是一个聊天页面，而是一个真正的 AI 项目工作台。

---

七、代理设置：解决网络访问问题

因为我经常需要走代理，所以设置页里也做了代理配置。

比如：

export https_proxy=http://127.0.0.1:7897 http_proxy=http://127.0.0.1:7897

这个配置解决的是实际使用中的高频问题。

在使用 Claude Code 或第三方 API 的时候，经常会遇到网络环境问题。

如果每次都要手动在终端里 export 代理变量，很麻烦。

尤其是我现在把操作入口放到了手机浏览器上，更不希望每次还要去电脑终端里处理这些配置。

所以我把代理配置放到了页面里。

这样每次启动或恢复 Claude Code 会话时，可以自动带上代理参数。

这类功能不是技术难点，但对工具体验影响很大。

---

八、API Base URL 和 Token 配置：适配 DeepSeek 代理

因为我把 Claude Code 的模型请求代理到了 DeepSeek，所以还需要配置 API Base URL。

比如：

https://api.deepseek.com/anthropic

Claude Code 原本是面向 Anthropic Claude 的工具。

但如果第三方模型服务兼容 Anthropic API 格式，就可以通过修改 Base URL 和 Token 的方式接入。

这样我可以继续使用 Claude Code 的工具能力，同时把底层模型切换成 DeepSeek。

这个设计的意义在于：

Claude Code 负责工具能力，DeepSeek 负责模型推理，Claude Web 负责远程入口。

这样三个东西各做各的事：

Claude Code：负责项目理解和代码操作
DeepSeek：负责模型能力和成本控制
Claude Web：负责浏览器访问和配置管理

这也是我现在比较认可的一种个人开发方式：

不一定所有东西都从零做，而是把已有工具重新组合成适合自己的工作流。

当然，API Token 是敏感信息。

如果这个项目只是本地自用，可以先简单处理。

但如果后续要长期部署，Token 一定不能直接暴露在前端，也不能随便写进日志。

至少要做到：

1. 后端保存；
2. 前端脱敏展示；
3. 日志不打印完整 Token；
4. 配置文件不要上传到 Git；
5. 必要时支持环境变量注入。

---

九、模型配置：主模型和子模型分开设置

设置页里还支持配置主模型和子模型。

比如：

主模型：deepseek-v4-pro[m]
Haiku / 子代理模型：deepseek-v4-flash

这里的设计主要是为了适配不同任务的模型需求。

简单理解：

• 主模型负责复杂任务；
• 子模型负责轻量任务；
• 不同模型可以在效果和成本之间做平衡。

比如代码分析、架构理解、复杂修改，可以交给更强的主模型。

一些简单的辅助任务，则可以交给更便宜、更快的模型。

这对个人开发者很重要。

因为 AI 编程工具一旦高频使用，模型成本会变成一个实际问题。

如果所有任务都走最贵模型，长期下来成本不低。

所以支持模型配置，本质上是为了做成本控制。

---

十、对话记录和恢复：解决上下文连续性问题

Claude Code 的使用场景经常不是一次性问答。

更多时候是：

1. 我先让它理解项目；
2. 再让它修改某个功能；
3. 修改完之后继续调整；
4. 中途可能切换到另一个任务；
5. 过一会儿又想恢复之前的上下文。

所以对话记录和恢复功能很关键。

部署好了

这个页面可以看到历史会话，并且可以点击恢复。

这解决了一个很实际的问题：

不用每次重新解释项目背景，也不用从头开始描述需求。

不过这个功能后续还需要继续优化。

因为对话越长，体积越大。

所以后面可以做一个"上下文压缩"功能。

比如把完整对话压缩成：

当前项目背景：
已完成的功能：
最近修改的文件：
还没解决的问题：
用户偏好：
下一步任务：

这样恢复会话时，不一定要完整加载所有历史消息，而是加载关键摘要。

这对长期开发项目会很有用。

---

十一、这个项目的本质：不是聊天工具，而是远程 AI 编程控制台

很多人看到这种页面，可能第一反应是：

这不就是套了一个聊天 UI 吗？

但我觉得它的价值不在聊天 UI 本身。

它真正的价值是：

把本地 Claude Code 的能力远程化、页面化、配置化。

以前我必须坐在电脑前，在终端里操作 Claude Code。

现在我可以：

1. 手机打开网页；
2. 输入开发需求；
3. 请求通过 Cloudflare Tunnel 回到本地电脑；
4. 本地 Claude Code 读取项目；
5. 本地 Claude Code 修改代码；
6. 我再回到电脑上检查结果。

这个流程的关键不是"手机适合写代码"。

说实话，手机不适合写代码。

但是手机很适合发指令。

所以这个项目的合理定位是：

手机负责指挥，本地电脑负责执行。

这就像给自己的电脑装了一个远程 AI 编程入口。

---

十二、为什么这个项目适合个人开发者？

这个项目给我的一个启发是：

AI 编程时代，个人开发者不一定要每次都做完整产品，也可以先做自己的效率工具。

以前我可能会觉得，只有面向用户的产品才值得做。

但现在我越来越感觉，个人工具也很重要。

因为很多真实需求不是来自市场调研，而是来自自己每天的高频痛点。

比如我这个项目的需求就很具体：

1. 我想用 Claude Code；
2. 我想接 DeepSeek 降低成本；
3. 我想手机能访问；
4. 我想让本地电脑继续操作项目；
5. 我想不用每次手动配代理；
6. 我想能恢复历史会话。

这些需求加起来，就自然形成了 Claude Web 这个项目。

它不一定适合商业化，但它很适合提升自己的开发效率。

而且这种项目还有一个好处：

它不是纯自嗨，因为它确实解决了我自己的真实问题。

---

十三、后续可以继续优化的方向

目前这个项目还只是一个自用版本，后面还有很多可以继续优化的地方。

1. 更强的安全控制

现在只是简单访问密码。

但因为项目通过 Cloudflare Tunnel 暴露到了公网，所以安全一定要重视。

后续可以增加：

Cloudflare Access
IP 白名单
登录态过期
操作日志
敏感配置加密
Token 脱敏展示

尤其是这个项目背后连接的是本地电脑和项目代码目录，安全等级应该比普通聊天工具更高。

---

2. 多项目管理

现在是手动配置工作目录。

后续可以升级成项目列表。

比如：

项目 A：情绪分析小程序
项目 B：量化交易系统
项目 C：博客文章工具

每个项目保存自己的：

工作目录
代理配置
模型配置
历史会话
项目规则

这样就可以从一个简单的 Claude Web，变成一个多项目 AI 开发工作台。

---

3. 会话标题和摘要

现在对话记录主要按时间展示。

后面可以自动生成标题和摘要。

比如：

优化登录页面 UI
修复答案之书接口未调用问题
重构情绪分析保存逻辑
接入钉钉机器人通知

这样历史记录会更容易找。

否则只有时间和消息数量，时间久了之后很难判断每个会话具体在做什么。

---

4. 上下文压缩

Claude Code 的历史对话会越来越长。

后面可以做上下文压缩。

比如每次会话结束时，自动生成一份总结：

本次修改内容：
涉及文件：
已完成：
未完成：
下次继续时需要注意：

这样恢复会话时，可以优先加载摘要，而不是完整加载所有历史内容。

---

5. 增加文件变更展示

既然 Claude Code 会修改项目文件，那 Web 页面可以进一步展示文件变化。

比如：

修改了哪些文件
新增了哪些文件
删除了哪些文件
diff 内容是什么

这样我在手机上也能快速判断 Claude Code 做了什么。

如果发现明显不对，可以及时中断或调整。

---

6. 增加任务模式

现在主要还是聊天模式。

后续可以加任务模式。

比如：

任务名称：优化首页 UI
目标描述：调整首页布局，让视觉更简洁
限制条件：不要改接口，不要影响登录逻辑
验收标准：移动端显示正常

这样 Claude Code 执行任务时会更清晰，不容易跑偏。

---

十四、总结

这个 Claude Web 项目，本质上是我为了自己使用 Claude Code 更方便，做的一个远程 AI 编程控制台。

它解决了我的几个实际问题：

1. Claude Code 代理到 DeepSeek 后，手机 App 不方便连接；
2. 终端操作不适合手机使用；
3. 代理、API、模型参数需要页面化管理；
4. Claude Code 必须操作本地项目目录；
5. 我希望在手机上发指令，让本地电脑自己写代码。

所以我最后做出的方案是：

Claude Code 运行在本地电脑
Claude Web 提供浏览器页面
Cloudflare Tunnel 暴露公网访问
手机浏览器作为远程入口
DeepSeek 作为底层模型服务

这一套组合下来，就变成了一个属于自己的远程 AI 编程工作台。

对我来说，它最大的价值不是技术多复杂，而是使用链路变顺了：

想到需求
   ↓
手机打开 Claude Web
   ↓
输入任务
   ↓
本地电脑 Claude Code 执行
   ↓
回到电脑检查代码

以前是人必须坐在电脑前，打开终端，进入目录，配置代理，再启动 Claude Code。

现在是手机发指令，本地电脑自己干活。

这就是这个项目最核心的意义。

AI 编程时代，个人开发者的效率工具会越来越多。