教程

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教程Claude Code Computer Use 实战指南:让 AI 直接操作 GUI 应用Claude Code Computer Use 完整实战指南:5 种 Computer Use 工具(截图/点击/移动/输入/快捷键);4 个实战场景(无 API 的企业内网系统/UI 渲染验证/不支持自动化的桌面软件/结合 Shell 命令);与 MCP 工具的优先级策略;--chrome 参数(v2.1.126,Chrome 调试集成);权限控制配置(允许截图但禁止系统快捷键);Auto Mode 对 Computer Use 的处理;以及研究预览阶段的已知限制。2026/5/7教程OpenClaw Skills 开发完全指南:从零编写高质量 SKILL.md 自定义技能文件OpenClaw Skills 开发完整教程:SKILL.md 文件结构详解、自动触发 vs 显式触发原理、三个实战模板(GitHub 仓库管理/每日信息简报/代码健康检查)、让技能精准自动触发的描述写法,以及技能质量标准和 clawhub.ai 使用方法。2026/4/19教程OpenClaw 零基础完全入门:安装、Telegram 配置、记忆系统和技能插件完整指南OpenClaw 从零开始完整教程:用宠物龙虾类比理解架构、npm 安装步骤、Telegram Bot 配置、SOUL.md 性格定义、三层记忆系统(每日日志/长期记忆/MEMORY.md)、HEARTBEAT.md 主动任务、技能安装,以及安全配置和常见问题解决。2026/4/18教程OpenClaw 快速入门:用 Telegram 控制 AI Agent,5 分钟搭建个人 AI 助理OpenClaw 5 分钟快速入门:用 Telegram 控制 AI Agent,含安装配置、Bot 创建、Skills 定义、多渠道支持、Claude Code 编程任务集成,以及与 Claude Code CLI 的区别和互补关系。2026/4/13教程OpenClaw 多 Agent 架构入门:用 Telegram Bot 控制你的 AI Agent 集群OpenClaw 多 Agent 架构入门指南:通过 Telegram 控制 AI Agent 集群,支持子 Agent 编排、MCP 集成和多节点部署。含快速开始教程。2026/4/7