ログとダッシュボードだけでは、複数のAIエージェントが何をしているか把握しづらい——そんな不満に応えるOSSが登場しました。

Claw3Dは、自前インフラ上で動かすAIエージェントを3Dオフィス空間に可視化するオープンソースプロジェクトです。GitHub Projects Communityの投稿では、PRレビューやスタンドアップ、並走作業を3D空間で追える点が紹介されています（参考）。

この記事では、Claw3Dの概要から導入の考え方、OpenClawやHermesとの接続方法までを整理します。

この記事でわかること

  • Claw3Dが解決する課題と3DオフィスUIの役割
  • PRレビュー・スタンドアップなど実運用向けの主な機能
  • gateway-first構成と対応ランタイム（OpenClaw・Hermes・デモ）
  • セルフホスト導入の前提条件と接続の流れ

ログだけでは見えない「エージェントの動き」が課題

AIエージェント（自律的にタスクを進めるAIプログラム）を複数運用すると、作業状況はターミナル出力やWebダッシュボードに散らばりがちです。どのエージェントがPRをレビューし、どれがテストを回しているかを一覧で追うのは難しく、チームで状況共有するにも情報が足りません。

Claw3Dの開発者LukeTheDev氏は、READMEで「Gatewayは制御プレーンにすぎず、製品そのものはオフィスである」と述べています（参考）。可視化レイヤーと実行レイヤーを分け、エージェントの動きを空間と動作で理解できるUIを目指している点が特徴です。

Claw3Dはエージェント作業の可視化レイヤー

GitHub - iamlukethedev/Claw3D: Claw3D is an open source 3D engine built on OpenClaw for creating games, simulations, and high-performance 3D applications.
Claw3D is an open source 3D engine built on OpenClaw for creating games, simulations, and high-performance 3D applicatio…
GitHub

Claw3Dは、AIエージェント向けの3Dバーチャルオフィスです。レトロ調の共有3D空間にエージェントがワーカーとして登場し、デスクや会議室を移動しながら作業する様子をリアルタイムで確認できます。

公式サイトでは「OpenClaw Headquarters in 3D」と位置づけられ、コードレビュー、スタンドアップ、タスク管理を3D空間から行う設計です（参考）。

READMEが示す主な用途は次のとおりです。

  • 共有3Dオフィス内でエージェントの作業をリアルタイム監視
  • GitHubやJiraと連携したスタンドアップの実施
  • オフィス内からのプルリクエスト（PR）レビュー
  • QAパイプラインとログのモニタリング
  • ジム空間でのスキル訓練
  • ジャニター機能によるセッションリセットとコンテキスト整理

2026年4月23日にリリースされたv0.1.4では、ランタイムプロファイル、複数フロアのオフィス、リモートオフィス間メッセージ、診断CLI claw3doctor が追加されています（参考）。

gateway-first構成で既存ランタイムに接続する

Claw3DはOpenClawやHermesを内蔵しません。フロントエンド、Studio、プロキシ層として動き、既存のゲートウェイ（エージェント実行基盤への接続窓口）に接続する設計です。

対応ランタイムは4種類です。

  • OpenClaw Gateway — 既存のゲートウェイフローで接続
  • Hermes — 同梱のWebSocketアダプター経由
  • custom — オーケストレーター連携用のHTTPランタイム
  • demo — フレームワーク不要のデモゲートウェイ

接続は2ホップ構成です。ブラウザがStudioの /api/gateway/ws に接続し、Studioが上流のゲートウェイへ第2のWebSocketを開きます。ゲートウェイ設定はStudioホスト側に保持され、ランタイム状態は接続先バックエンドに残ります（参考）。

READMEには「OpenClawチームとは無関係の非公式コミュニティプロジェクト」と明記されています。OpenClaw本体のリポジトリではない点に注意が必要です。

導入の前提と接続手順

動作にはNode.js 20以上とnpm 10以上が推奨されます。実際のエージェントランタイムを使う場合は、事前にOpenClawまたはHermesを起動し、ゲートウェイURLとトークンを把握しておく必要があります。

フレームワークなしでUIを試すなら、デモモードが使えます。

git clone https://github.com/iamlukethedev/Claw3D.git
cd Claw3D
npm install
cp .env.example .env
npm run demo-gateway
npm run dev

ブラウザで http://localhost:3000 を開き、接続画面で Demo backend を選んで ws://localhost:18789 に接続します。モックエージェントが動くデモゲートウェイが起動し、オフィス空間の挙動を確認できます。

OpenClawを使う場合は、ゲートウェイを起動したうえでStudioにURL（例: ws://localhost:18789）とトークンを入力します。Hermesの場合は npm run hermes-adapter でアダプターを起動し、接続画面で Hermes backend を選択します（参考）。

リモート環境ではTailscaleやSSHトンネルでゲートウェイを公開する構成がREADMEに記載されています。StudioをLANやTailscale越しに公開する際は STUDIO_ACCESS_TOKEN の設定が推奨されます。

技術スタックはNext.js（App Router）、React、TypeScript、Three.js、React Three Fiberです。3DオフィスはThree.js系、ビルダーUIはPhaserを使い分けています。

料金とホスティング選択肢

Claw3DはMITライセンスのオープンソースです。リポジトリをクローンして自前インフラにデプロイすれば、利用料はかかりません。DockerやVercelなど任意の環境への展開が可能です。

公式サイトでは、セルフホストに加えてホスト型プラン（月額29ドル、カスタムサブドメイン付き）が「COMING SOON」と案内されています（参考）。現時点で手軽に試すなら、デモモードかローカルセルフホストが現実的な選択肢です。

従来のダッシュボード型ツールとの違い

一般的なエージェント管理UIは、チャット履歴やログ一覧をテキスト中心で表示します。Claw3Dは空間的なプレゼンス（存在感）でエージェントの状態を伝える点が異なります。スタンドアップでは会議テーブル周りにエージェントが集まる演出、PRレビューでは画面上に差分が表示されるなど、作業コンテキストを場所と動きに結びつけます。

一方で、READMEの「Current Limitations」には、没入型オフィス（/office）とPhaserビルダー（/office/builder）が別スタックであること、ゲートウェイシークレットがブラウザメモリに読み込まれることなど、現バージョンの制約も記されています。v0.1.4時点では早期段階のリリースであり、リモートオフィスやマルチフロア機能は今後も更新が続く見込みです。

導入を検討する読者像

Claw3Dは、OpenClawやHermesでエージェント群を既に運用しており、ログだけでは状況把握が難しいチームに向いています。デモモードでUIを確認したうえで、本番ゲートウェイに接続する流れがREADMEで推奨されています。

AIエージェントの協働を「見える化」したい開発者や、スタンドアップやPRレビューを3D空間で体験したいチームにとって、導入検討の材料になるツールです。