JohnRiceML/clawport-ui

ClawPort는 OpenClaw AI 에이전트(agents)를 관리, 모니터링 및 직접 대화할 수 있는 오픈 소스 대시보드(dashboard)입니다. 이 도구는 로컬 OpenClaw 게이트웨이(gateway)에 연결하여 조직도(org chart), 시각 및 음성 기능이 포함된 에이전트 직접 채팅, 칸반 보드(kanban board), 크론 모니터링(cron monitoring), 비용 추적(cost tracking), 실시간 로그 스트리밍이 가능한 활동 콘솔(activity console), 그리고 메모리 브라우저(memory browser)를 모두 한곳에서 제공합니다.

별도의 AI API 키는 필요하지 않습니다. 모든 것은 OpenClaw 게이트웨이를 통해 라우팅됩니다.

추가 스크린샷

ClawPort를 사용하려면 실행 중인 OpenClaw 인스턴스(instance)가 필요합니다. 아직 설치하지 않았다면 다음을 수행하세요:

# OpenClaw 설치
curl -fsSL https://openclaw.ai/install.sh | bash
# 온보딩 위저드(onboarding wizard) 실행 (워크스페이스, 게이트웨이 및 데몬 설정)
...

온보딩 후, 게이트웨이가 실행 중인지 확인하세요:

openclaw gateway status

게이트웨이 URL(기본값 localhost:18789)과 인증 토큰(auth token)이 표시되어야 합니다. 사용자 정의 포트(custom port)를 사용하는 경우, clawport setup이 이를 자동으로 감지합니다. 자세한 내용은 OpenClaw 문서를 참조하세요.

참고: npm 패키지 명은 clawport-ui입니다. CLI 명령어는 clawport입니다. 관련 없는 clawport 패키지를 설치하지 않도록 주의하세요.

npm install -g clawport-ui

# OpenClaw 설정을 자동 감지하여 .env.local 작성
clawport setup
# 대시보드 시작
...

http://localhost:3000을 엽니다. 온보딩 위저드가 포털 이름 지정, 테마 선택 및 운영자 신원(operator identity) 설정을 안내합니다.

소스에서 설치하기

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

Org Map (조직도)-- 전체 에이전트 팀의 인터랙티브한 조직도입니다. 계층 구조(Hierarchy), 크론(cron) 상태, 관계를 한눈에 파악할 수 있습니다. React Flow와 자동 레이아웃(auto-layout) 기능을 기반으로 작동합니다.

Chat (채팅)-- 스트리밍 텍스트 채팅, 비전(vision) 기능을 포함한 이미지 첨부, 파형 재생이 가능한 음성 메시지, 파일 첨부, 클립보드 붙여넣기 및 드래그 앤 드롭을 지원합니다. 대화 내용은 로컬에 유지됩니다.

Kanban (칸반)-- 에이전트 간의 작업을 관리하기 위한 태스크 보드입니다. 에이전트 할당 및 채팅 컨텍스트(context)를 포함한 드래그 앤 드롭 카드 기능을 제공합니다.

Cron Monitor (크론 모니터)-- 모든 예약된 작업(scheduled jobs)의 실시간 상태를 보여줍니다. 상태별 필터링, 오류 항목 상단 정렬, 상세 정보 확장이 가능합니다. 60초마다 자동으로 새로고침됩니다.

Cost Dashboard (비용 대시보드)-- 모든 크론 작업에 걸친 토큰 사용량 및 비용 분석을 제공합니다. 일일 비용 차트, 작업별 상세 내역, 모델 분포, 이상 탐지(anomaly detection), 전주 대비 추세(week-over-week trends) 및 캐시 절감액을 확인할 수 있습니다.

Activity Console (활동 콘솔)-- 과거 이벤트 기록을 위한 로그 브라우저와 플로팅 라이브 스트림 위젯을 제공합니다. 로그 행을 클릭하면 원본 JSON을 확장하여 볼 수 있습니다. 라이브 스트림 위젯은 페이지 이동 시에도 유지됩니다.

Memory Browser (메모리 브라우저)-- 팀 메모리, 장기 메모리(long-term memory) 및 일일 로그를 읽을 수 있습니다. 마크다운(Markdown) 렌더링, JSON 구문 강조(syntax highlighting), 검색 및 다운로드 기능을 지원합니다. 카테고리별 베스트 프랙티스(best practices)가 담긴 가이드 탭이 포함되어 있습니다.

Agent Detail (에이전트 상세 정보)-- 에이전트별 전체 프로필을 제공합니다: SOUL.md 뷰어, 도구(tools), 계층 구조, 크론, 음성 ID(voice ID) 및 직접 채팅 링크를 포함합니다.

Five Themes (다섯 가지 테마)-- Dark, Glass, Color, Light, System 테마를 지원합니다. 모든 CSS 사용자 정의 속성(custom properties)을 통해 즉시 전환할 수 있습니다.

Auto-Discovery (자동 탐색)-- OpenClaw 워크스페이스에서 에이전트를 자동으로 찾아냅니다. 별도의 설정 파일이 필요하지 않습니다.

ClawPort는 OpenClaw 워크스페이스를 읽어 에이전트를 탐색한 다음, 모든 AI 작업을 위해 게이트웨이(gateway)에 연결합니다:

브라우저(Browser) --> ClawPort (Next.js) --> OpenClaw Gateway (기본값 localhost:18789) --> Claude
| |
| 텍스트: /v1/chat/completions (스트리밍 SSE)
...

채팅, 비전, TTS(음성 합성), 전사(transcription)를 포함한 모든 AI 호출은 게이트웨이를 통해 라우팅됩니다. 하나의 토큰만 사용하며, 별도의 API 키는 필요하지 않습니다.

변수 (Variable)	설명 (Description)	찾는 방법 (How to find it)
WORKSPACE_PATH	OpenClaw 워크스페이스 (workspace) 경로	기본값: ~/.openclaw/agents/main/workspace (또는 레거시 ~/.openclaw/workspace)
OPENCLAW_BIN	openclaw 바이너리 (binary) 경로	which openclaw 실행
OPENCLAW_GATEWAY_TOKEN	게이트웨이 인증 토큰 (auth token)	openclaw gateway status 실행

변수 (Variable)	설명 (Description)
ELEVENLABS_API_KEY	에이전트 프로필의 음성 표시를 위한 ElevenLabs API 키

clawport setup을 실행하면

필요한 모든 값을 자동으로 감지하여 .env.local 파일에 작성합니다. 패키지가 전역(globally)으로 설치되었을 때 패키지 디렉토리에 쓰기 권한이 없다면, 대신 ~/.config/clawport-ui/.env.local에 작성합니다. 수동 설정, 에이전트 커스텀 및 문제 해결에 대해서는 SETUP.md를 참조하세요.

ClawPort는 OpenClaw 워크스페이스에서 에이전트를 자동으로 검색합니다. 별도의 설정 파일이 필요하지 않습니다.

스캔 대상:

$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)

무시 대상:

• SOUL.md가 없는 디렉토리 (예: briefs/, 데이터 파일)
• sub-agents/ 및 members/ 내의 .md가 아닌 파일

이름, 색상, 계층 구조 및 도구(tools)를 완전히 제어하려면 $WORKSPACE_PATH/clawport/agents.json을 생성하세요. 스키마(schema)와 예시는 SETUP.md를 참조하세요.

clawport dev # 개발 서버 시작
clawport start # 프로덕션 서버 빌드 및 시작
clawport setup # OpenClaw 설정을 자동 감지하여 .env.local 작성
...

npm test # 32개 스위트(suites)에 걸친 781개 테스트 (Vitest)
npx tsc --noEmit # 타입 체크 (Type-check, 오류 없음)
npx next build # 프로덕션 빌드 (Production build)

• Next.js 16 (App Router, Turbopack)
• React 19 / TypeScript 5
• Tailwind CSS 4
• React Flow -- 조직도 (org chart)
• Vitest 4 -- 테스트 (testing)
• OpenClaw -- AI 게이트웨이 (gateway) 및 에이전트 런타임 (agent runtime)

문서 (Document)	설명 (Description)
SETUP.md	전체 설정 가이드 (setup guide), 에이전트 커스터마이징 (agent customization), 문제 해결 (troubleshooting)
...

기여 (Contributions)를 환영합니다. 개발 환경 설정 (development setup), 코드 스타일 (code style), 그리고 PR 가이드라인 (PR guidelines)에 대해서는 CONTRIBUTING.md을 참조하세요.