claude-draw

Claude Code用の手書き入力ツール。Claudeが視覚的な質問をすると、お好みのデバイスにキャンバスが表示され、答えを描くとClaudeがそれを読み取ります。

2つのモードがあります。アイデアをスケッチするための空白キャンバスと、Claudeがスクリーンショットを配置してマークを付けるよう求めるアノテーションです。後者が真価を発揮するのは、視覚的な変更を言葉で説明するより指し示す方が速い場合です。

要件

PATHにNode 18以降が必要です。それ以外は不要です。npm installも依存関係もありません。

Related MCP server: Shared Whiteboard

インストール

このリポジトリはそれ自体が単一プラグインのマーケットプレイスなので、新しいマシンでは2つのコマンドが必要です:

/plugin marketplace add ThePhilipWilson/claude-draw
/plugin install claude-draw@claude-draw

または、スキルディレクトリに配置する方法もあります。インストール手順なしで毎セッションで読み込まれます:

mkdir -p ~/.claude/skills
cp -r /path/to/claude-draw ~/.claude/skills/

どちらの方法でも、Claude Codeを再起動してください。claude plugin listで確認し、claude-draw MCPサーバーが接続されていることを確認してください。

プラグイン内の何もパス固有またはOS固有ではありません。ブラウザランチャーはプラットフォームに応じてstart、open、xdg-openを選択し、すべてのパスはプラグインルートからの相対パスで解決されます。

使い方

ClaudeがMCPを通じて操作します。手動で何かを実行する必要はありません。

• request_drawingはスケッチまたはアノテーションを求め、待機します。

• draw_statusはキャンバスが接続されているかどうかを報告し、URLを提供します。

• open_canvasはClaudeが実行されているマシンでキャンバスを開きます。

自分でキャンバスを求めるには/drawと入力します。

キャンバス

ペン、線、矢印、四角形、楕円、塗りつぶし、消しゴムがあり、6色に対応しています。キー: ツールはP L A B O F E、色は1-6、サイズは[ ]、元に戻すはCtrl+Z、画像の貼り付けはCtrl+V、送信はCtrl+Enterです。画像をウィンドウにドロップすることもできます。

塗りつぶしには2種類のエッジ判定があり、ツールをもう一度選ぶと切り替わります。塗りつぶし: 図形は自分で描いたマークのみで止まるため、描いた輪郭は下に何があってもワンタップでベタ塗りされます。塗りつぶし: 画像は画像内のエッジでも止まるため、自分で輪郭を描いていないスクリーンショットの領域を着色できます。どちらの場合も描画はマークレイヤーに載るので、消しゴムで画像を傷めずに消せます。

送信すると、まず平坦化された画像とキャプションが表示され、Enterで確定、Escで戻ります。「スクリーンショットを送って」は逆方向の操作です。Claudeに何かをキャプチャして、アノテーション用に送り返すよう指示します。タブレットでファイルを探す手間が省けます。キャプションボックスに入力した内容も一緒に送られるので、どんな画像が欲しいかを指定できます。「スキップ」はこの質問に回答しないことをClaudeに伝えます。

別のデバイスから描画する

デフォルトではオフです。デーモンはループバックのみにバインドするため、キャンバスにはこのマシンからしかアクセスできません。オンにすると、同じWi-Fi上のタブレット、スマートフォン、Chromebookを描画面として使用でき、その間Claudeはデスクトップで実行されます。

1. Claude Codeが実行される環境でCLAUDE_DRAW_LAN=1を設定します。例: settings.json内:

   { "env": { "CLAUDE_DRAW_LAN": "1" } }

   すでに実行中のデーモンは古いバインドを維持します。Claude Codeを再起動するか、Claudeにdraw_statusを依頼してください。実行中のデーモンと設定が一致しない場合に通知されます。

2. Claudeにdraw_statusを依頼してLAN URLを取得します。例: http://192.168.1.20:7331/のような形式です。

3. デバイスで開き、タブを開いたままにします。

4. 以降のすべてのリクエストがそのページに自動的に表示されます。更新も再オープンも不要です。

デバイスごとに一度ブックマークしておきましょう。

ファイアウォール。 プライベートネットワークでは、ポート7331へのインバウンドTCPを許可する必要があります。

• Windows: 管理者プロンプトからNew-NetFirewallRule -DisplayName "Claude draw" -Direction Inbound -Action Allow -Protocol TCP -LocalPort 7331-7340 -Profile Private -RemoteAddress LocalSubnet -Program "<path to node.exe>" を実行します。

• macOS: 初回実行時にnodeへの着信接続を許可するかどうかプロンプトが表示されます。許可してください。

• Linux: 使用しているファイアウォールがあれば、そのポートを許可します。

セキュリティ

オプトインしない限りデーモンはループバックのみにバインドするため、初期状態ではネットワーク上の何もそれに到達できません。

CLAUDE_DRAW_LAN=1の場合、2つの方向は意図的に分離されたままです。ローカルネットワーク上の任意のデバイスがキャンバスを読み込み、描画を送信できます。リクエストの作成やデーモンのシャットダウンができるのはループバックのみなので、ネットワーク上のデバイスはClaudeの質問に答えることはできますが、セッションを操作することはできません。オンにする前に知っておくべきこと: 認証はないため、そのネットワーク上の誰でもプロンプトとアノテーションを求められた画像を見ることができます。

設定

レイアウト

claude-draw/
  .claude-plugin/plugin.json        manifest
  .claude-plugin/marketplace.json   single-plugin marketplace, for /plugin marketplace add
  .mcp.json                         MCP server registration
  package.json                      pins "type": "commonjs" (see below)
  skills/draw/SKILL.md              when to use it, how to read a drawing
  server/daemon.js                  long-lived HTTP + SSE daemon
  server/canvas.html                the canvas page, single file
  server/mcp.js                     stdio MCP server, starts the daemon on demand
  test/e2e.js                       full round-trip test, no fixtures needed

package.jsonは"type": "commonjs"を固定するために存在します。Nodeはモジュールタイプをツリーの最も近いpackage.jsonから解決するため、このプラグインを"type": "module"を宣言するプロジェクト内に配置すると、そうでなければすべてのrequireが例外をスローします。削除しないでください。

テスト

npm test

空きポートでデーモンを起動し、実際のSSE接続を駆動し、リクエストをプッシュし、描画の送信とスキップを行い、MCP stdioプロトコルをテストします。ネットワークもフィクスチャも依存関係もありません。失敗時は非ゼロで終了します。

デーモンは最初のrequest_drawing呼び出しで起動し、起動したままになります。これにより、キャンバスページがリクエスト間で維持され、無効なページに取り残されることがありません。