ClawApp 2.0 详解：手机浏览器里随时唤醒 AI 智能体

一个真实的移动场景

周一早高峰，你挤在地铁里突然想起：上周五和 AI 智能体讨论的项目方案，当时达成的结论是什么？

桌面端太远，官方 App 太重——光是冷启动就要等上二三十秒。这种割裂感，是很多 AI Agent 用户每天都在经历的。

ClawApp 2.0 正是为这种场景设计的。它是一个运行在手机浏览器里的 H5 应用，让你在任何移动设备上随时唤醒 AI 智能体。全程无需下载安装，扫码或输入地址就能用。

H5 还是原生 App？

在 ChatGPT、Claude 等主流 AI 产品中，移动端适配普遍被放在次要位置。很多产品虽然有 App，但 H5 体验往往只是"能用"而非"好用"。这背后反映的是一个技术选型问题：原生 App 和 H5 各有适用场景。

原生 App 的优势在于系统级性能和推送能力，但代价也明显：iOS 和 Android 需要两套代码，用户要经历下载、安装、授权这一长串流程。对于聊天这种强交互场景，H5 的劣势几乎可以忽略——ClawApp 通过 WebSocket 保持双向长连接，消息延迟控制在毫秒级，实际体验并不逊色。

更重要的是，OpenClaw 用户的设备分布广泛，一套 H5 代码可以在任何浏览器里运行。从维护成本角度看，统一入口远优于维护多套原生代码。

技术架构

ClawApp 2.0 的前端基于 React 构建，充分利用组件化开发模式，对话气泡、输入框、聊天列表等核心 UI 组件都可以复用。

核心技术选型包括：

React — 声明式 UI 框架，组件状态管理清晰，适合维护复杂的对话逻辑。聊天消息的发送、接收、流式渲染，都通过 React 的状态机来驱动。

WebSocket — 替代传统的轮询方案，建立双向长连接后客户端无需反复请求，服务端有新消息直接推送。服务端压力降低，消息时效性提升。

IndexedDB — 本地消息缓存。当网络不稳定时，用户发送的消息会暂存到 IndexedDB，联网后自动同步。地铁穿越隧道、郊区信号弱这类场景下，消息不会丢失。

响应式布局 — CSS 媒体查询适配不同屏幕尺寸。竖屏聊天、横屏阅读长文本，手机和平板上都能正常使用。

前端与 OpenClaw 后端通信遵循 JSON 规范，消息体包含 sender、content、timestamp 等字段。WebSocket 连接建立后，客户端首先推送一个 auth 握手包，服务端验证通过后建立会话。

# 快速部署 ClawApp
git clone https://github.com/openclaw/clawapp.git
cd clawapp
npm install

# 指定 OpenClaw 服务地址
export OPENCLAW_ENDPOINT=http://your-openclaw-server:8080

# 启动开发服务器
npm run dev

开发环境启动后访问 http://localhost:3000，用手机浏览器打开即可。生产部署时执行 npm run build，将生成的静态文件上传到任意 Web 服务器或 CDN。

体验差异

和桌面端相比，ClawApp 在移动场景下有几个明显优势：

实际使用时，对话列表的加载速度很快。点进任意对话，消息历史立即呈现，滚动浏览几乎没有卡顿。输入框支持多行文本，发送后消息立刻出现，AI 回复以流式方式逐步显示——和桌面端几乎无感。

另一个差异在于专注度。ClawApp 只做聊天一件事，没有文件管理、设置面板这些干扰项，界面干净利落。

适用场景

ClawApp 适合以下几类用户：

移动办公群体 — 经常在外办公，需要随时通过手机和 AI 智能体交互，查看任务进度或获取建议。

多设备切换用户 — 桌面聊到一半，换手机继续，对话历史自动同步，无需手动操作。

轻量需求用户 — 不想装 App，只想在浏览器里完成对话，用完即走。

如果你已经在使用 OpenClaw 平台，ClawApp 是一个零成本的移动端补充。没有学习成本，打开地址就能用。