Skip to main content
Glama

excalidraw-ai — MCPサーバー (ExcalidrawへのAIインターフェース)

AIがライブのExcalidrawルームを読み取り、監視、編集するためのクリーンで非クランキーなインターフェース。ブラウザ自動化(fiber-read + drag-drop + remote browser drops)の代わりに、コラボレーションリレーを介してソケットボットとしてルームに参加し、AES-GCM暗号化されたシーンプロトコルを直接話します——決定論的、ヘッドレス、スケーラブル。

POCステータス: コアブリッジ + MCP stdio サーフェスが、セルフホストの excalidraw-room リレーに対してエンドツーエンドで動作(セルフテスト + MCPスモーク合格)。

なぜ自分たちで制御するリレーなのか

ボットはリレーと通信します。Excalidrawのホストリレー(oss-collab.excalidraw.com)は非ブラウザボットをオリジンガードします(403/400)。そのため、自分たちのルームでは、excalidraw/excalidraw-room(MIT、プロダクションと同じコード)を実行し、VITE_APP_WS_SERVER_URL を介してExcalidraw UIをそのリレーに向けます。

Related MCP server: Excalidraw MCP Server

Architecture

Excalidraw UI (fork) ──socket.io──▶ relay (excalidraw-room) ◀──socket-bot── excalidraw-ai (MCP)
   (humans)                           self-hosted                 (the AI's interface)

ツール

Tool

説明

create_room

新しいルームID/キーをリレー用に生成

join_room

ルームに参加し、シーンを読み取り、リッスンを開始

leave_room

切断

get_scene

ボード要素 + テキスト

get_changes

前回の呼び出し以降の追加/更新/削除の差分(「ルームを聞く」)

add_elements

要素を追加(ライブブロードキャスト)

update_elements

既存要素を移動/リタイトル/色変更(バージョンアップ)

delete_elements

削除済みとしてマーク

Run

npm install
# relay (one terminal):
cd /tmp/excalidraw-room && PORT=3002 node dist/index.js
# self-test the bridge core:
npm run selftest
# MCP smoke (stdio handshake + join + get_scene):
npm run mcp-smoke
# start the MCP server (stdio) — wire into Hermes/Copilot/Claude:
node src/server.js

Hermesへの接続(~/.hermes/config.yaml)

mcp_servers:
  excalidraw_ai:
    command: "node"
    args: ["/root/workspace/mcclawd-org/excalidraw-ai/src/server.js"]

Hermesを再起動すると、ツールが mcp_excalidraw_ai_* として表示されます。

レイアウト

  • src/crypto.js — AES-GCM E2E ヘルパー(Node Web Crypto)

  • src/elements.js — 要素ビルダー + シーンマージ/差分(ID+バージョンセマンティクス)

  • src/room.js — RoomClient: ソケット参加、読み取り、書き込み、変更フィード

  • src/server.js — MCPサーバー(stdio)、ツール登録

  • scripts/selftest.mjs, scripts/mcp-smoke.mjs — 検証

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    D
    maintenance
    Enables AI agents to programmatically control a live Excalidraw canvas through element-level CRUD operations and real-time synchronization. It allows agents to iteratively build, inspect, and refine diagrams while providing visual feedback via screenshots and scene descriptions.
    3,166 npm
    MIT
  • A
    license
    Not graded
    quality
    D
    maintenance
    Enables AI agents to programmatically control a live Excalidraw canvas with element-level CRUD operations and real-time synchronization. It supports iterative diagramming through scene descriptions, screenshots, and advanced layout tools for collaborative AI-human workflows.
    3,166 npm
    2
    MIT
  • F
    license
    Not graded
    quality
    B
    maintenance
    Standalone backend for a self-hosted Excalidraw fork with per-board access control, providing an MCP remote endpoint that lets AI agents draw on real collaboration boards as specific users.
    -