dockerBot · phoneCoder · clientCoder — 架构与使用指南中文版本文介绍了一个具备全自动开发和一键部署能力的 AI 智能体系统其三个子项目NestJS 后端dockerBot、Expo / React Native 客户端phoneCoder、Vite / React 网页 IDEclientCoder。只需提供 Git 仓库与访问令牌即可由系统为你完成全栈开发与部署并且支持移动端编程实现随时随地——掏出手机就能完成开发。英文版原文dockerBot-phoneCoder-clientCoder-stack.md一键启动并体验项目https://github.com/jsCanvas/webCursor上游源码仓库GitHub项目仓库地址dockerBotgithub.com/jsCanvas/dockerBotphoneCodergithub.com/jsCanvas/phoneCoderclientCodergithub.com/jsCanvas/clientCoder1. 总体关系客户端 Expo 与 Web宿主机 · 服务端docker exec项目运行时HTTPS/LAN REST SSEREST SSE常见为代理转发dockerBot APINestJS :8080/apiAgent 沙箱Docker 容器Traefik:80 · 预览路由phoneCoderExpo · iOS/Android/WebclientCoderVite · 浏览器 IDE子项目GitHub介绍主要职责dockerBotjsCanvas/dockerBot具备全自动开发与一键部署能力的 AI 智能体系统。只需提供 Git 仓库与访问令牌即可由系统为你完成全栈开发与部署。权威后端工程与 Git、文件、加密模型配置、面向多轮会话的SSE聊天、沙箱容器内执行 Agent、MCP / Skills、通过宿主docker.sock编排 Docker 运行时、配合 Traefik 的预览域名等。phoneCoderjsCanvas/phoneCoder随时随地——掏出手机就能完成开发。官方移动/多端UIExpo六个 Tab 与 dockerBot 路由一一对应同时托管与 clientCoder 共享的 TypeScript 模块api/、hooks/、chat/、types/等。clientCoderjsCanvas/clientCoder支持一键全栈部署的网页智能 IDE。网页 IDE类 VS Code 外壳Monaco、文件树、输出/终端/端口等面板、侧栏聊天并支持//提及通过路径别名phoneCoder/*复用 phoneCoder 逻辑。2. dockerBot后端2.1 是什么dockerBot 是NestJS应用通过 Docker Compose 与以下组件一同部署长期运行的Agent 沙箱镜像Claude Code、路由、工具链等Traefik为预览站点提供形如slug.BASE_DOMAIN的路由。数据持久化采用 SQLite存放在配置的数据目录下phoneCoder_DATA_DIR默认./data。模型凭证等敏感字段使用phoneCoder_ENCRYPTION_KEY64 位十六进制即 32 字节配合AES-256-GCM加密落盘。2.2 前置条件安装Docker Engine / Desktop且具备Compose V2docker compose命令。系统提供openssl./scripts/start.sh在未配置密钥时可用来生成占位替换。2.3 初次配置与启动在dockerBot/目录下cp.env.example .env# 若 phoneCoder_ENCRYPTION_KEY 仍为占位符可先交给 start.sh 自动生成否则请手动填入 32 字节十六进制。./scripts/start.sh# 前台构建镜像并附着到 Compose 日志# ./scripts/start.sh -d # 后台 / detached./scripts/start.sh down# 停止并移除本仓库 Compose 启动的容器REST 基地址http://localhost:8080/api或换成本机局域网 IP /api。Traefik仪表盘地址会因配置略有不同scripts/start.sh的输出里会提示本地配置常见:8081。API 一览、cURL 示例、安全说明及 npm 脚本如npm run start:dev、测试、lint详见dockerBot/design.md。2.4 客户端必填配置项各客户端仅需配置一项以/api结尾的API Base URL例如局域网http://192.168.1.10:8080/api本地开发常用经 Vite 代理http://127.0.0.1:5173/api见 clientCoder §4.43. phoneCoderExpo 多端客户端3.1 是什么phoneCoder 为ExpoReact Native应用目标平台包括iOS、Android 与 Webnpm run web。它仍是共享 TypeScript 模块的源头clientCoder 所依赖的PhoneBotApiClient、SSE 流式钩子useAgentSession、聊天负载与提及、SettingsStorage形状、DTO 类型等均定义于此。3.2 安装与运行cdphoneCodernpminstallnpmrun web# 在笔记本浏览器中最快验证npmstart# 打开 Expo CLI可选真机 / 模拟器3.3 指向后端地址在设置 → dockerBot connectiondockerBot API Base URL填例如http://主机:8080/api。手机访问本机后端时若 dockerBot 跑在电脑上请使用电脑的局域网 IP。配置以 JSON 写入 AsyncStorage键名phoneCoder.client.settings与 Web 端clientCoder逻辑等价参见 §4。3.4 自检npmrun typechecknpmtestTab 与接口对应关系见phoneCoder/design.md。3.5 phoneCoder 界面截图设置项目聊天文件预览Docker 运行时Git4. clientCoder网页 IDE4.1 是什么clientCoder 是一套Vite React 18的单页应用交互布局模仿 IDE活动栏与资源管理器Monaco 编辑 UTF-8 文本底部面板OUTPUT、简易终端条、端口/运行时右侧聊天useAgentSession dockerBotSSE。不复制一层网络/SDKtsconfig与vite.config.ts将phoneCoder/*解析到../phoneCoder/src/*并为构建提供react-native-async-storage/async-storage的极简shim。截图 — clientCoder 网页 IDE示意左侧工程树与运行时入口、居中代码编辑、底部端口及预览链路、右侧由 SSE 驱动的助手及docker-runtime/fullstack-scaffold等上下文技能。4.2 安装与运行cdclientCodernpminstallnpmrun dev# 默认 http://localhost:5173见 vite 配置npmrun buildnpmrun preview4.3 工作台设置交互应用内提供Workspace settings工作台设置对话框连接Connection编辑 API Base URL 并向 dockerBot 校验/保存项目 / 模型与移动端相同的 CRUD 流程全部由 dockerBot 承载。浏览器侧持久化经由WebPersistence写入localStorage键名同样为phoneCoder.client.settings结构上与 AsyncStorage 方案对齐。4.4 Vite 代理推荐本地联动clientCoder/vite.config.ts proxy: { /api → http://127.0.0.1:8080 }开发时可将连接地址设为http://127.0.0.1:5173/api浏览器只请求 Vite 开发服务器由 Vite 将/api/*转发到dockerBot 的8080端口。部分沙箱或对localhost解析有特殊限制的环境优先考虑127.0.0.1。4.5 国际化默认界面语言为英文可选用简体中文zh-CN所选语言会持久保存参见clientCoder/src/i18n/。4.6 共享模块心智图phoneCoder/src/区域clientCoder 中典型用途api/phoneCoderApi.tsHTTP 与 multiparthooks/useAgentSession.tsSSE 聊天流chat/负载拼装、//补全来源screens/screenActions.ts、screens/fileTree.ts工程切换、会话、文件树合并等types/api.tsDTO 类型5. 典型端到端流程5.1 仅本机后端 网页 IDE启动 dockerBot./scripts/start.sh或./scripts/start.sh -d。在 clientCoder「连接」中填写http://127.0.0.1:8080/api若走 Vite 代理则用http://127.0.0.1:5173/api。创建/选择工程→ 绑定模型配置→ 新建会话→ 在聊天里下达任务资源管理器中文件列表由 dockerBot 文件接口驱动。5.2 仅本机后端 手机启动 dockerBot保证:8080可被局域网访问监听0.0.0.0或配合端口映射。phoneCoder设置 → dockerBot API Base URL→http://局域网IP:8080/api。5.3 停止各层进程目标命令 / 操作关掉承载 API 沙箱 Traefik 的 Compose 栈cd dockerBot ./scripts/start.sh down重启栈./scripts/start.sh restart查日志透传给docker compose./scripts/start.sh logs -f api详见脚本头部说明退出 Expo / Vite在对应终端CtrlC6.延伸阅读主题位置dockerBot 特性、cURL、npm 脚本dockerBot/design.mdphoneCoder Tab ↔ API、流式协议说明phoneCoder/design.md内置技能Docker runtime 约定等dockerBot/src/skills/builtin/*.md7.全栈项目开发部署示列7.1 获取项目【Git Access Token】进入github链接点击 头像 -- settings -- Developer Settings -- Fine-grained personal access tokens.创建 Access Token 添加Contents读写Read and write权限【重点】获取到Git Access Token后进入projects页面 创建项目。7.2 多轮对话进行项目开发prompt示列/skill prompt2repo-engineering-rules 根据技能规则创建目录label-2026043014在项目label-2026043014文件目录下按照规范完成开发,以下是我的prompt 帮我生成一个前后端分离的web项目。 生成卖花管理系系统 有个类似于购物车的功能类似还有某个页面最好有个信息表比如选课信息表实现增删改查功能。 首页支持响应式布局着重关注页面UI样式注意页面不要出现样式异常使用UI组件库的弹窗和提示显示界面优美具有设计感。 严格按照UI设计稿还原页面Implement this design from Figma. https://www.figma.com/design/XXXXXXX?node-id418-56098mdev 如果有填写没有可以去掉 前端的技术栈是 vue3viteElement Plus前端用axios发请求遵循restfulAPIdocker映射端口和启动端口必须是3000。 后端使用java Spring Bootdocker映射端口和启动端口必须是8000。 然后帮我生成数据库的代码或者你直接帮我操作数据库数据库采用mysqldocker映射端口为3306。提示词结构全栈开发技能 /skill prompt2repo-engineering-rules规定项目创建目录描述需求UI规范如果有figma设计稿可以使用figma mcp直接导入设计稿前端技术栈要求前端docker映射端口后端技术栈要求后端docker映射端口数据库技术栈要求数据库docker映射端口执行结果如下codingreadmefilespreview7.3 查看文件并启动项目进入Files页面点击项目目录的 docker 图标启动项目启动后点击预览可以查看项目页面7.4 AI自动化测试项目/skill prompt2repo-final-checklist 按照checklist测试全栈项目label-2026043014提示词结构全栈测试技能 /skill prompt2repo-final-checklist规定测试项目目录7.5 进入git页面提交代码