Gateway の Web 設定ガイド: ブラウザから Control UI にアクセスする

ターミナルだけで全てを完結させるのは効率的に思えますが、複雑な操作をするときはやはり視覚的なインターフェースが欲しくなるものです。また、ローカルで動いているツールを外部から安全に操作しようとすると、ネットワーク設定や認証の壁にぶつかることがよくあります。

openclaw の Gateway には、ブラウザから操作できる Control UI（Vite + Lit 製）が統合されています。これを使えば、難しい設定に悩まされることなく、使い慣れたブラウザから直接 Gateway をコントロールできるようになります。

必要なもの

セットアップを始める前に、以下の準備ができているか確認してください。

まずは、最小限の手順で Control UI を立ち上げてみましょう。

UI のビルド Control UI を表示するには、まず静的ファイルをビルドする必要があります。以下のコマンドを実行してください。最初の実行時には必要な依存関係も自動でインストールされます。
Terminal window
```
pnpm ui:build
```
設定の確認 Control UI はデフォルトで有効になっています。必要に応じて basePath などを設定できます。
```
{
  gateway: {
    controlUi: { enabled: true, basePath: "/openclaw" },
  },
}
```
Gateway の起動 準備ができたら Gateway を起動します。
Terminal window
```
openclaw gateway
```
ブラウザでアクセス デフォルトでは http://<host>:18789/（basePath を設定した場合はそのパス）で UI が開きます。

私のおすすめは、Gateway を loopback（ローカルホスト）で動かし、Tailscale Serve にプロキシさせる方法です。これが最も安全で、設定も簡単です。

{
  gateway: {
    bind: "loopback",
    tailscale: { mode: "serve" },
  },
}

この設定で openclaw gateway を起動すると、https://<magicdns>/ からアクセス可能になります。

環境に合わせて、以下のモードも選択できます。

Tailscale ネットワーク内の IP を使って直接バインドするモードです。loopback 以外にバインドする場合は、セキュリティのためトークンが必須となります。

{
  gateway: {
    bind: "tailnet",
    controlUi: { enabled: true },
    auth: { mode: "token", token: "your-token" },
  },
}

インターネット経由で公開する場合は Funnel を使用します。このモードでは、共有パスワードによる認証が必要です。

{
  gateway: {
    bind: "loopback",
    tailscale: { mode: "funnel" },
    auth: { mode: "password" },
  },
}

Gateway の認証（トークン、パスワード、または Tailscale の identity headers）はデフォルトで必須です。
ウィザードを使用すると、loopback 環境であってもデフォルトで Gateway トークンが生成されます。
Control UI はアンチクリックジャッキングヘッダーを送信し、gateway.controlUi.allowedOrigins が設定されていない限り、同一オリジンのブラウザ WebSocket 接続のみを許可します。
Tailscale Serve を使用する場合、gateway.auth.allowTailscale が true であれば Tailscale の identity headers で認証をパスできます。

Q: loopback 以外にバインドしようとするとエラーが出る A: gateway.bind を loopback 以外に設定する場合、必ず gateway.auth でトークンまたはパスワードを設定する必要があります。

Q: Funnel モードが動作しない A: gateway.tailscale.mode: "funnel" を使用する場合は、認証モードを gateway.auth.mode: "password" に設定してください。

OpenClaw Expert

このページで解決しない場合は、OpenClaw Expertに直接質問してください。