ClawPort

您AI智能体团队的可视化指挥中心。

官网 | 安装指南 | API文档 | npm

ClawPort是一个开源仪表板，用于管理、监控并直接与您的OpenClaw AI智能体进行交互。它连接到您本地的OpenClaw网关，为您提供组织架构图、支持视觉和语音的直接智能体聊天、看板、定时任务监控、成本跟踪、带有实时日志流的活动控制台以及记忆浏览器——所有功能集成于一处。

无需单独的AI API密钥。所有请求均通过您的OpenClaw网关路由。

更多截图

聊天 -- 流式文本、视觉、语音及文件附件	看板 -- 可跨智能体拖放的任务板
管道 -- 带健康检查的DAG可视化	计划 -- 每周热力图和作业管理
活动 -- 历史日志浏览器，支持JSON展开	实时日志 -- 实时流式小部件
成本 -- 令牌使用量、异常情况及优化建议	记忆 -- 团队记忆浏览器，支持Markdown渲染

快速入门

1. 安装OpenClaw

ClawPort需要一个正在运行的OpenClaw实例。如果您还没有：

# 安装OpenClaw
curl -fsSL https://openclaw.ai/install.sh | bash

# 运行引导向导（设置工作空间、网关和守护进程）
openclaw onboard --install-daemon

完成引导后，请验证网关是否正在运行：

openclaw gateway status

您应该会看到网关URL（默认为localhost:18789）和认证令牌。如果您使用自定义端口，clawport setup将自动检测。更多详细信息请参阅OpenClaw文档。

2. 安装ClawPort

注意： npm包名为clawport-ui。CLI命令为clawport。 请勿安装无关的clawport包。

npm install -g clawport-ui

3. 连接并启动

# 自动检测您的OpenClaw配置并写入`.env.local`
clawport setup

# 启动仪表板
clawport dev

打开http://localhost:3000。引导向导将指导您命名门户、选择主题并设置操作员身份。

git clone https://github.com/JohnRiceML/clawport-ui.git
cd clawport-ui
npm install
npm run setup
npm run dev

功能

• 组织架构图 -- 您整个智能体团队的交互式组织结构图。层次关系、定时任务状态及相互联系一目了然。基于React Flow实现自动布局。
• 聊天 -- 流式文本聊天、支持视觉的图片附件、带波形播放的语音消息、文件附件、剪贴板粘贴及拖放功能。对话在本地持久化。
• 看板 -- 用于跨智能体管理工作任务的任务板。可拖放卡片，并附带智能体分配和聊天上下文。
• 定时任务监控 -- 所有计划任务的实时状态。可按状态筛选、将错误置顶、展开查看详情。每60秒自动刷新。
• 成本仪表板 -- 跨所有定时任务的令牌使用量和成本分析。每日成本图表、按任务细分、模型分布、异常检测、周环比趋势及缓存节省。
• 活动控制台 -- 历史事件的日志浏览器，以及浮动的实时流小部件。点击任意日志行可展开原始JSON。实时流小部件在页面导航间保持存在。
• 记忆浏览器 -- 阅读团队记忆、长期记忆及每日日志。支持Markdown渲染、JSON语法高亮、搜索和下载。附有分类最佳实践指南的标签页。
• 智能体详情 -- 每个智能体的完整档案：SOUL.md查看器、工具、层级关系、定时任务、语音ID及直接聊天链接。
• 五种主题 -- 暗色、玻璃、彩色、浅色和系统默认。全部采用CSS自定义属性，可即时切换。
• 自动发现 -- 自动从您的OpenClaw工作空间中发现智能体。无需配置文件。

工作原理

ClawPort读取您的OpenClaw工作空间以发现智能体，然后连接到网关进行所有AI操作：

浏览器  -->  ClawPort (Next.js)  -->  OpenClaw网关（默认localhost:18789）  -->  Claude
                  |                          |
                  |                     文本：/v1/chat/completions（流式SSE）
                  |                     视觉：通过CLI调用openclaw gateway call chat.send
                  |                     音频：/v1/audio/transcriptions（Whisper）
                  |
             读取自：
               $WORKSPACE_PATH/agents/    （智能体SOUL.md文件）
               $WORKSPACE_PATH/memory/    （团队记忆）
               openclaw cron list         （计划任务）

所有AI调用——聊天、视觉、TTS、转录——均通过网关路由。只需一个令牌，无需单独的API密钥。

配置

必需环境变量

可选

运行clawport setup会自动检测所有必需值并写入.env.local文件。如果以全局方式安装且无法写入软件包目录，则会将配置写入~/.config/clawport-ui/.env.local。有关手动配置、智能体自定义及故障排除，请参阅SETUP.md。

代理发现

ClawPort 会自动从您的 OpenClaw 工作空间中发现代理，无需配置文件。

扫描内容：

• $WORKSPACE_PATH/SOUL.md -- 根编排器
• $WORKSPACE_PATH/IDENTITY.md -- 根代理名称和表情符号
• agents/<name>/SOUL.md -- 顶级代理
• agents/<name>/sub-agents/*.md -- 平铺的子代理文件
• agents/<name>/members/*.md -- 团队成员文件
• agents/<name>/<subdir>/SOUL.md -- 嵌套子目录中的代理

忽略内容：

• 没有 SOUL.md 的目录（如 briefs/、数据文件）
• sub-agents/ 和 members/ 中非 .md 文件

如需完全控制名称、颜色、层级结构和工具，请创建 $WORKSPACE_PATH/clawport/agents.json。模式和示例请参阅 SETUP.md。

CLI

clawport dev      # 启动开发服务器
clawport start    # 构建并启动生产服务器
clawport setup    # 自动检测 OpenClaw 配置，并写入 .env.local
clawport status   # 检查网关连通性和配置
clawport help     # 显示使用方法

测试

npm test             # 32 个测试套件共 781 个测试（Vitest）
npx tsc --noEmit     # 类型检查（无错误）
npx next build       # 生产构建

技术栈

• Next.js 16（App Router，Turbopack）
• React 19 / TypeScript 5
• Tailwind CSS 4
• React Flow -- 组织架构图
• Vitest 4 -- 测试
• OpenClaw -- AI 网关和代理运行时

文档

贡献

欢迎贡献。开发环境搭建、代码风格及 PR 提交指南请参阅 CONTRIBUTING.md。

许可证

MIT

由 John Rice 使用 Jarvis（OpenClaw AI）构建。

ClawPort 快速上手指南

ClawPort 是一个专为 OpenClaw AI 智能体团队设计的可视化指挥中心。它提供组织架构视图、直接对话（支持视觉与语音）、看板管理、定时任务监控、成本追踪及实时日志流等功能，所有操作均通过本地 OpenClaw 网关路由，无需额外配置 AI API 密钥。

环境准备

在开始之前，请确保您的系统满足以下要求：

• 操作系统：Linux, macOS 或 Windows (WSL2 推荐)
• 前置依赖：
  • Node.js: 建议版本 18+ (用于运行 UI)
  • npm: Node.js 包管理器
  • OpenClaw: 必须已安装并运行 OpenClaw 实例（作为 AI 网关）
• 网络环境：需能访问 openclaw.ai 进行初始化安装（若国内访问受限，请配置相应代理或使用镜像源）

安装步骤

1. 安装并初始化 OpenClaw

ClawPort 依赖 OpenClaw 网关运行。如果您尚未安装，请执行以下命令：

# 安装 OpenClaw
curl -fsSL https://openclaw.ai/install.sh | bash

# 运行引导向导（设置工作区、网关和守护进程）
openclaw onboard --install-daemon

安装完成后，验证网关状态：

openclaw gateway status

确认输出中包含网关 URL（默认 localhost:18789）和认证令牌。

2. 安装 ClawPort UI

注意：npm 包名为 clawport-ui，命令行工具为 clawport。请勿安装无关的 clawport 包。

npm install -g clawport-ui

(可选) 若需使用国内加速安装，可配置 npm 镜像源：

npm config set registry https://registry.npmmirror.com
npm install -g clawport-ui

3. 连接配置与启动

# 自动检测 OpenClaw 配置并生成 .env.local 文件
clawport setup

# 启动开发服务器
clawport dev

基本使用

1. 访问界面： 在浏览器中打开 http://localhost:3000。

2. 初始设置： 首次访问时，跟随界面向导完成以下操作：

   • 命名您的门户
   • 选择主题（支持深色、玻璃态、彩色等 5 种主题）
   • 设置操作员身份

3. 核心功能体验：

   • 组织架构 (Org Map)：查看智能体团队的层级关系和状态。
   • 直接对话 (Chat)：点击任意智能体进行流式文本对话，支持上传图片（视觉分析）、发送语音消息及文件附件。
   • 任务看板 (Kanban)：在不同智能体间拖拽任务卡片，管理工作流。
   • 监控与日志：在 "Activity" 面板查看实时日志流，或在 "Costs" 面板分析 Token 消耗趋势。

一切配置均由 clawport setup 自动完成，无需手动编写配置文件即可自动发现工作区内的所有智能体。