尚未安裝 OpenClaw？點此查看一鍵安裝指令
curl -fsSL https://openclaw.ai/install.sh | bashiwr -useb https://openclaw.ai/install.ps1 | iexcurl -fsSL https://openclaw.ai/install.cmd -o install.cmd && install.cmd && del install.cmd- OpenClaw 提供三種操作介面——CLI、Gateway Dashboard Web UI 與第三方 Channel——其中 Gateway Dashboard 是官方內建的圖形化管理面板，無需額外安裝即可使用[1]
- Dashboard Web UI 預設運行在
http://127.0.0.1:18789，提供 Agent 管理、對話記錄、Channel 狀態與系統資源監控四大核心功能[8] - Control UI 設定（
gateway.auth.token、allowedOrigins）是保護 Web UI 不被未授權存取的關鍵安全機制[4][5] - 透過 Tailscale、SSH Tunnel 或 Cloudflare Tunnel，非工程師也能從任何裝置安全存取遠端 Dashboard，無需理解複雜的網路設定[10]
- 搭配 OpenWebUI 等第三方 GUI 方案或桌面端 Shell 整合，OpenClaw 可為企業提供接近商用 SaaS 的圖形化操作體驗[9]
提到 AI 代理工具，許多人的第一印象是黑底白字的終端機畫面——輸入指令、等待回應、再輸入下一條指令。對於熟悉命令列的開發者而言，CLI 是高效且直覺的操作方式；但對於行銷、業務、專案管理等非技術背景的團隊成員來說，這道門檻足以讓他們對 OpenClaw 望而卻步。[6]
事實上，OpenClaw 從架構設計之初就內建了圖形化操作的能力。Gateway 服務不僅是 WebSocket 通訊的核心樞紐，同時也在相同的 Port 上提供一個功能完整的 Web Dashboard。你只需要打開瀏覽器、輸入 http://127.0.0.1:18789，就能以視覺化方式管理代理、查看對話記錄、監控系統狀態——完全不需要輸入任何 CLI 指令。[1]
本文將從 OpenClaw 的三種操作模式出發，系統性地介紹 Gateway Dashboard Web UI 的完整功能、Control UI 安全設定、遠端存取方案、第三方 GUI 整合、桌面端快捷操作，以及企業場景下的最佳實踐。無論你是第一次接觸 OpenClaw 的非工程師，還是正在為團隊規劃圖形化部署方案的技術主管，都能在這篇指南中找到所需的技術參考。
一、OpenClaw 的三種操作模式
在深入 Web UI 之前，先釐清 OpenClaw 提供的三種操作介面。這三者並非互斥的替代方案，而是面向不同場景的互補選擇。[2]
| 操作模式 | 介面類型 | 適用對象 | 即時互動 | 任務管理 | 遠端存取 |
|---|---|---|---|---|---|
| CLI | 終端機命令列 | 開發者、DevOps | 即時對話 | 基礎（手動查詢） | 透過 SSH |
| Gateway Dashboard Web UI | 瀏覽器圖形介面 | 全團隊成員 | 即時對話 + 視覺化 | 完整（Dashboard 面板） | Tailscale / Tunnel |
| Channel（Telegram / Slack / API） | 訊息平台整合 | 行動端、自動化 | 非同步訊息 | 有限（依 Channel 而異） | 原生支援 |
1.1 CLI：開發者的首選
CLI 是 OpenClaw 最基礎也最強大的操作方式。所有進階功能——包括 Gateway 管理、設定修改、Node 調度——都可以透過 CLI 完成。對於習慣終端機的使用者，CLI 提供了最快的操作速度與最大的靈活性。[2]
1.2 Gateway Dashboard Web UI：視覺化管理
Dashboard 是 Gateway 內建的瀏覽器介面，提供 Agent 管理、對話記錄、Channel 監控與系統資源儀表板。它的最大優勢在於零安裝——只要 Gateway 正在運行，Web UI 就自動可用。[1]
1.3 Channel：無處不在的存取
Channel 是 OpenClaw 與外部通訊平台（Telegram、Slack、Discord、LINE 等）的整合介面。它讓你在慣用的聊天工具中直接與 AI 代理互動，適合行動裝置與非同步工作流。[9]
這三種模式可以同時運行。你可以在終端機用 CLI 調整設定，同時在瀏覽器的 Dashboard 監控代理狀態，並透過 Telegram Bot 隨時從手機觸發任務——所有操作最終都匯聚到同一個 Gateway。
二、Gateway Dashboard Web UI
Gateway Dashboard 是 OpenClaw 內建的圖形化管理面板，隨 Gateway 服務一同啟動。它在 Gateway 的 HTTP 端點上提供一個完整的單頁應用程式（SPA），涵蓋了日常操作所需的所有功能。[1][8]
2.1 啟動與存取
如果 Gateway 已在運行（大多數情況下它會在安裝完成後自動啟動），你只需打開瀏覽器並導航至預設地址：
# 確認 Gateway 正在運行
openclaw gateway status
# 在瀏覽器中開啟 Dashboard
# 預設地址：http://127.0.0.1:18789
# 或使用 CLI 快捷指令直接開啟瀏覽器
openclaw dashboardopenclaw dashboard 指令會自動偵測作業系統並呼叫對應的瀏覽器開啟指令（macOS 使用 open、Linux 使用 xdg-open、Windows 使用 start）。[8]
2.2 Dashboard 四大功能區
Dashboard 的介面採用左側導航列 + 右側內容區的經典 SPA 佈局，包含四個主要功能區：
- Overview（總覽）：Gateway 運行狀態、已連線 Node 數量、活躍 Agent 數量、系統資源使用率的即時摘要
- Agents（代理）：所有已建立的 Agent 清單，包含每個 Agent 的模型設定、Skill 配置、對話歷史與任務執行紀錄
- Channels（通道）：所有已設定的通訊 Channel 狀態，包含連線健康度、訊息吞吐量與錯誤日誌
- Logs（日誌）：Gateway 與 Node 的即時日誌串流，支援篩選、搜尋與時間範圍查詢
三、Dashboard 功能詳解
以下逐一拆解 Dashboard 各功能區的操作方式與實務價值。[1]
3.1 Agent 管理
Agent 管理頁面是 Dashboard 的核心功能。你可以在這裡建立新的 Agent、修改現有 Agent 的設定，以及查看每個 Agent 的執行歷史。
建立新 Agent：點擊右上角的「New Agent」按鈕，填入 Agent 名稱、選擇模型、勾選允許使用的 Skill，即可建立。等同於 CLI 的 openclaw agent create 指令。
修改 Agent 設定：點擊 Agent 名稱進入詳細頁面，可直接修改模型（Primary / Fallback）、系統提示詞（System Prompt）、最大 Token 上限、溫度（Temperature）等參數。所有修改即時生效，無需重啟 Gateway。
# CLI 等效操作（供對照參考）
openclaw agent create --name "research-bot" \
--model claude-opus-4-6 \
--skills browser,shell,file
openclaw agent config research-bot \
--system-prompt "你是一位研究助理..."
--temperature 0.3
--max-tokens 8192對話視覺化：Dashboard 以類似聊天介面的格式呈現每個 Agent 的對話歷史。你可以看到完整的上下文流——使用者輸入、Agent 的思考過程（Reasoning）、工具調用（Tool Use）與最終回應。這在除錯與教育場景中特別有價值：非技術團隊成員可以直觀地理解 AI 代理「如何思考」。
3.2 對話記錄與 Workspace
每個 Agent 的對話記錄以 Workspace 為單位組織。Dashboard 的 Workspace 管理介面讓你可以：
- 瀏覽歷史對話：以時間線方式瀏覽所有過往的 Agent 對話，搜尋特定關鍵字或時間範圍
- 匯出對話記錄：將完整對話匯出為 JSON 或 Markdown 格式，用於文件歸檔或團隊分享
- 清理過期資料：設定自動清理策略，或手動刪除不再需要的 Workspace，釋放磁碟空間
- 分支對話：從歷史對話的任意節點建立分支（Fork），探索不同的任務路徑而不影響原始記錄
3.3 Channel 狀態監控
如果你已經為 OpenClaw 設定了 Telegram Bot、Slack App 或其他 Channel，Dashboard 的 Channel 頁面會顯示每個通道的即時狀態。[9]
- 連線健康度：綠色 / 黃色 / 紅色指示燈標示每個 Channel 的連線狀態
- 訊息統計：過去 24 小時的訊息收發數量、平均回應延遲、錯誤率
- 錯誤日誌：Channel 連線中斷、API 認證失敗等異常事件的詳細記錄
- 快速重連：對於斷線的 Channel，可直接點擊「Reconnect」按鈕嘗試重新建立連線
3.4 系統資源監控
Dashboard 的 Overview 頁面包含系統資源的即時監控面板，讓你不需要 SSH 到伺服器就能掌握運行狀況：
- CPU 與記憶體使用率：以折線圖顯示過去 1 小時 / 24 小時 / 7 天的資源使用趨勢
- Gateway 連線數：目前連接到 Gateway 的 Node 數量、Client 數量與 WebSocket 連線總數
- 任務佇列深度：等待執行的任務數量，幫助你判斷是否需要增加 Node 以提升吞吐量
- LLM API 用量：各模型供應商的 API 呼叫次數、Token 消耗量與預估費用
# CLI 等效操作
openclaw gateway status --deep
openclaw gateway status --json四、Control UI 設定
Gateway Dashboard 預設僅在本機可存取（127.0.0.1），但一旦你將 Gateway 設定為 Remote 模式或透過隧道對外開放，就必須啟用 Control UI 的安全機制。[4][5]
4.1 gateway.auth.token
Dashboard 的存取認證與 Gateway 的 WebSocket 認證共用同一個 Token。當你在瀏覽器開啟 Dashboard 時，系統會要求你輸入 Gateway Token 才能進入管理介面。
# 產生或更新 Gateway Token
openclaw doctor --generate-gateway-token
# Token 格式：ogt_ 前綴 + 32 字元隨機字串
# 例如：ogt_a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6
# 在 openclaw.json 中的位置
{
"gateway": {
"auth": {
"token": "ogt_a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6",
"dashboard_enabled": true,
"session_timeout_minutes": 480
}
}
}如果你在 Local 模式下使用且沒有設定 Token，Dashboard 會跳過認證直接顯示管理介面。但只要涉及遠端存取，Token 就是必須的安全措施。[5]
4.2 allowedOrigins
allowedOrigins 設定控制哪些網域的瀏覽器請求可以存取 Dashboard。這是防止跨站請求偽造（CSRF）攻擊的重要防線。
# 設定允許的來源網域
openclaw config set gateway.allowed_origins \
'["https://gateway.yourdomain.com", "https://admin.yourdomain.com"]'
# 在 openclaw.json 中的完整結構
{
"gateway": {
"allowed_origins": [
"https://gateway.yourdomain.com",
"https://admin.yourdomain.com"
],
"cors": {
"enabled": true,
"allow_credentials": true,
"max_age": 86400
}
}
}如果你透過反向代理（Nginx / Caddy）存取 Dashboard，allowedOrigins 中的網域必須與使用者在瀏覽器地址列看到的網域一致。否則瀏覽器會因 CORS 限制而封鎖所有 API 請求。[4]
4.3 Dashboard 顯示選項
你可以進一步客製化 Dashboard 的顯示行為：
# 停用 Dashboard（僅保留 WebSocket 與 REST API）
openclaw config set gateway.auth.dashboard_enabled false
# 設定自動登出時間（預設 480 分鐘 = 8 小時）
openclaw config set gateway.auth.session_timeout_minutes 60
# 啟用唯讀模式（只能查看，不能修改設定）
openclaw config set gateway.auth.dashboard_readonly true
# 隱藏特定功能區（例如不讓非管理員看到日誌）
openclaw config set gateway.auth.dashboard_sections \
'["overview", "agents", "channels"]'五、遠端存取 Web UI
Dashboard 的最大價值在遠端場景中才真正體現。當 OpenClaw Gateway 部署在雲端伺服器或辦公室的工作站上，你需要一種安全的方式從外部裝置存取 Dashboard。以下介紹三種主流方案。[10]
5.1 Tailscale（推薦）
Tailscale 是零設定的 WireGuard VPN，可在所有裝置間建立加密隧道。它是存取遠端 Dashboard 的最佳方案——無需開放任何 Port、無需設定 DNS、無需管理 TLS 憑證。
# 步驟一：在 Gateway 伺服器上安裝 Tailscale
curl -fsSL https://tailscale.com/install.sh | sh
sudo tailscale up
# 步驟二：確認 Tailscale IP
tailscale ip -4
# 例如：100.64.0.1
# 步驟三：在客戶端裝置也安裝 Tailscale
# macOS / Windows / iOS / Android 都支援
sudo tailscale up
# 步驟四：從客戶端瀏覽器直接存取
# http://100.64.0.1:18789
# 或使用 MagicDNS：
# http://my-server.tailnet-name.ts.net:18789Tailscale 的免費方案支援最多 100 台裝置，對絕大多數個人與小團隊而言已經足夠。[10]
5.2 SSH Tunnel
如果你已經可以 SSH 到 Gateway 伺服器，最簡單的方式是建立一條 SSH 隧道，將遠端的 Dashboard Port 轉發到本機：
# 在你的筆電上執行
ssh -L 18789:127.0.0.1:18789 user@your-server-ip
# 保持 SSH 連線開啟，然後在本機瀏覽器開啟：
# http://127.0.0.1:18789
# 使用 -N 和 -f 參數在背景運行
ssh -fNL 18789:127.0.0.1:18789 user@your-server-ip
# 需要關閉時
# macOS/Linux：
kill $(lsof -t -i :18789 -sTCP:LISTEN)
# 或：
ps aux | grep "ssh -fNL" | grep -v grep | awk '{print $2}' | xargs killSSH Tunnel 的優勢是不需要額外安裝任何軟體，但每次連線都需要手動建立隧道，且在不穩定的網路環境中容易斷線。可以搭配 autossh 實現自動重連。
5.3 Cloudflare Tunnel
對於需要穩定且持久化遠端存取的場景，Cloudflare Tunnel（前身為 Argo Tunnel）提供了企業級的解決方案。它在 Gateway 伺服器與 Cloudflare 邊緣之間建立加密隧道，讓你透過自訂網域存取 Dashboard，同時享有 Cloudflare 的 DDoS 防護與 Zero Trust 存取控制。
# 步驟一：安裝 cloudflared
# macOS
brew install cloudflared
# Linux
curl -fsSL https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64 \
-o /usr/local/bin/cloudflared && chmod +x /usr/local/bin/cloudflared
# 步驟二：認證並建立 Tunnel
cloudflared tunnel login
cloudflared tunnel create openclaw-dashboard
# 步驟三：設定 Tunnel 路由
# ~/.cloudflared/config.yml
tunnel: <your-tunnel-id>
credentials-file: /root/.cloudflared/<your-tunnel-id>.json
ingress:
- hostname: dashboard.yourdomain.com
service: http://127.0.0.1:18789
- service: http_status:404
# 步驟四：設定 DNS 並啟動
cloudflared tunnel route dns openclaw-dashboard dashboard.yourdomain.com
cloudflared tunnel run openclaw-dashboard
# 步驟五：在 Cloudflare Zero Trust 設定存取策略
# 只允許特定 Email 地址存取 DashboardCloudflare Tunnel 的免費方案無流量限制，搭配 Zero Trust 的 Email OTP 認證，可以讓非技術團隊成員透過簡單的 Email 驗證就能安全存取 Dashboard——完全不需要 VPN 客戶端或 SSH 金鑰。
六、第三方 GUI 方案
如果 Gateway Dashboard 的功能無法滿足特定需求，OpenClaw 的開放架構允許你接入第三方 GUI 前端或自建介面。[3]
6.1 OpenWebUI 整合
OpenWebUI 是一個熱門的開源聊天介面專案，原本設計用於 Ollama 與 OpenAI 相容 API。由於 OpenClaw Gateway 同時提供 OpenAI 相容的 REST API 端點，你可以將 OpenWebUI 指向 Gateway，獲得更豐富的聊天體驗。
# 使用 Docker 啟動 OpenWebUI，指向 OpenClaw Gateway
docker run -d \
--name openwebui \
-p 3000:8080 \
-e OPENAI_API_BASE_URL=http://host.docker.internal:18789/v1 \
-e OPENAI_API_KEY=ogt_your_gateway_token \
-v open-webui:/app/backend/data \
ghcr.io/open-webui/open-webui:main
# 在瀏覽器開啟 http://localhost:3000
# OpenWebUI 會將請求轉發至 OpenClaw GatewayOpenWebUI 提供了 Dashboard 所沒有的功能，例如 Markdown 預覽、程式碼語法高亮、檔案上傳、對話分享連結等，適合需要豐富聊天體驗的場景。
6.2 自建前端
OpenClaw Gateway 的 REST API 與 WebSocket API 都有完整的文件，你可以使用任何前端框架（React、Vue、Svelte 等）自建管理介面。
# Gateway REST API 範例
# 取得所有 Agent 清單
curl -H "Authorization: Bearer ogt_your_token" \
http://127.0.0.1:18789/api/agents
# 取得特定 Agent 的對話歷史
curl -H "Authorization: Bearer ogt_your_token" \
http://127.0.0.1:18789/api/agents/research-bot/conversations
# 發送訊息給 Agent（REST 方式）
curl -X POST \
-H "Authorization: Bearer ogt_your_token" \
-H "Content-Type: application/json" \
-d '{"message": "幫我搜尋最新的 AI 安全研究論文"}' \
http://127.0.0.1:18789/api/agents/research-bot/chat
# WebSocket 即時對話
# ws://127.0.0.1:18789/ws?token=ogt_your_token自建前端的典型場景包括：將 OpenClaw 代理嵌入企業內部平台、建立垂直領域的專用操作介面、或整合到現有的 IT 監控儀表板中。[3]
七、桌面端整合技巧
除了瀏覽器中的 Web UI，OpenClaw 在各作業系統的桌面端也有便利的整合方式，讓你的日常操作更加順暢。
7.1 macOS 整合
# 將 openclaw 加入 PATH（安裝時通常已自動完成）
export PATH="$HOME/.openclaw/bin:$PATH"
# 建立 Spotlight 可搜尋的應用程式捷徑
cat <<'EOF' > /tmp/OpenClaw-Dashboard.command
#!/bin/bash
open "http://127.0.0.1:18789"
EOF
chmod +x /tmp/OpenClaw-Dashboard.command
mv /tmp/OpenClaw-Dashboard.command ~/Applications/
# Alfred / Raycast 快捷指令
# 建立一個 Workflow，關鍵字輸入 "oc" 即可：
# 1. 啟動 Gateway（若未運行）
# 2. 開啟 Dashboard
# 系統托盤整合（macOS 原生支援）
# Gateway 啟動後會自動在選單列顯示螃蟹圖示
# 點擊圖示可快速存取：
# - 開啟 Dashboard
# - 查看 Gateway 狀態
# - 啟動 / 停止 Gateway
# - 最近的 Agent 對話7.2 Windows 整合
# PowerShell Profile 快捷函式
# 加入 $PROFILE 中（通常在 ~\Documents\PowerShell\Microsoft.PowerShell_profile.ps1）
function oc-dash { Start-Process "http://127.0.0.1:18789" }
function oc-status { openclaw gateway status }
function oc-tui { openclaw tui $args }
# Windows Terminal 自訂設定檔
# 在 settings.json 中新增 OpenClaw 專用 Profile：
{
"name": "OpenClaw",
"commandline": "openclaw tui",
"icon": "%USERPROFILE%\\.openclaw\\icon.png",
"startingDirectory": "%USERPROFILE%",
"colorScheme": "One Half Dark"
}
# 工作列捷徑
# 右鍵 Desktop > 新增 > 捷徑
# 目標：cmd /c start http://127.0.0.1:18789
# 名稱：OpenClaw Dashboard7.3 Linux 整合
# GNOME / KDE 桌面捷徑
cat <<EOF > ~/.local/share/applications/openclaw-dashboard.desktop
[Desktop Entry]
Name=OpenClaw Dashboard
Comment=OpenClaw Agent Management Dashboard
Exec=xdg-open http://127.0.0.1:18789
Icon=web-browser
Type=Application
Categories=Development;Utility;
EOF
# i3 / Sway 快捷鍵
# 在 ~/.config/i3/config 中加入：
bindsym $mod+Shift+o exec xdg-open http://127.0.0.1:18789
# Shell Alias（bash / zsh）
echo 'alias ocd="openclaw dashboard"' >> ~/.bashrc
echo 'alias ocs="openclaw gateway status"' >> ~/.bashrc
echo 'alias occ="openclaw tui"' >> ~/.bashrc八、企業場景：非工程師如何使用 OpenClaw
OpenClaw 的圖形化介面設計不僅是為了「好看」，更是為了讓 AI 代理的能力擴展到整個組織——包括行銷、業務、人資、財務等不熟悉命令列的部門。[6][7]
8.1 部署架構建議
企業場景的典型部署架構如下：
# 企業部署架構
[行銷團隊 - 瀏覽器] ──┐
[業務團隊 - 瀏覽器] ──┼── Cloudflare Zero Trust ── [Nginx] ── [Gateway :18789]
[PM 團隊 - 瀏覽器] ──┘ |
┌────────┼────────┐
[Node 1] [Node 2] [Node 3]
(研究代理) (文案代理) (數據代理)這個架構的關鍵設計：
- Cloudflare Zero Trust：以企業 Email 或 SSO 進行身份認證，非技術人員不需要 VPN 或 SSH 金鑰
- 角色分離：Dashboard 的唯讀模式讓非管理員只能使用 Agent 對話功能，不能修改系統設定
- 多 Node 部署：不同部門的代理分別在獨立 Node 上運行，互不影響
8.2 為非工程師設定操作流程
以下是讓非工程師快速上手的標準流程：
- IT 部門部署 Gateway 並設定 Cloudflare Tunnel + Zero Trust
- IT 部門建立專屬 Agent（例如「行銷文案助理」），預設好系統提示詞與 Skill 權限
- 使用者收到一個 URL（例如
https://ai.company.com）與操作說明 - 使用者以企業 Email 完成 OTP 驗證，進入 Dashboard
- 使用者在 Agent 對話區直接輸入需求，就像使用 ChatGPT 一樣自然
整個過程中，使用者不需要安裝任何軟體、不需要理解終端機指令、不需要知道 Gateway 或 Node 的技術細節。對他們來說，OpenClaw 就是一個「可以做更多事的 ChatGPT」。
8.3 常見企業使用案例
| 部門 | Agent 名稱 | 典型任務 | 使用的 Skill |
|---|---|---|---|
| 行銷 | content-writer | 社群貼文撰寫、SEO 文案產生 | browser, file |
| 業務 | lead-researcher | 潛在客戶研究、競品分析 | browser |
| 人資 | hr-assistant | 職位描述撰寫、面試問題產生 | file |
| 財務 | report-analyzer | 財報摘要、數據趨勢分析 | file, shell |
| PM | spec-drafter | 需求文件撰寫、技術規格整理 | browser, file |
九、安全最佳實踐
將 Dashboard 對外開放意味著 OpenClaw 的管理介面暴露在更廣泛的攻擊面中。以下安全措施是生產環境的基本要求。[5]
9.1 Token 管理
- 強度要求：使用
openclaw doctor --generate-gateway-token產生的 Token 預設為 32 字元隨機字串，強度足夠。切勿使用簡單密碼替代 - 定期輪替：建議每 90 天更換一次 Token，在團隊成員異動時立即更換
- 安全儲存：Token 不應出現在 Git 倉庫、聊天記錄或 Email 中。使用環境變數或密碼管理工具傳遞
# 輪替 Token（舊 Token 立即失效）
openclaw doctor --generate-gateway-token --force
# 透過環境變數管理 Token
export OPENCLAW_GATEWAY_TOKEN=ogt_new_token_here
openclaw gateway restart
# 查看最近的日誌記錄
openclaw logs --follow --limit 1009.2 HTTPS 加密
Dashboard 以 HTTP 提供服務，Token 在傳輸中以明文方式傳送。任何非本機的存取都必須透過 HTTPS。最簡單的方式是使用 Caddy（自動 TLS）或 Nginx + Let's Encrypt。
# Caddy 自動 HTTPS（最簡配置）
# /etc/caddy/Caddyfile
dashboard.yourdomain.com {
reverse_proxy 127.0.0.1:18789
}
# Nginx + Let's Encrypt
# /etc/nginx/sites-available/openclaw-dashboard
server {
listen 443 ssl http2;
server_name dashboard.yourdomain.com;
ssl_certificate /etc/letsencrypt/live/dashboard.yourdomain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/dashboard.yourdomain.com/privkey.pem;
location / {
proxy_pass http://127.0.0.1:18789;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_read_timeout 3600s;
}
}9.3 存取控制
- allowedOrigins：限制可存取 Dashboard 的網域來源
- IP 白名單：在反向代理層設定，只允許特定 IP 範圍存取
- Rate Limiting：限制每個 IP 的請求頻率，防止暴力破解 Token
- 唯讀模式：對非管理員啟用
dashboard_readonly，防止誤操作
# 在 Nginx 設定 Rate Limiting
limit_req_zone $binary_remote_addr zone=dashboard:10m rate=10r/s;
server {
location / {
limit_req zone=dashboard burst=20 nodelay;
proxy_pass http://127.0.0.1:18789;
}
}
# 在 Nginx 設定 IP 白名單
location / {
allow 10.0.0.0/8; # 內網
allow 100.64.0.0/10; # Tailscale
deny all;
proxy_pass http://127.0.0.1:18789;
}十、疑難排解
以下整理 Dashboard Web UI 最常遇到的問題與解決方案。[8]
10.1 Dashboard 無法開啟
症狀：瀏覽器顯示「無法連線」或「ERR_CONNECTION_REFUSED」
# 排查步驟一：確認 Gateway 正在運行
openclaw gateway status
# 排查步驟二：確認 Gateway 監聽的地址與 Port
ss -tlnp | grep 18789
# 應顯示 127.0.0.1:18789 LISTEN
# 排查步驟三：確認 Dashboard 未被停用
openclaw config get gateway.auth.dashboard_enabled
# 應顯示 true
# 排查步驟四：直接測試 HTTP 端點
curl -v http://127.0.0.1:18789/health
# 常見原因：Gateway 啟動時使用了 --headless 且 dashboard_enabled 為 false
# 修正：
openclaw config set gateway.auth.dashboard_enabled true
openclaw gateway restart10.2 Token 認證失敗
症狀：Dashboard 登入頁面顯示「Invalid Token」或「Authentication Failed」
# 排查步驟一：確認 Token 是否正確
openclaw config get gateway.auth.token
# 排查步驟二：確認瀏覽器沒有快取舊的 Session
# 清除瀏覽器 Cookie 並重新整理
# 排查步驟三：重新產生 Token
openclaw doctor --generate-gateway-token --force
# 複製新 Token 並在 Dashboard 登入頁面重新輸入10.3 遠端存取時 WebSocket 斷線
症狀：Dashboard 頁面開啟後即時資料不更新，或頻繁顯示「Connection Lost」
# 最常見原因：反向代理未正確設定 WebSocket 轉發
# Nginx 修正：確保 Upgrade 標頭正確傳遞
location / {
proxy_pass http://127.0.0.1:18789;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_read_timeout 3600s; # 重要：至少 1 小時
proxy_send_timeout 3600s;
}
# Cloudflare 限制：免費方案的 WebSocket 連線有 100 秒 idle timeout
# 解決方案：在 Gateway 設定心跳間隔
openclaw config set gateway.websocket.ping_interval 3010.4 CORS 錯誤
症狀：瀏覽器開發者工具顯示 Access-Control-Allow-Origin 相關錯誤
# 確認 allowedOrigins 包含正確的網域
openclaw config get gateway.allowed_origins
# 修正：加入你的存取網域
openclaw config set gateway.allowed_origins \
'["https://dashboard.yourdomain.com"]'
openclaw gateway restart10.5 Dashboard 顯示空白
症狀：瀏覽器可以連線但頁面空白，開發者工具顯示 JavaScript 錯誤
# 排查步驟一：清除瀏覽器快取
# 按 Ctrl+Shift+R (Windows/Linux) 或 Cmd+Shift+R (macOS) 強制重新整理
# 排查步驟二：確認 OpenClaw 版本
openclaw --version
# Dashboard 前端可能與 Gateway 版本不相容
# 確保兩者為同一版本
# 排查步驟三：更新 OpenClaw
curl -fsSL https://openclaw.ai/install.sh | bash
openclaw gateway restart結語
OpenClaw 的圖形化操作能力，從 Gateway Dashboard Web UI 到桌面端整合，代表了一個重要的設計理念：強大的工具不應該只屬於會寫程式的人。CLI 是開發者的效率利器，但 Web UI 才是 AI 代理走入全組織的關鍵橋樑。[7]
本文覆蓋的操作路徑可以總結為三個漸進層次：
- 第一層：本機 Dashboard —
openclaw dashboard一鍵開啟瀏覽器管理介面，零額外設定，適合個人使用者快速上手 - 第二層：安全遠端存取 — Tailscale / SSH Tunnel / Cloudflare Tunnel 讓你從任何裝置管理遠端 Gateway，適合分散式團隊
- 第三層：企業級 GUI 部署 — 搭配 OpenWebUI、自建前端、Zero Trust 認證與角色權限控制，為整個組織提供接近商用 SaaS 的操作體驗
選擇哪個層次取決於你的具體需求。一個個人開發者可能只需要第一層；一個 5 人遠端團隊適合第二層；而一個需要讓行銷、業務、人資部門都能使用 AI 代理的企業，則需要完整的第三層部署。[6]
隨著 OpenClaw 社群持續發展，Dashboard 的功能也在快速迭代。[2] 未來可以期待更完善的團隊協作功能、更細緻的 RBAC 權限模型、內建的 Agent 模板市場，以及移動裝置原生應用程式。建議持續關注官方設定文件與社群討論，及時掌握最新的圖形化操作能力。[1]
