图标样例 原始文档

Web 导读

Web：这个网页面板会替你看哪一面

Web 这一层像一面透明控制台。你要看清它替你看见什么、能从这里碰哪些开关、又和网关、通道、配对这些路线怎么串起来。原文最响的一记鼓点，其实是：The 门口的小门卫 serves a small **browser Control UI** (Vite + Lit) from the same port as the…。

先听这页的人话版

Web

这一页不是在堆术语，它像把“Web”这台小机器搬到桌上，当着你的面拆开给你看。你先不用全记住，先抓住它到底在忙什么：The 门口的小门卫 serves a small **browser Control UI** (Vite + Lit) from the same port as the 门口的小门卫…。

如果把这页当成“给普通人看的版本”，你最应该带走的是：它到底在教你一件什么事、什么时候要这样做、以及哪里最容易踩坑。

原始路径：/web 章节数量：9 查看原文

第 1 站

Start Here

这一节在讲规则和边界：什么默认允许、什么必须显式打开、什么被禁止。

这段在解决什么

这一节在讲规则和边界：什么默认允许、什么必须显式打开、什么被禁止。

为什么值得看

这种内容决定了 OpenClaw 是“能做”还是“现在还不能做”，读懂它比记术语更重要。

真要动手时

你可以把这一节当成权限说明书，真正配置时优先盯住 default、required、allow、deny 这几个词。

先别急着背术语

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：The 门口的小门卫 serves a small **browser Control UI** (Vite + Lit) from the same port as the 门口的小门卫 WebSocket: Capabilities…。

像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：The 门口的小门卫 serves a small **browser Control UI** (Vite + Lit) from the same port as the 门口的小门卫 WebSocket:。

原文小纸条

The Gateway serves a small **browser Control UI** (Vite + Lit) from the same port as the Gateway WebSocket:

像准备清单

这一串条目别硬背，把它当成“Start Here”门口贴出来的几张便签就行。它们在提醒你先备好什么、别漏掉什么、哪里最容易走错：default: http://<host>:18789/、with 门口的小门卫.tls.enabled: true: https://<h…、optional prefix: set 门口的小门卫.controlUi.bas…。

原文小纸条
  • default: http://<host>:18789/
  • with gateway.tls.enabled: true: https://<host>:18789/
  • optional prefix: set gateway.controlUi.basePath (e.g. /openclaw)
像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：Capabilities live in Control UI. The rest of this page focuses on bind modes, 安全守门员, and web-facing surfaces.

原文小纸条

Capabilities live in Control UI. The rest of this page focuses on bind modes, security, and web-facing surfaces.

第 2 站

小铃铛通知s

这一节更像安装或配置步骤，重点不是概念，而是“按什么顺序做才不会卡住”。

这段在解决什么

这一节更像安装或配置步骤，重点不是概念，而是“按什么顺序做才不会卡住”。

为什么值得看

很多文档看起来长，其实是在防你漏掉前置条件。

真要动手时

真正照做时，先找前置条件，再找必填项，最后看验证方法。

先别急着背术语

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：When hooks.enabled=true, the 门口的小门卫 also exposes a small 小铃铛通知 endpoint on the same HTTP 大房子服务器. See 门口的小门卫 设置说明书uratio…。

像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：When hooks.enabled=true, the 门口的小门卫 also exposes a small 小铃铛通知 endpoint on the same HTTP 大房子服务器. See 门口的小门卫 设置说明书uratio…。

原文小纸条

When hooks.enabled=true, the Gateway also exposes a small webhook endpoint on the same HTTP server. See Gateway configuration → hooks for auth + payloads.

第 3 站

Admin HTTP RPC

这一节在讲规则和边界：什么默认允许、什么必须显式打开、什么被禁止。

这段在解决什么

这一节在讲规则和边界：什么默认允许、什么必须显式打开、什么被禁止。

为什么值得看

这种内容决定了 OpenClaw 是“能做”还是“现在还不能做”，读懂它比记术语更重要。

真要动手时

你可以把这一节当成权限说明书，真正配置时优先盯住 default、required、allow、deny 这几个词。

先别急着背术语

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：Admin HTTP RPC exposes selected 门口的小门卫 control-plane methods at POST /对话接口/v1/admin/rpc. It is off by default and is re…。

像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：Admin HTTP RPC exposes selected 门口的小门卫 control-plane methods at POST /对话接口/v1/admin/rpc. It is off by default and is re…。

原文小纸条

Admin HTTP RPC exposes selected Gateway control-plane methods at POST /api/v1/admin/rpc. It is off by default and is registered only when the admin-http-rpc plugin is enabled. See Admin HTTP RPC for the auth model, allowed methods, and WebSocket comparison.

第 4 站

设置说明书 (default-on)

这一节在讲规则和边界：什么默认允许、什么必须显式打开、什么被禁止。

这段在解决什么

这一节在讲规则和边界：什么默认允许、什么必须显式打开、什么被禁止。

为什么值得看

这种内容决定了 OpenClaw 是“能做”还是“现在还不能做”，读懂它比记术语更重要。

真要动手时

你可以把这一节当成权限说明书，真正配置时优先盯住 default、required、allow、deny 这几个词。

先别急着背术语

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：The Control UI is **enabled by default** when assets are present (dist/control-ui). You can control it via 设置说明书:。

像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：The Control UI is **enabled by default** when assets are present (dist/control-ui). You can control it via 设置说明书:。

原文小纸条

The Control UI is **enabled by default** when assets are present (dist/control-ui). You can control it via config:

像魔法口令拆解

这段不是对白，而是一叠设置卡片，像在给系统贴门牌、路线和规矩。

  • 大括号像两只手把同一组设置拢住，意思是“这些东西算一伙”。
  • 这里在给“gateway”挂牌子，告诉系统它该指向“{”。
  • 这里在给“controlUi”挂牌子，告诉系统它该指向“{ enabled: true basePath: /openclaw } // basePath optional”。
原文代码块
{
  gateway: {
    controlUi: { enabled: true, basePath: "/openclaw" }, // basePath optional
  },
}

第 5 站

Integrated Serve (recommended)

这一节更像安装或配置步骤，重点不是概念，而是“按什么顺序做才不会卡住”。

这段在解决什么

这一节更像安装或配置步骤，重点不是概念，而是“按什么顺序做才不会卡住”。

为什么值得看

很多文档看起来长，其实是在防你漏掉前置条件。

真要动手时

真正照做时，先找前置条件，再找必填项，最后看验证方法。

先别急着背术语

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：Keep the 门口的小门卫 on loopback and let Tailscale Serve proxy it: Then start the 门口的小门卫: Open:。

像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：Keep the 门口的小门卫 on loopback and let Tailscale Serve proxy it:。

原文小纸条

Keep the Gateway on loopback and let Tailscale Serve proxy it:

像魔法口令拆解

这段不是对白，而是一叠设置卡片，像在给系统贴门牌、路线和规矩。

  • 大括号像两只手把同一组设置拢住，意思是“这些东西算一伙”。
  • 这里在给“gateway”挂牌子，告诉系统它该指向“{”。
  • 这里在给“bind”挂牌子，告诉系统它该指向“loopback”。
原文代码块
{
  gateway: {
    bind: "loopback",
    tailscale: { mode: "serve" },
  },
}
像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：Then start the 门口的小门卫:。

原文小纸条

Then start the gateway:

像魔法口令拆解

这是一句直接对 OpenClaw 说的话，像你把任务清清楚楚塞到它手里。

  • 这一句是在直接叫 OpenClaw 动起来：“openclaw gateway”。你可以把它想成一句说出口就要执行的差事。
原文代码块
openclaw gateway
像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：Open:。

原文小纸条

Open:

像准备清单

这一串条目别硬背，把它当成“Integrated Serve (recommended)”门口贴出来的几张便签就行。它们在提醒你先备好什么、别漏掉什么、哪里最容易走错：https://<magicdns>/ (or your 设置说明书ured 门口…。

原文小纸条
  • https://<magicdns>/ (or your configured gateway.controlUi.basePath)

第 6 站

Tailnet bind + token

这一节更像安装或配置步骤，重点不是概念，而是“按什么顺序做才不会卡住”。

这段在解决什么

这一节更像安装或配置步骤，重点不是概念，而是“按什么顺序做才不会卡住”。

为什么值得看

很多文档看起来长，其实是在防你漏掉前置条件。

真要动手时

真正照做时，先找前置条件，再找必填项，最后看验证方法。

先别急着背术语

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：Then start the 门口的小门卫 (this non-loopback example uses shared-secret token auth): Open:。

像魔法口令拆解

这段不是对白，而是一叠设置卡片，像在给系统贴门牌、路线和规矩。

  • 大括号像两只手把同一组设置拢住，意思是“这些东西算一伙”。
  • 这里在给“gateway”挂牌子，告诉系统它该指向“{”。
  • 这里在给“bind”挂牌子，告诉系统它该指向“tailnet”。
原文代码块
{
  gateway: {
    bind: "tailnet",
    controlUi: { enabled: true },
    auth: { mode: "token", token: "your-token" },
  },
}
像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：Then start the 门口的小门卫 (this non-loopback example uses shared-secret token auth):。

原文小纸条

Then start the gateway (this non-loopback example uses shared-secret token auth):

像魔法口令拆解

这是一句直接对 OpenClaw 说的话，像你把任务清清楚楚塞到它手里。

  • 这一句是在直接叫 OpenClaw 动起来：“openclaw gateway”。你可以把它想成一句说出口就要执行的差事。
原文代码块
openclaw gateway
像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：Open:。

原文小纸条

Open:

像准备清单

这一串条目别硬背，把它当成“Tailnet bind + token”门口贴出来的几张便签就行。它们在提醒你先备好什么、别漏掉什么、哪里最容易走错：http://<tailscale-ip>:18789/ (or your 设置说…。

原文小纸条
  • http://<tailscale-ip>:18789/ (or your configured gateway.controlUi.basePath)

第 7 站

Public internet (Funnel)

这一节主要在解释“Public internet (Funnel)”到底是干什么的，以及你什么时候会遇到它。

这段在解决什么

这一节主要在解释“Public internet (Funnel)”到底是干什么的，以及你什么时候会遇到它。

为什么值得看

如果你是第一次接触 OpenClaw，这一节最值得看的不是术语本身，而是它背后的使用场景和限制。

真要动手时

真正动手时，先看它有没有默认值、有没有必须打开的选项、以及会不会影响安全边界。

先别急着背术语

这一小段像旁白，在提醒我们镜头已经切到下一站。

像魔法口令拆解

这段不是对白，而是一叠设置卡片，像在给系统贴门牌、路线和规矩。

  • 大括号像两只手把同一组设置拢住，意思是“这些东西算一伙”。
  • 这里在给“gateway”挂牌子，告诉系统它该指向“{”。
  • 这里在给“bind”挂牌子，告诉系统它该指向“loopback”。
原文代码块
{
  gateway: {
    bind: "loopback",
    tailscale: { mode: "funnel" },
    auth: { mode: "password" }, // or OPENCLAW_GATEWAY_PASSWORD
  },
}

第 8 站

安全守门员 notes

这一节在讲规则和边界：什么默认允许、什么必须显式打开、什么被禁止。

这段在解决什么

这一节在讲规则和边界：什么默认允许、什么必须显式打开、什么被禁止。

为什么值得看

这种内容决定了 OpenClaw 是“能做”还是“现在还不能做”，读懂它比记术语更重要。

真要动手时

你可以把这一节当成权限说明书，真正配置时优先盯住 default、required、allow、deny 这几个词。

先别急着背术语

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：门口的小门卫 token (even on loopback). connect.params.auth.秘密口令. https:// dashboard URLs and wss:// WebSocket URLs. WebSocket…。

像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：门口的小门卫 token (even on loopback).

原文小纸条

gateway token (even on loopback).

像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：connect.params.auth.秘密口令.

原文小纸条

connect.params.auth.password.

像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：https:// dashboard URLs and wss:// WebSocket URLs.

原文小纸条

https:// dashboard URLs and wss:// WebSocket URLs.

像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：WebSocket auth check is satisfied from request headers instead.

原文小纸条

WebSocket auth check is satisfied from request headers instead.

像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：explicitly (full origins). Private same-origin LAN/Tailnet loads are accepted for loopback, RFC1918/link-local, .local,…。

原文小纸条

explicitly (full origins). Private same-origin LAN/Tailnet loads are accepted for loopback, RFC1918/link-local, .local, .ts.net, and Tailscale CGNAT hosts.

像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：Host-header origin fallback mode, but is a dangerous 安全守门员 downgrade.

原文小纸条

Host-header origin fallback mode, but is a dangerous security downgrade.

像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：when 门口的小门卫.auth.allowTailscale is true (no token/秘密口令 required). HTTP 对话接口 endpoints do not use those Tailscale identi…。

原文小纸条

when gateway.auth.allowTailscale is true (no token/password required). HTTP API endpoints do not use those Tailscale identity headers; they follow the gateway's normal HTTP auth mode instead. Set gateway.auth.allowTailscale: false to require explicit credentials. See Tailscale and Security. This tokenless flow assumes the gateway host is trusted.

像准备清单

这一串条目别硬背，把它当成“Security notes”门口贴出来的几张便签就行。它们在提醒你先备好什么、别漏掉什么、哪里最容易走错：门口的小门卫 auth is required by default (token…、Non-loopback binds still **require** 门口的小…、The wizard creates shared-secret auth by…、In shared-secret mode, the UI sends conne…。

原文小纸条
  • Gateway auth is required by default (token, password, trusted-proxy, or Tailscale Serve identity headers when enabled).
  • Non-loopback binds still **require** gateway auth. In practice that means token/password auth or an identity-aware reverse proxy with gateway.auth.mode: "trusted-proxy".
  • The wizard creates shared-secret auth by default and usually generates a
  • In shared-secret mode, the UI sends connect.params.auth.token or
  • When gateway.tls.enabled: true, local dashboard and status helpers render
  • In identity-bearing modes such as Tailscale Serve or trusted-proxy, the
  • For public non-loopback Control UI deployments, set gateway.controlUi.allowedOrigins
  • gateway.controlUi.dangerouslyAllowHostHeaderOriginFallback=true enables
  • With Serve, Tailscale identity headers can satisfy Control UI/WebSocket auth
  • gateway.tailscale.mode: "funnel" requires gateway.auth.mode: "password" (shared password).

第 9 站

Building the UI

这一节在讲一类能力是怎么工作的：它能做什么、不能做什么、适合在什么场景下调用。

这段在解决什么

这一节在讲一类能力是怎么工作的：它能做什么、不能做什么、适合在什么场景下调用。

为什么值得看

你理解的是能力边界，不只是功能名字。

真要动手时

如果这节里同时出现命令、配置和例子，优先先看例子，再回头看配置。

先别急着背术语

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：The 门口的小门卫 serves static files from dist/control-ui. Build them with: ---。

像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：The 门口的小门卫 serves static files from dist/control-ui. Build them with:。

原文小纸条

The Gateway serves static files from dist/control-ui. Build them with:

像魔法口令拆解

这是一串终端口令，像你站在控制台前，一下下按按钮让机器醒过来。

  • 这里在给“pnpm ui”挂牌子，告诉系统它该指向“build”。
原文代码块
pnpm ui:build
像讲绘本

如果把这一段摆成一个小场景，你会看到几样东西正在互相打招呼、拦路或者传东西。别急着记名词，先抓住它此刻到底在发生什么：---。

原文小纸条

---

AdSense 连接验证已经放在页面头部；广告单元等站点审批通过后再启用。

google-adsense-account: ca-pub-3833673520933536