ClawPort

A visual command centre for your AI agent team.

Website | Setup Guide | API Docs | npm

ClawPort is an open-source dashboard for managing, monitoring, and talking directly to your OpenClaw AI agents. It connects to your local OpenClaw gateway and gives you an org chart, direct agent chat with vision and voice, a kanban board, cron monitoring, and a memory browser -- all in one place.

No separate AI API keys needed. Everything routes through your OpenClaw gateway.

Quick Start

1. Install OpenClaw

ClawPort requires a running OpenClaw instance. If you don't have one yet:

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

# Run the onboarding wizard (sets up workspace, gateway, and daemon)
openclaw onboard --install-daemon

After onboarding, verify the gateway is running:

openclaw gateway status

You should see your gateway URL (localhost:18789) and auth token. See the OpenClaw docs for more detail.

2. Install ClawPort

Note: The npm package is clawport-ui. The CLI command is clawport. Do not install the unrelated clawport package.

npm install -g clawport-ui

3. Connect and Launch

# Auto-detect your OpenClaw config and write .env.local
clawport setup

# Start the dashboard
clawport dev

Open http://localhost:3000. The onboarding wizard walks you through naming your portal, picking a theme, and setting up your operator identity.

Install from source instead

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

Features

• Org Map -- Interactive org chart of your entire agent team. Hierarchy, cron status, and relationships at a glance. Powered by React Flow with auto-layout.
• Chat -- Streaming text chat, image attachments with vision, voice messages with waveform playback, file attachments, clipboard paste and drag-and-drop. Conversations persist locally.
• Kanban -- Task board for managing work across agents. Drag-and-drop cards with agent assignment and chat context.
• Cron Monitor -- Live status of all scheduled jobs. Filter by status, sort errors to top, expand for details. Auto-refreshes every 60 seconds.
• Memory Browser -- Read team memory, long-term memory, and daily logs. Markdown rendering, JSON syntax highlighting, search, and download.
• Agent Detail -- Full profile per agent: SOUL.md viewer, tools, hierarchy, crons, voice ID, and direct chat link.
• Five Themes -- Dark, Glass, Color, Light, and System. All CSS custom properties -- switch instantly.
• Auto-Discovery -- Automatically finds agents from your OpenClaw workspace. No config file needed.

How It Works

ClawPort reads your OpenClaw workspace to discover agents, then connects to the gateway for all AI operations:

Browser  -->  ClawPort (Next.js)  -->  OpenClaw Gateway (localhost:18789)  -->  Claude
                  |                          |
                  |                     Text: /v1/chat/completions (streaming SSE)
                  |                     Vision: openclaw gateway call chat.send (CLI)
                  |                     Audio: /v1/audio/transcriptions (Whisper)
                  |
             Reads from:
               $WORKSPACE_PATH/agents/    (agent SOUL.md files)
               $WORKSPACE_PATH/memory/    (team memory)
               openclaw cron list         (scheduled jobs)

All AI calls -- chat, vision, TTS, transcription -- route through the gateway. One token, no separate API keys.

Configuration

Required Environment Variables

Optional

Running clawport setup auto-detects all required values and writes .env.local. See SETUP.md for manual configuration, agent customization, and troubleshooting.

Agent Discovery

ClawPort automatically discovers agents from your OpenClaw workspace. No configuration file needed.

What it scans: - $WORKSPACE_PATH/SOUL.md -- root orchestrator - $WORKSPACE_PATH/IDENTITY.md -- root agent name and emoji - agents/<name>/SOUL.md -- top-level agents - agents/<name>/sub-agents/*.md -- flat sub-agent files - agents/<name>/members/*.md -- team member files - agents/<name>/<subdir>/SOUL.md -- nested subdirectory agents

What it ignores: - Directories without SOUL.md (e.g., briefs/, data files) - Non-.md files in sub-agents/ and members/

For full control over names, colors, hierarchy, and tools, create $WORKSPACE_PATH/clawport/agents.json. See SETUP.md for the schema and examples.

CLI

clawport dev      # Start the development server
clawport start    # Build and start production server
clawport setup    # Auto-detect OpenClaw config, write .env.local
clawport status   # Check gateway reachability and config
clawport help     # Show usage

Testing

npm test             # 442 tests across 21 suites (Vitest)
npx tsc --noEmit     # Type-check (zero errors)
npx next build       # Production build

Stack

• Next.js 16 (App Router, Turbopack)
• React 19 / TypeScript 5
• Tailwind CSS 4
• React Flow -- org chart
• Vitest 4 -- testing
• OpenClaw -- AI gateway and agent runtime

Documentation

Contributing

Contributions are welcome. See CONTRIBUTING.md for development setup, code style, and PR guidelines.

License

MIT

Built by John Rice with Jarvis (OpenClaw AI).