ClawPort

AI代理团队的视觉化指挥中心。

网站 | 设置指南 | API文档 | npm

ClawPort是一个开源的仪表盘，用于管理、监控并直接与您的OpenClaw AI代理进行交互。它连接到您的本地OpenClaw网关，为您提供组织架构图、直接代理聊天（支持视觉和语音）、看板板、cron监控、成本追踪、活动控制台（带实时日志流）和记忆浏览器——所有功能都在一个平台上。

无需单独的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

功能

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

工作原理

ClawPort读取您的OpenClaw工作区以发现代理，然后连接到网关进行所有AI操作：

浏览器  -->  ClawPort (Next.js)  -->  OpenClaw网关 (默认localhost:18789)  -->  Claude
                  |                          |
                  |                     文本: /v1/chat/completions (流式SSE)
                  |                     视觉: openclaw网关调用chat.send (CLI)
                  |                     音频: /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/<名称>/SOUL.md -- 一级代理
• agents/<名称>/sub-agents/*.md -- 平铺子代理文件
• agents/<名称>/members/*.md -- 团队成员文件
• agents/<名称>/<子目录>/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             # 781个测试，跨32个套件 (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）构建。