ClawApp 2.0: 手机端 H5 聊天客户端让 AI 智能体对话随身可及

痛点场景:离开电脑就断线?

作为 OpenClaw 平台的重度用户,你可能遇到过这种情况:通勤路上想查看昨晚与 AI 智能体的对话记录,或者在外开会时需要实时调取 AI 的分析结果,却只能守在电脑前。传统的桌面客户端或响应式网页版在移动端体验并不理想——加载慢、操作别扭、消息推送不及时。

ClawApp 2.0 正是为解决这个痛点而生:它是一个基于 H5 技术的轻量级移动端聊天客户端,让你用手机浏览器就能流畅地与 OpenClaw 平台上的 AI 智能体进行对话。

核心架构:H5 + WebSocket 的轻量化方案

ClawApp 采用经典的前后端分离架构,前端是完全独立的 H5 单页应用,后端通过 WebSocket 与 OpenClaw 平台通信。

┌─────────────────────────────────────────────┐
│            ClawApp 架构                      │
├─────────────────────────────────────────────┤
│  移动浏览器 (H5)  ──WebSocket──>  OpenClaw   │
│        ↓                        ↓           │
│   Service Worker         AI Agent Engine     │
│   本地缓存                智能体核心         │
└─────────────────────────────────────────────┘

关键设计点包括:

  • 离线消息缓存:使用 IndexedDB 在本地存储最近 200 条对话记录,网络恢复后自动同步
  • 增量消息拉取:只请求上次会话后的新消息,而非全量拉取,降低流量消耗
  • 智能重连机制:网络中断时自动尝试重连,间隔从 1s 指数递增到 30s 封顶

与同类工具的差异化

对比市面上的 AI 聊天移动端方案,ClawApp 有几个显著优势:

特性 ClawApp 第三方 App 网页版
安装方式 扫码即用 应用商店下载 需收藏书签
更新维护 无需用户操作 需手动更新 依赖浏览器缓存
系统资源 < 2MB 包体积 通常 30-50MB 受限于浏览器进程
多智能体切换 内置标签页切换 部分支持 需重新登录
历史记录同步 本地优先 + 云同步 纯云端 纯云端

快速部署指南

部署 ClawApp 非常简单,只需要一台可访问 OpenClaw API 的 Web 服务器:

# 克隆项目
git clone https://github.com/xxx/ClawApp.git
cd ClawApp

# 安装依赖
npm install

# 配置环境变量
cat > .env << EOF
OPENCLAW_API_URL=https://your-openclaw-server.com
WEBSOCKET_ENDPOINT=wss://your-openclaw-server.com/ws
DEFAULT_AGENT=your-agent-id
EOF

# 构建生产版本
npm run build

# 部署到 Nginx
sudo cp -r dist/* /var/www/clawapp/

配置 Nginx 反向代理以支持 WebSocket:

location /ws {
    proxy_pass http://127.0.0.1:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_read_timeout 86400;
}

核心代码示例

连接 OpenClaw 智能体的最小代码示例:

import { ClawClient } from 'clawapp-sdk';

const client = new ClawClient({
  apiUrl: 'https://your-openclaw-server.com',
  wsEndpoint: 'wss://your-openclaw-server.com/ws'
});

// 连接指定智能体
await client.connect('agent-001');

// 发送消息并获取流式响应
const stream = await client.sendMessage('分析一下今天的股市趋势', {
  stream: true,
  temperature: 0.7
});

stream.on('chunk', (text) => {
  console.log('Received:', text);
});

适用场景

ClawApp 特别适合以下使用场景:

  • 移动办公族:经常外出但需要随时与 AI 交互
  • 多智能体管理者:同时维护多个 AI 智能体,需要快速切换
  • 边缘网络用户:网络条件不稳定,需要良好的离线容错能力
  • 快速原型验证:临时想在手机上测试 AI 智能体效果,无需安装任何应用

如果你正在使用 OpenClaw 平台管理 AI 智能体,ClawApp 提供了一个几乎零成本的手机端入口,让 AI 对话真正做到随身可及。