教程

OpenClaw WebChat 完全指南:浏览器中直连 Gateway 的原生聊天界面

OpenClaw WebChat 功能完整解析:WebChat 与其他渠道的本质区别(直连 Gateway WebSocket,无需中间服务器)、macOS/iOS SwiftUI 原生 App 的 WebChat 功能、通过浏览器访问 WebChat 的配置方式、认证配置(token/password/trusted-proxy)、会话历史机制(chat.history 边界说明)、chat.inject 注入助手消息、远程访问 WebChat 的 SSH 隧道方案,以及 WebChat 与 Telegram/WhatsApp 渠道的使用场景对比。

2026/3/224分钟 阅读ClaudeEagle

WebChat 是 OpenClaw 的内置聊天界面——不依赖 Telegram/WhatsApp 等外部平台, 直接在浏览器或原生 App 中连接到你的 Gateway。

WebChat 的本质

其他渠道(Telegram/WhatsApp)的消息路径: 你 → Telegram 服务器 → OpenClaw Gateway → AI WebChat 的消息路径: 你(浏览器/App)→ Gateway WebSocket → AI

关键区别:

  • WebChat 直连 Gateway,没有第三方中间服务器
  • 消息完全在你的设备和 Gateway 之间传输
  • 延迟更低,隐私更强

访问方式

macOS/iOS 原生 App(推荐)

OpenClaw macOS App 和 iOS App 内置 SwiftUI 原生聊天界面, 直接通过 WebSocket 连接到 Gateway:

macOS:菜单栏图标 → Chat → 打开聊天窗口 iOS:OpenClaw App → Chat 标签页

原生 App 的 WebChat 比浏览器版本体验更流畅, 支持语音输入、图片发送等原生功能。

浏览器访问

Gateway 启动后,浏览器直接访问控制面板,其中包含 WebChat:

本地访问:http://127.0.0.1:18789 → 左侧导航 → Chat

远程访问(SSH 隧道):

bash
# 建立 SSH 隧道
ssh -N -L 18789:127.0.0.1:18789 user@your-server

# 然后浏览器访问
open http://127.0.0.1:18789

认证配置

WebChat 连接 Gateway 需要认证(默认必须,包括本地连接):

Token 认证

json
{
  "gateway": {
    "auth": {
      "mode": "token",
      "token": "your-secure-token"
    }
  }
}

第一次访问时,浏览器会提示输入 token。

Password 认证

json
{
  "gateway": {
    "auth": {
      "mode": "password",
      "password": "your-password"
    }
  }
}

Trusted Proxy 认证(反向代理场景)

通过 Nginx 等反向代理添加认证后,Gateway 信任代理的身份头:

json
{
  "gateway": {
    "auth": {
      "mode": "trusted-proxy"
    }
  }
}

对应 Nginx 配置:

nginx
location / {
    auth_basic "OpenClaw";
    auth_basic_user_file /etc/nginx/.htpasswd;
    proxy_set_header X-Forwarded-User $remote_user;
    proxy_pass http://127.0.0.1:18789;
}

会话历史机制

WebChat 的历史记录有以下特点:

  • 历史来自 Gateway:不是本地存储,Gateway 重启后历史依然存在
  • 长消息截断:过长的历史条目会被 Gateway 截断([chat.history omitted: message too large])
  • 网关不可达时只读:Gateway 离线时,WebChat 进入只读模式,只能查看历史
  • 中断的回复保留:如果 AI 回复中途被中断,已生成的部分内容仍会保存到历史记录
会话历史查询 API(内部用): chat.history - 获取历史记录 chat.send - 发送消息 chat.inject - 直接注入助手消息(不触发 AI 运行)

chat.inject:注入助手消息

chat.inject 让你把一条消息直接插入对话历史, 不经过 AI 处理——适合系统通知、定时提醒等场景:

SOUL.md 中可以配置主动推送消息: 当有重要事件时,通过 chat.inject 推送到 WebChat, 用户打开界面就能看到,无需等待下次提问

WebChat 与其他渠道的对比

对比维度WebChatTelegramWhatsApp
隐私性⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
消息延迟最低(直连)低低
移动端体验iOS 原生 App⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
断网支持需要 Gateway 在线离线也能发(等 Gateway 回来)同左
通知推送需要 App 后台运行✅ 系统推送✅ 系统推送

建议:

  • 在自己的电脑旁边工作 → WebChat(低延迟、隐私)
  • 外出时随时查看 → Telegram(系统推送,不错过消息)
  • 两者都配置,按场景切换

控制面板 Tools 面板

WebChat 同时附带工具面板,列出当前 Agent 可用的所有工具:

浏览器 → http://127.0.0.1:18789/agents → Tools 标签 → 看到所有 core + plugin 工具 → 可以修改 Agent 配置

工具标注:

  • core:内置工具(Read/Write/Bash/Exec 等)
  • plugin:<id>:插件提供的工具
  • optional:可选工具(需要条件满足才加载)

来源:OpenClaw 官方文档 - docs.openclaw.ai/web/webchat

相关文章推荐

教程OpenClaw WebChat 指南:原生聊天 UI、Gateway WebSocket 直连与远程访问OpenClaw WebChat 完整指南:原生 SwiftUI 聊天 UI 直连 Gateway WebSocket(无需独立服务器)、chat.history/send/inject 三种消息类型、中断运行的历史持久化、Control UI 工具面板,以及通过 SSH 隧道或 Tailscale 远程访问的配置方法。2026/3/2教程WorkBuddy 直连微信:发条消息就能远程指挥电脑干活,兼容 OpenClaw 技能体系腾讯 WorkBuddy 微信直连功能详解:配置微信客服号即可远程指挥电脑执行任务,支持企微断网自动重连与定时任务自动化,技能包完全兼容OpenClaw体系可无缝迁移,附向内隔离向外防御安全设计解读。2026/8/15教程OpenClaw Sessions 磁盘维护完全指南:sessions.json 自动清理与 openclaw sessions cleanup 命令详解 OpenClaw session.maintenance 磁盘维护配置:warn/enforce 双模式、清理执行顺序、maxDiskBytes/highWaterBytes 磁盘预算控制,以及 openclaw sessions cleanup 命令的 dry-run 安全用法。2026/8/13教程OpenClaw SecretRef 完全教程:让 API Key 不用再以明文躺在配置文件里详解 OpenClaw SecretRef 密钥引用机制:内存快照运行时模型、active/inactive Surface 判定逻辑、env/file/exec 三种引用来源写法,以及生产环境凭据管理的实战建议。2026/8/12教程OpenClaw Session Pruning 与 Compaction 的区别:谁在悄悄给你的会话上下文瘦身详解 OpenClaw Session Pruning 会话修剪机制:如何在每次 LLM 调用前修剪旧的工具调用结果以降低成本,与 Compaction 压缩机制的区别与配合方式,附智能默认值和手动配置方法。2026/8/12教程OpenClaw Prompt Caching 调优指南:cacheRetention、cache-ttl 修剪与心跳保温三件套详解 OpenClaw 提示缓存调优三大配置项:cacheRetention 缓存保留策略、contextPruning cache-ttl 上下文修剪、heartbeat 心跳保温,附配置合并优先级和不同场景的调优建议。2026/8/12