Webclaw: Openclaw 技能的集中式 Web UI 与管理面板

作者:互联网

2026-03-29

AI教程

什么是 Webclaw Dashboard?

Webclaw 作为 OpenClaw 生态系统的官方图形界面,将原始的命令行交互转化为精致的基于浏览器的体验。它提供了一个中心枢纽,通过包含动态表单、数据表和交互式 AI 聊天面板的响应式仪表板来管理每个已安装的技能。它采用 Next.js 和 FastAPI 等现代 Web 技术构建,确保开发者和终端用户都能访问、管理且安全地使用 Openclaw 技能。

该工具作为一个基础设施层,能够自动解析其他技能的元数据以渲染相应的 UI 组件。无论您是需要监控系统状态、管理用户角色,还是可视化复杂的数据集,Webclaw 都提供了必要的工具来扩展您的智能体操作,而无需为每项新功能编写自定义前端代码。

下载入口:https://github.com/openclaw/skills/tree/main/skills/mailnike/webclaw

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

npx clawhub@latest install webclaw

2. 手动安装

将技能文件夹复制到以下位置之一

全局模式 ~/.openclaw/skills/ 工作区 /skills/

优先级:工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

请帮我使用 Clawhub 安装 webclaw。如果尚未安装 Clawhub,请先安装(npm i -g clawhub)。

Webclaw Dashboard 应用场景

  • 将多个 Openclaw 技能的管理集中到一个单一、安全的 Web 界面中。
  • 为非技术利益相关者提供用户友好的仪表板,以触发 AI 工作流并查看结果。
  • 通过 HTTPS 和企业级 JWT 身份验证,实现对本地 AI 智能体的安全远程访问。
  • 管理多用户环境,其中不同的团队成员通过基于角色的访问控制 (RBAC) 需要特定的访问级别。
  • 通过动态图表、看板和可搜索的数据表可视化特定技能的数据。
Webclaw Dashboard 工作原理
  1. 仪表板通过扫描本地环境中的所有已安装 Openclaw 技能及其相应的模式定义进行初始化。
  2. 它配置高性能的 Nginx 反向代理,以处理传入的 Web 流量并保护 API 端点。
  3. 用户通过基于 JWT 的系统进行身份验证,该系统颁发短期访问令牌和安全的 httpOnly 刷新令牌。
  4. 当用户选择一项技能时,系统根据该技能的特定元数据动态渲染 UI 组件(如树形视图或图表面板)。
  5. 在后端于隔离环境中执行相应逻辑之前,所有请求的操作都会针对 RBAC 引擎进行验证。
  6. 实时更新和 AI 聊天交互会流式传输回浏览器,同时所有变更操作都会记录在本地审核日志中以供合规查阅。

Webclaw Dashboard 配置指南

要为您的 Openclaw 技能部署仪表板,请运行标准安装命令,然后配置您的环境:

# 安装 webclaw 基础设施
openclaw install webclaw

# 检查服务状态
using webclaw, show me the dashboard status

安装后,您必须访问浏览器中的 /setup 路由以创建主管理员账户。如果您部署到公共服务器,请立即启用 SSL:

# 使用 Let's Encrypt 配置 HTTPS
using webclaw, setup-ssl --domain your-dashboard-domain.com

Webclaw Dashboard 数据架构与分类体系

Webclaw 在本地 SQLite 数据库中组织其基础设施和安全数据。它还允许其他 Openclaw 技能定义自定义实体,以便自动进行 UI 渲染。

表名 用途
webclaw_user 存储管理员和用户账户,密码采用 PBKDF2 哈希。
webclaw_role 管理基于角色的访问控制的权限集。
audit_log 维护所有系统更改和技能执行的历史记录。
chat_session 持久化仪表板聊天界面的 AI 交互历史。
webclaw_config 存储系统级设置,包括域名和 SSL 状态。
name: webclaw
version: 2.0.0
description: >
  Web dashboard for OpenClaw. Browser-based UI for any installed skill.
  Schema-driven rendering, JWT auth, RBAC, AI chat, real-time updates.
  Install web dashboard, manage users, configure SSL HTTPS, web admin panel.
author: AvanSaber / Nikhil Jathar
homepage: https://www.erpclaw.ai
source: https://github.com/avansaber/webclaw
tier: 0
category: infrastructure
requires: []
database: ~/.openclaw/webclaw/webclaw.sqlite
user-invocable: true
tags: [web, dashboard, ui, admin, login, ssl, https, users, roles]
metadata: {"openclaw":{"type":"executable","install":{"pre":"bash scripts/check_deps.sh","post":"bash scripts/install.sh","pip":"api/requirements.txt"},"requires":{"bins":["python3","node","npm","nginx","certbot","git","sudo"],"env":[],"optionalEnv":["WEBCLAW_DOMAIN"]},"os":["linux"]}}
cron:
  - expression: "0 2 * * *"
    timezone: "UTC"
    description: "Clean expired sessions and check SSL cert renewal"
    message: "Using webclaw, run the maintenance action."
    announce: false

webclaw

You are the Web Dashboard administrator for this OpenClaw instance. You manage a browser-based UI that provides forms, tables, charts, and AI chat for every installed skill.

Security Model

  • HTTPS enforced via Let's Encrypt (setup-ssl action)
  • JWT authentication — access tokens (15 min) + refresh tokens (7 days, httpOnly cookies)
  • RBAC — role-based permission checks before every skill action
  • Rate limiting — 5/min auth, 30/min writes, 100/min general (nginx)
  • Audit logging — all mutating actions logged to audit_log table
  • Passwords hashed with PBKDF2-HMAC-SHA256 (600K iterations)
  • Session invalidation on password change

Installation Requirements

This is an infrastructure package. Initial installation requires internet access and elevated privileges:

  • Source: Clones application code from GitHub at a pinned release tag (v2.0.0)
  • Dependencies: Installs Python and Node.js packages from standard registries within an isolated venv
  • System services: Configures nginx reverse proxy and systemd services (requires sudo)
  • SSL: Optional Let's Encrypt certificate via certbot

After installation, all runtime operations are local. No ongoing internet access is required for normal operation. No credentials or API keys are required. All data is stored locally in SQLite.

Skill Activation Triggers

Activate this skill when the user mentions: web dashboard, web UI, web interface, login page, HTTPS, SSL certificate, web users, roles, RBAC, nginx, web admin, dashboard access, browser access, setup web, install web dashboard.

Setup (First Use Only)

IMPORTANT: After installation, tell the user to open the setup page in their browser:

Open https://YOUR_SERVER/setup to create your admin account.

Steps:

  1. Open the URL shown in the install output (e.g., https://1.2.3.4/setup)
  2. Create the first admin account (email + password)
  3. Log in — all installed skills appear in the sidebar

To enable HTTPS with a custom domain: say "Set up SSL for yourdomain.com"

Quick Start (Tier 1)

Check Status

Using webclaw, show me the dashboard status
→ runs: status

Enable HTTPS

Set up SSL for erp.example.com
→ runs: setup-ssl --domain erp.example.com

Create a Web User

Create a web user for alice@company.com with Manager role
→ runs: create-user --email alice@company.com --full-name "Alice" --role Manager

Reset a Password

Reset the web password for alice@company.com
→ runs: reset-password --email alice@company.com

All Actions (Tier 2)

Action Args Description
status Service status, SSL, user count
setup-ssl --domain Configure HTTPS with Let's Encrypt
renew-ssl Check + renew SSL certificate
list-users List all web dashboard users
create-user --email, --full-name, --role Create user with temp password
reset-password --email Generate new temp password
disable-user --email Disable a user account
list-sessions Show active login sessions
clear-sessions Force all users to re-login
maintenance Cron: clean sessions, check cert
restart-services Restart API + frontend services
show-config Display current configuration

Quick Command Reference

User says Action
"Is the dashboard running?" status
"Set up SSL for example.com" setup-ssl --domain example.com
"Who has web access?" list-users
"Add web user bob@co.com" create-user --email bob@co.com
"Reset password for bob" reset-password --email bob@co.com
"Disable bob's web access" disable-user --email bob@co.com
"Who's logged in?" list-sessions
"Force everyone to re-login" clear-sessions
"Restart the web dashboard" restart-services
"Show web dashboard config" show-config

Proactive Suggestions

After create-user: remind user to share the temp password securely. After setup-ssl: confirm HTTPS redirect is working. After status shows ssl=false: suggest running setup-ssl. After status shows users=0: suggest opening /setup in browser.

Technical Details (Tier 3)

Architecture

  • Frontend: Next.js 16 + React 19 + shadcn/ui + Tailwind v4 (port 3000)
  • Backend: FastAPI + uvicorn (port 8001)
  • Proxy: nginx (port 80/443) → routes /api to backend, / to frontend
  • Database: SQLite at ~/.openclaw/webclaw/webclaw.sqlite

8 Generic UI Components

DataTable, FormView, DetailView, ChatPanel, ChartPanel, KanbanBoard, CalendarView, TreeView — all render dynamically from skill action responses.

Tables Owned

webclaw_user, webclaw_session, webclaw_config, webclaw_role, webclaw_user_role, webclaw_role_permission, chat_session, chat_message, audit_log

Script Path

scripts/db_query.py --action  [--key value ...]

Per-Skill Customization

Skills can add a webclaw section to their SKILL.md frontmatter:

webclaw:
  domain: "GRC & Audit"
  database: "~/.openclaw/auditclaw/data.sqlite"
  entities:
    risk:
      table: risk_register
      name_col: risk_title
      id_col: id
      search_cols: [risk_category, severity]