你是否遇到过这些场景周五晚上 10 点你正躺在沙发上刷手机突然收到紧急消息线上有个 bug能帮忙看看吗你打开电脑启动 IDE等待项目加载……5 分钟过去了。或者这样你在咖啡馆用 iPad 办公想让 AI 帮你生成一段代码但 Claude Code CLI、Codex 这些工具都需要本地环境iPad 根本跑不起来。如果有一个工具能让你在任何设备上通过浏览器就能调用 AI 编程助手会怎样今天要介绍的 WebCode就是为了解决这个痛点而生的。WebCode 是什么一句话定位把 Claude Code、Codex 等 AI 编程助手装进浏览器随时随地智能办公。WebCode 是一个开源的在线 AI 工作平台让你可以通过 Web 浏览器远程控制各种 AI CLI 助手——无论你在地铁上、咖啡馆里还是躺在沙发上只要有浏览器就能完成编程、文档处理、需求分析等各种工作。【此处配产品主界面截图】三大核心场景解决真实痛点场景一移动编程紧急修 bug 不再慌痛点周末在外面突然收到线上故障通知但手边只有手机。解决方案打开手机浏览器访问 WebCode输入问题描述AI 助手实时分析代码、生成修复方案甚至可以直接在工作区修改文件。整个过程不到 3 分钟。效果从回家再说到立即解决响应速度提升 10 倍。场景二远程开发轻设备也能高效工作痛点出差只带了 iPad想写代码但本地环境跑不起来。解决方案WebCode 把计算密集型任务放在服务器端前端只负责交互。你的 iPad、Chromebook 甚至手机都能变成强大的开发终端。效果设备限制消失随时随地进入工作状态。场景三多 AI 助手协同一个平台搞定所有需求痛点Claude Code 擅长代码生成Codex 擅长需求分析但切换工具很麻烦。解决方案WebCode 集成了 Claude Code CLI、Codex CLI、OpenCode CLI 等主流工具一个界面切换使用会话历史自动保存甚至支持会话恢复刷新页面也不丢失上下文。效果从工具切换到能力组合工作效率提升 3 倍。五大功能亮点细节见真章1. 流式输出实时看到 AI 思考过程不是等 AI 全部生成完才显示而是像打字机一样逐字输出。你能实时看到 AI 的思考过程随时中断或调整方向。技术实现基于 Server-Sent Events (SSE) 的流式传输配合防抖优化即使 AI 每秒输出 1000 个字符界面也不会卡顿。2. 会话恢复刷新页面也不丢失上下文传统 Web 应用刷新页面后对话历史全部丢失。WebCode 通过三层存储架构前端 IndexedDB 后端数据库 内存缓存实现了真正的会话恢复。用户体验你可以关闭浏览器第二天打开继续对话AI 还记得你昨天说了什么。3. 会话隔离工作区多任务并行不冲突每个会话都有独立的工作目录你可以同时进行多个项目文件互不干扰。系统会自动清理 24 小时未使用的工作区避免磁盘占满。安全保障沙箱环境 命令白名单 输入转义三重防护确保安全。4. 移动端深度适配不是简单的响应式解决了 Safari 的 100vh 问题虚拟键盘弹出时输入框不被遮挡、刘海屏适配、触摸目标尺寸优化最小 44x44px等细节问题。测试覆盖iPhone SE 到 iPhone Pro Max、iPad Mini 到 iPad Pro、各尺寸 Android 手机全部测试通过。5. 代码高亮预览Monaco Editor 加持集成了 VS Code 同款编辑器 Monaco Editor支持语法高亮、代码折叠、智能提示等功能。生成的代码可以直接预览、下载或复制。技术实现揭秘如何让多个 AI 助手和平共处这里分享三个核心设计思路技术爱好者可以深入了解数据流统一输出格式问题Codex 输出 JSONL 格式Claude Code 输出 stream-json 格式OpenCode 又是另一套格式如何统一处理解决方案适配器模式。为每个 CLI 工具创建一个适配器把它们的输出统一转换成标准格式。上层业务逻辑只需要处理标准格式不需要关心具体工具的差异。设计巧思适配器不仅负责解析输出还负责构建命令包括会话恢复参数实现了完全解耦。处理逻辑持久化进程 智能清理问题每次启动 CLI 进程需要 5-10 秒初始化 Python 环境、加载模型用户体验很差。解决方案持久化进程。启动一个长期运行的 CLI 进程用户每次发送消息时复用这个进程启动时间从 10 秒降到 1 秒。设计巧思通过定时清理机制自动回收超过一定时间未使用的进程避免资源泄漏。输出性能优化三板斧问题AI 输出速度很快频繁更新 DOM 导致页面卡顿。解决方案防抖每 100ms 批量更新一次 UI而不是每个字符都更新虚拟滚动只渲染可见区域的内容其他用占位符代替Markdown 缓存避免重复渲染相同内容效果性能提升 10 倍以上即使输出几千行代码也不卡顿。三步快速开始30 秒完成部署第一步克隆项目git clone https://github.com/shuyu-labs/WebCode.git cd WebCode第二步一键启动docker compose up -d第三步访问配置打开浏览器访问http://localhost:5000首次访问会自动进入设置向导按提示完成配置即可。就这么简单不需要安装 Node.js、Python、配置环境变量Docker 会自动处理一切。开源社区与未来规划项目状态开源协议AGPLv3商业授权请联系作者技术栈Blazor Server .NET 8 Tailwind CSS Monaco Editor维护状态活跃开发中每周更新GitHub 地址https://github.com/shuyu-labs/WebCode在线试用https://webcode.tree456.com/账号 treechat / 密码 treechat123路线图暗示支持更多 AI 工具GitHub Copilot CLI、Qwen CLI、Gemini CLIWebSocket 双向通信支持中断 AI 输出分布式部署支持更大规模用户多语言界面英文、日文等贡献入口欢迎提交 Issue 和 Pull Request无论是 bug 反馈、功能建议还是代码贡献都非常欢迎。立即行动三种参与方式 给项目点个 Star如果你觉得这个项目有价值请在 GitHub 上给个 Star这是对开源作者最大的鼓励GitHub 地址https://github.com/shuyu-labs/WebCode 在线试用不想安装直接访问在线演示版https://webcode.tree456.com/账号treechat密码treechat123写在最后这个项目的初衷很简单——让 AI 编程助手真正做到随时随地。不应该因为设备限制、环境配置等问题阻碍我们使用 AI 提升效率。如果你也认同这个理念欢迎关注、试用、贡献。让我们一起打造更好的 AI 工作平台