ClawApp H5 移动端方案：让 AI Agent 对话随身而行

2026-04-11 1 views ClawApp

地铁里的告警与即时响应

通勤路上，手机震动——系统发出告警，需要立即调整 Agent 的对话策略。此时手边没有电脑，第三方聊天工具又无法调用平台特有功能。这种困境，你是否经历过？

ClawApp 为此而生：一个运行在浏览器中的移动端聊天客户端，专为 OpenClaw AI Agent 平台设计。无需安装 App，用手机浏览器即可与 AI 智能体实时交互。

技术架构解析

ClawApp 采用纯前端技术栈，这是核心设计决策，直接决定了它的能力边界。

项目结构

ClawApp/
├── src/
│   ├── components/     # UI 组件
│   ├── services/       # API 通信层
│   ├── stores/         # 状态管理
│   └── utils/          # 工具函数
├── public/
│   └── index.html
└── package.json

三层架构设计

层级 职责 技术选型
视图层 消息渲染、输入交互 响应式布局 + CSS 适配
通信层 与 OpenClaw 后端交互 Fetch API + WebSocket
状态层 会话管理、上下文维护 本地存储 + 内存状态

三层各司其职：视图层负责在各种屏幕尺寸上呈现消息列表和输入框；通信层通过 HTTP 请求处理常规消息，通过 WebSocket 建立长连接实现实时对话；状态层则在内存中维护当前会话，同时将关键数据持久化到 localStorage。

这种分层带来的直接好处是零安装、秒启动、全平台兼容。用户只需在浏览器输入地址，无需等待应用市场审核更新，任何支持 HTML5 的移动浏览器都能直接使用。

与原生方案的对比

在移动端实现 AI 对话，市面上存在几种主流路径：

原生 App 功能完整，但 iOS 和 Android 需要分别开发，一次迭代意味着两份工作量。用户侧也面临手动更新的问题。

Electron 移动版 本质上是打包后的 Chromium，内核体积庞大，移动端性能表现不理想。

H5 方案 则走了另一条路：借助浏览器的能力换取轻量化。即开即用，体积为零，更新实时生效。

代价同样存在：H5 无法调用摄像头、蓝牙等原生系统 API，功能完全受限于浏览器能力范围。对于仅需对话交互的场景，这个权衡是值得的。

快速部署指南

本地开发环境

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

# 安装依赖
npm install

# 启动开发服务器
npm run dev

开发服务器默认运行在 http://localhost:5173。在手机和电脑处于同一网络时，用手机浏览器访问电脑 IP 加端口号即可预览。代码修改后会触发热更新，界面自动刷新。

生产环境部署

# 构建生产版本
npm run build

构建产物输出至 dist/ 目录，可部署到任意静态文件服务器：

server {
    listen 80;
    server_name clawapp.yourdomain.com;
    
    location / {
        root /var/www/clawapp/dist;
        try_files $uri $uri/ /index.html;
    }
}

部署完成后，团队成员通过域名即可访问。更新时只需重新构建并替换 dist/ 内容，用户下次刷新页面即使用最新版本，无需任何手动操作。

核心配置说明

客户端接入 OpenClaw 平台前，需在配置文件中指定服务端地址：

// src/config/api.js
export const API_BASE_URL = 'https://your-openclaw-server.com';

export const WS_URL = 'wss://your-openclaw-server.com/ws';

export const SESSION_CONFIG = {
    maxHistoryLength: 100,    // 本地缓存的最大消息数
    autoReconnect: true,      // 连接断开后自动重连
    reconnectInterval: 3000   // 重连间隔（毫秒）
};

移动端适配有两个关键点：视口配置和触摸交互。

<meta name="viewport" 
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

user-scalable=no 防止用户双击缩放页面，避免输入框获得焦点时页面自动缩放的问题。CSS 层面则通过媒体查询和弹性布局适配不同屏幕尺寸。

若你的 OpenClaw 部署在内网，只需将 API_BASE_URL 指向内网地址，数据全程不经过公网。

适用场景

ClawApp 并非为了替代桌面端，而是填补特定场景的空白：

移动办公：出差途中、通勤路上收到告警，手机直接处理紧急需求。

快速验证：产品经理想验证新对话策略的效果，无需打开电脑，直接在手机上测试。

轻量化需求：部分用户追求极简体验，不愿安装额外应用，浏览器就是入口。

如果你的 OpenClaw 实例由 ClawPanel 管理，部署 ClawApp 后可以通过统一面板集中管理两者，效率更高。

项目地址：ClawApp GitHub

现在，用手机浏览器访问你的 OpenClaw 服务地址，体验一下移动端对话的便捷吧。

Back to Blog