OpenClaw Web 界面集成教程｜通过网页与你的 AI 智能体对话
本系列第二十二篇：从本地访问到云端集成——让 Control UI 成为你的“养虾”指挥中心，通过浏览器随时随地和“龙虾”对话
欢迎回到 OpenClaw 系列教程。过去两篇，我们完成了海外渠道（Discord、Telegram、WhatsApp）的接入。通过这些渠道，你的“龙虾”已经走进了开发者社区和全球通讯工具。
但如果你是 OpenClaw 的深度使用者，很快就会发现——多渠道固然方便，但真正需要深度调试、配置管理、执行审批的时候，渠道消息的局限性就暴露出来了。比如你想查看某个工具调用的详细输出，想修改模型温度参数，想批准一个高危操作的执行请求——这些事情在 Telegram 或 Discord 里做起来非常别扭，甚至根本做不到。
这就是 Control UI 的用武之地。它不仅仅是另一个聊天界面，而是 OpenClaw 的完整管理控制台——支持实时对话、配置管理、技能管理、工具调用可视化、执行审批、节点状态监控等功能。
本文将系统讲解 OpenClaw Web 界面的完整使用路径，覆盖从本地访问、远程安全暴露、阿里云 AppFlow 零代码集成 到高级安全配置的完整流程。无论你是个人开发者还是企业用户，都能找到最适合自己的 Web 集成方案。
一、Control UI 是什么？
Control UI 是 OpenClaw Gateway 内置的一个小型浏览器控制界面（基于 Vite + Lit 构建），默认监听端口 18789，与 Gateway WebSocket 共用同一端口。
一句话定位：Control UI 是 OpenClaw 的“驾驶舱”——所有聊天、配置、执行审批都在这里完成。
1.1 界面布局与核心功能
Control UI 采用三栏式布局，功能覆盖 OpenClaw 运维的方方面面：
左侧边栏：
New Chat：新建对话
Sessions：历史会话列表（支持切换、重命名、删除）
Settings：全局设置入口
Status：Gateway 系统状态
中间主区域：
消息展示区域（支持 Markdown 和代码块）
输入框与发送按钮
工具调用实时展示（工具名称、传入参数、执行结果、耗时统计）
右侧面板：
Tools：可用工具列表（内置工具如 exec、browser、read、write 等，显示可用/受限/禁用状态）
Context：当前会话上下文
Usage：用量统计
1.2 Control UI 能做什么
Control UI 的功能覆盖了 OpenClaw 日常使用的几乎所有场景：
聊天：支持流式工具调用和实时工具输出卡片
渠道管理：查看内置/外部插件渠道的状态、扫码登录和按渠道配置
模型管理：按会话设置 model/thinking/temperature/maxTokens 等参数
Cron 作业管理：列出、添加、编辑、运行、启用/禁用定时任务
技能管理：查看技能状态、启用/禁用、安装、更新 API 密钥
节点管理：查看在线节点列表和能力
执行审批：编辑 Gateway 或节点的允许列表及询问策略
配置管理：可视化查看和编辑
~/.openclaw/openclaw.json，带校验地应用并重启 Gateway设备管理：批准或撤销新设备的访问请求
Control UI 不是一个“花哨的前端壳子”，它是 OpenClaw 的操作级管理工具。学习它，等于学会了日常维护 OpenClaw 的全部操作。
二、快速打开 Control UI
2.1 基本前提
OpenClaw Gateway 正在运行
浏览器与 Gateway 在同一台机器上（或在同一网络）
验证 Gateway 状态：
bash
openclaw gateway status输出中 Gateway: running 表示正常。
2.2 方式一：浏览器直接访问
在浏览器中打开以下任一地址：
text
http://127.0.0.1:18789/ http://localhost:18789/如果页面提示输入 Token，将 gateway.auth.token 配置的值粘贴到认证字段中。
2.3 方式二：CLI 命令自动打开
bash
openclaw dashboard该命令会自动：
复制仪表盘链接到剪贴板
在浏览器中打开（如果可能）
在无头环境中显示 SSH 提示
2.4 首次访问：设备配对
当你从新的浏览器或设备首次连接 Control UI 时，Gateway 会要求进行一次性配对批准，即使在同一 Tailnet 内也不例外。这是 OpenClaw 的安全设计，用于防止未授权访问。
现象：页面显示 disconnected (1008): pairing required
批准方法：
bash
# 列出待处理的设备请求 o