第10回: Web UIを使ってみる
この回で学ぶこと
Web UIへのアクセス方法
Web UIでできること（会話・設定確認・ログ閲覧）
TUI（ターミナル）とWeb UIの使い分け
前回のおさらい
APIキーを取得して設定ファイルに登録した。OpenClawがAIの頭脳と通信できる状態になった。今回はブラウザから秘書を操作する「Web UI」を使ってみる。
Web UIを使うための準備
ステップ1：openclaw.jsonにWeb UI用の設定を追加する
Docker環境でWeb UIを使うには、openclaw.json の gateway → controlUi の中に設定を追加する必要があります。
"controlUi": {
"allowedOrigins": ["<http://localhost:18789>", "<http://127.0.0.1:18789>"],
"allowInsecureAuth": true,
"dangerouslyDisableDeviceAuth": true
}
それぞれの意味：
| このURLからのアクセスを許可する設定 |
| HTTP（暗号化なし）でのログインを許可する設定 |
| ブラウザの「デバイス認証」をスキップする設定 |
セキュリティについて：
dangerouslyDisableDeviceAuthは名前に「dangerously（危険）」とついていますが、自分だけが使う環境であれば問題ありません。理由は以下の通りです：
トークン認証（合言葉による認証）は有効なままです
Dockerの中で動いているため、外部から直接アクセスされることはありません
デバイス認証はトークン認証の上にさらに追加される「二重ロック」のようなもので、それを1つ外しただけです
ただし、以下の場合はこの設定を使わないでください：
VPS（レンタルサーバー）で公開する場合
Tailscale Funnelなどで外部からアクセスできるようにする場合
自分以外の人もアクセスできる環境の場合
設定を変更したら、コンテナを再起動します：
docker compose down && docker compose up -d
ステップ2：Web UIのURLを確認してブラウザで開く
以下のコマンドを実行すると、Web UIを開くために必要な情報がすべて表示されます：
docker exec -it my-secretary-openclaw-gateway-1 openclaw dashboard
実行すると、こんな表示が出ます：
Dashboard URL: <http://127.0.0.1:18789/#token=change-me-to-a-random-string>
この Dashboard URL がWeb UIのURLです。ポート番号もトークン（合言葉）も全部含まれています。このURLをそのままブラウザ（Safari、Chrome等）のアドレスバーに貼り付けてください。
注意：
一部のガイドでは
http://localhost:3000と書かれていますが、OpenClawの初期設定では3000ではなく18789ですURLの中の
#token=の部分が合言葉です。?token=ではなく#token=なので注意してください
ステップ3：接続できたか確認する
画面右上に注目してください：
Version 2026.x.x ＋ Health OK（緑色） | 接続成功！そのまま使えます |
Health Offline（赤色） | 接続できていません |
pairing required（赤色） | ステップ1の設定が反映されていません |
うまくいかないときのチェックリスト
ページが表示されない | ゲートウェイは起動していますか？ |
| URLに |
|
|
| トークンの値は正しいですか？ステップ2のコマンドでURLを再確認してください |
Web UIの画面構成
接続できたら、左のサイドバーにいくつかのメニューが並んでいます。
Chat（チャット）
Chat | 秘書と会話する場所。TUIと同じ機能をブラウザで使えます |
Control（管理画面）
Overview | ゲートウェイの状態を一覧で確認できる |
Channels | WhatsAppやTelegramなどの接続先の管理 |
Instances | 動いているインスタンスの確認 |
Sessions | 過去の会話履歴を閲覧できる |
Usage | トークン使用量などの確認 |
Cron Jobs | 定期実行タスクの管理 |
Agent（エージェント設定）
Agents | エージェント（秘書）の設定を確認・管理 |
Skills | 秘書ができることの一覧 |
Nodes | 接続されたデバイスの管理 |
Settings（設定）
Config |
|
Debug | トラブル時のデバッグ情報を確認できる |
最初はChat画面だけ使えればOKです。 他のメニューは必要になったときに覗いてみてください。
Web UIで会話してみる
Chat画面を開き、以下を試してみましょう：
「こんにちは」と送る → 秘書が挨拶を返してくれる
「明日の天気を教えて」と送る → 秘書が調べて返事する
「今日のニュースを3本教えて」と送る → ニュースをまとめてくれる
TUIで会話したときと同じ秘書が応答します。画面が違うだけで中身は同じです。
TUI vs Web UIの使い分け
操作 | キーボードのみ | マウス＋キーボード |
起動方法 | ターミナルでコマンドを打つ | ブラウザでURLを開く |
向いている人 | ターミナルに慣れている人 | 直感的に操作したい人 |
設定の確認・変更 | ファイルを直接編集 | 画面上で操作できる |
会話履歴の閲覧 | コマンドで確認 | Sessions画面で一覧表示 |
どちらを使ってもOKです。
ゴール状態
以下ができていればこの回は完了です：
[ ] Web UIにアクセスして会話できている（Health OKが緑色）
[ ] 設定画面（Config）・履歴画面（Sessions）の場所を知っている