drawgent: ライブ Excalidraw キャンバス上のコーディングエージェント

drawgent は、ユーザー自身の Claude Code、Codex、または opencode を Excalidraw ホワイトボードに接続するツールです。チャットパネルでダイアグラム作成を依頼するか、変更したい図の部分に指示を入れることで、エージェントがキャンバスを確認し、ライブで編集して結果をチェックします。

1. フィードの構成

フィードに含めたいアクティビティの種類を選択してください：

• イシュー (Issues)
• プルリクエスト (Pull Requests)
• コミット (Commits)
• タグ (Tags)

2. リポジトリのクローン

パーマリンクを使用してリポジトリをクローンします。

クローン URL

• HTTPS:

  https://tangled.org/yanndegat.tngl.sh/drawgent
  https://tangled.org/did:plc:3zklierfkckthy6sodbm4af3
  

• SSH:

  git@tangled.org:yanndegat.tngl.sh/drawgent
  git@tangled.org:did:plc:3zklierfkckthy6sodbm4af3
  

注意: 自己ホストされた Knots の場合、クローン URL は環境設定に応じて異なる場合があります。

ダウンロードオプション

• tar.gz

  アーカイブをダウンロード

• .zip

  アーカイブをダウンロード

3. コミットと機能説明

Excalidraw エディタは、レーザージェスチャー（

onPointerUpdate

customData.drawgentZone

• チャットパネル: カバーされた要素をリストしたチップと共にフォーカスが付き、次のメッセージにゾーンが含まれて送信されます。
• サーバー処理: ゾーン範囲とカバーされた要素（最もカバーされているものが多い順）をプロンプトに追加します。
• トレースの削除: ターン終了時（管理セッションの場合）またはライブ接続セッションがアイドル状態になったときに削除されます。
• get_scene: テーブルタイプ "zone" として報告します。

コマンドラインツール

単一の Rust バイナリで、シーンを保持しながらユーザー自身のエージェントに接続します：

• setup <agent>

  : インストールされた CLI とログインを確認し、ACP ブリッジを準備し、ヘッドレス Chrome を検索/インストールし、設定ファイルを作成します。

• up

  : 現在のワークスペースで新しいエージェントセッションを開始します。

• up --attach [id]

  : 実行中のセッション（ACP 経由の Claude フォーク、ライブ opencode、

  codex queue

  ）をリストします。

主な機能:

• チャットパネル、AGENTS キャンバスノート、ビジョン機能を備えた MCP キャンバスツール。
• Excalidraw.com ルームクライアント（AES-GCM, socket.io, Firestore）。
• Musl 静的ビルド付きの Makefile、Nix デブシェル、サーバー専用 Docker イメージ。

4. README.md: クイックスタート

前提条件:

• claude

  、

  codex

  、または

  opencode

  のいずれかがインストールされ、ログイン済みである必要があります。
• Claude および Codex のブリッジには Node.js ≥ 18 (npm) も必要です。

基本コマンド

以下のコマンドを実行してください：

# エージェントごとに一度実行：claude | codex | opencode
drawgent setup claude 
cd ~/my-repo
# 新しいエージェントセッション + ブラウザ上のキャンバスを開始
drawgent up 

# または: 実行中のセッションのいずれかを選択して接続
drawgent up --attach

セットアップ (

drawgent setup

)

一度にすべてを確認し、欠落している場合その場で修正方法を提示します。以下を構築・確認します：

1. エージェント CLI: PATH 上の

   claude

   /

   codex

   /

   opencode

   。
2. ログイン:

   claude auth status

   ,

   codex login status

   , または

   opencode auth list

   で確認可能。
3. ACP ブリッジ:

   • opencode

     : 自身で ACP を使用（

     opencode acp

     ）。
   • Claude Code および Codex: 公式の ACP アダプターを使用（約 60MB のアダプターを

     ~/.cache/drawgent/adapters

     にインストール）。
4. レンダラー用のヘッドレス Chrome:
   • Chrome/Chromium を持っている場合はそれを使用します。
   • 持っていない場合は提案された方法でダウンロード（テスト用 Chrome, 約 120 MB）またはパッケージマネージャー (

     apt

     ,

     brew

     など) を使用してインストールします。

非対話モードでの Chrome 指定：

--chrome download | system | /path/to/chrome

注意:

drawgent up

は、そのエージェントのセットアップが成功するか、記録された情報が消滅しない限り起動しません。

セッション接続 (

drawgent up

)

現在のディレクトリ（ワークスペース）で動作します：

• エディターと API を

  127.0.0.1:7300

  に起動（使用中の次の自由なポートを使用）。
• ワークスペース内で ACP 経由のエージェントの新しいセッションを開始。
• ブラウザを開きます（ヘッドレスボックスの場合、代わりに

  ssh -L

  コマンドを出力します）。

シーンデータは

.drawgent/scene.json

セッション接続 (

drawgent up --attach [id]

)

既に実行中のセッションにキャンバスを接続します。ID を指定しない場合は、見つかったセッション（現在のディレクトリから最初）をリストし、選択できます：

claude agents --json

fork

opencode --port 4096

live

~/.codex/sessions

live

codex queue --thread <id>

5. キャンバスの使用法

チャットパネル（右側）

• リクエストを送信し、返信とツール呼び出しがストリーミングされるのを確認します。
• 許可プロンプトを承認し、Stop を押してターンをキャンセルできます。

キャンバス上での操作

• 指示入力:

  AGENT: next

  で始まるテキストを書き込みます。
• 図形描画: 図形に記述するか、ノートから図形へ矢印を描画します。
• 発火処理: 入力停止後約 2.5 秒後に位置、指す対象、および近くの要素と共に発火し、エージェントはそれを緑色の

  DONE: …

  ノートに解決します。

レーザーゾーン (Laser Zone)

• Excalidraw のレーザー（

  K

  ）を選択し、図の一部を円形か描画で選択します。
• 処理:
  1. キャンバス上に赤い輪郭が残ります。
  2. チャットパネルが開き、ゾーン下の要素がリストされます。
  3. 次のメッセージにはゾーン情報が含まれてエージェントへ送信されます。
  4. エージェントが完了するとトレースが消えます。
• ルール: 4 秒以内のストロークは一つのゾーンを形成します（× を押して破棄）。

excalidraw.com ルーム

共有キャンバスでの協働が可能です：

• drawgent up --room 'https://excalidraw.com/#room=<id>,<key>'

• drawgent は「🤖 Agent」としてルームに参加し、カーソルは編集に従って移動します。
• 人間は excalidraw.com 上で作業できます（

  AGENT:

  ノートがエージェントに届き、編集もライブで表示されます）。
• セキュリティ: トラフィックはルームキーでエンドツーエンド暗号化されています。

6. その他のコマンドと機能

drawgent mcp

• キャンバスツールの stdio MCP サーバーです。
• エージェントはそれを起動し、自動的に実行中の

  drawgent up

  を発見します。

drawgent serve

• 明示的なエージェント（セットアップ済みまたは任意の ACP エージェント）を備えた低レベルサーバーです。
• スクリプトおよびコンテナ用として使用します。

オプションパラメータ (

up

/

serve

)

• ネットワーク:

  --port

  ,

  --room

• 認証:

  --token

  (API ベアラー + ?token= in the URL)
• 権限:

  --permissions canvas|ask|all

  （デフォルト

  canvas

  : デrawing ツールは自動承認）
• データ管理:

  --data

  ,

  --settle-ms

Docker での実行

エージェントは決してバインドされず、常に独自のセットアップで動作します：

docker compose up --build

キャンバスサーバー（drawgent + Chromium）を実行し、共有キャンバスやサーバー上のルームブリッジをホストするために使用できます。

7. ビルドとテスト

ソースからのビルド

npm ci && npm run build      # エディターおよびレンダラーページ -> dist/
cargo install --path .       # または: cargo build --release

テスト

• cargo test

  （分数指数、ルーム暗号/フレーミング）

• node scripts/smoke.mjs [url]

  (チャットターン + AGENT: ノートに対する実行中の drawgent)

• node scripts/e2e-browser.mjs [url]

  (実ブラウザでのテスト)

• node scripts/room-e2e.mjs

  （ルーム間の双方向通信）

• node scripts/laser-e2e.mjs

  （レーザーゾーン機能のテスト）

8. API エンドポイント

主な REST API と WebSocket です：

• GET /api/health

• GET /api/scene

• GET /api/screenshot?ids=&padding=&max=

• POST|PATCH|DELETE /api/elements

• POST /api/mermaid

• POST /api/clear

• GET /api/instructions

• POST /api/instructions/{id}/resolve

• POST /api/status

• POST /api/chat {agent?, text}

• WS

  /ws

  : ブラウザ同期 + チャットイベント

9. レイアウト構造

src/ (Rust) の主要モジュール：

• main.rs

  : CLI エントリーポイント。

• setup.rs

  ,

  config.rs

  ,

  chrome.rs

  : セットアップ処理、設定、レンダラーインストール。

• attach.rs

  : セッション発見と選択ロジック。

• agents.rs

  +

  acp.rs

  : ACP ドライバー（新規/フォークセッション）。

• live.rs

  : ライブ opencode / Codex ドライバー。

• hub.rs

  : ルーティング、ノート、チャットログ管理。

• scene.rs

  : ストアと編集操作処理。

• renderer.rs

  : CDP (Chrome DevTools Protocol) 経由の Chrome コントロール。

• mcp.rs

  : MCP サーバー実装。

• room.rs

  : Excalidraw.com クライアント接続。

• fractional.rs

  ,

  geometry.rs

  ,

  el.rs

  : 幾何学計算などのヘルパー。

web/: エディター（

main.jsx

chat.jsx

laser.js

render.jsx

10. リミットと注意

• レンダラー依存: Chrome の必要があり、ネイティブレンダラーは計画済みですが未実装です。
• Claude attach: フォーク方式のため、公開方法としての実行中の端末セッション注入は現時点でサポートされていません。
• Codex: ライブ接続の実装はありますが、ログイン済みの Codex に対するテストはまだ行われていません。
• 同期制限: ワークスペースにつき一つのシーンのみ。画像やファイルの同期は行われません。