Video To Claude

video-to-claude

画面録画をドロップし、タイムラインをスクラブして、フレームに注釈を描き、Send をクリックすると、注釈付き WebP がビジョン入力として Claude Code の会話に直接送信されます。

Claude Code で /vtc と入力します	Claude が注釈付きフレームを受け取ります	Claude が注釈を読み取り、応答します

---

仕組み

1. Claude Code で /vtc と入力します

MCP サーバーは、起動していない場合は開発サーバーを起動し、セッションを作成して、ブラウザーで http://localhost:3000/capture/{id} を開きます。

2. 動画をドロップします

.mp4、.mov、.webm、または一般的な動画ファイルをアップロード領域にドラッグします。ファイルは ffmpeg で解析され、プレーヤーが有効になります。

3. タイムラインをスクラブします

スクラバーまたは矢印キーを使って、キャプチャしたい場面に移動します。キャンバスのオーバーレイは動画フレームの上に表示されます。

4. フレームに注釈を付けます

キャンバスに赤色で矢印、ボックス、フリーハンドの線を描き、テキストラベルを追加します。これらの注釈はエクスポートする WebP に埋め込まれるため、Claude は丸で囲んだ箇所を正確に確認できます。

5. キャプチャして繰り返します

Capture をクリックして、注釈付きフレームを固定します。必要な数だけ、手順 3～4 を繰り返します。画面下部のキャプチャストリップにサムネイルが表示されます。

6. 送信します

Send をクリックします。MCP の await_capture ツールが戻り、注釈付きフレームがすべて画像コンテンツブロックとして Claude Code の会話に送信されます。

7. Claude が見たものを説明します

Claude は注釈（赤い矢印、丸で囲んだ要素、テキストラベル）を読み取り、マークした箇所に直接応答します。改めて説明する必要はありません。

---

前提条件

• Node.js 20+（Node 24 を推奨）
• Claude Code CLI がインストールされていること（インストールガイド）
• Windows、macOS、または Linux
• Python や PATH 上の ffmpeg は不要です。どちらもバンドルされています

---

インストール

オプション A — Claude Code プラグイン（推奨）

/plugin install github:adityaO5/video-to-claude

これにより、MCP サーバーと /video-to-claude:vtc スキルを一度にインストールできます。MCP の個別登録やコマンドのコピーは不要です。

オプション B — npm（MCP のみ、クローン不要）

claude mcp add video-to-claude --scope user -- npx video-to-claude-mcp

または、~/.claude.json に手動で追加します。

{
  "mcpServers": {
    "video-to-claude": {
      "command": "npx",
      "args": ["video-to-claude-mcp"]
    }
  }
}

次に、/vtc コマンドを追加します（下記参照）。

オプション C — クローンしてビルド

git clone https://github.com/adityaO5/video-to-claude
cd video-to-claude
npm install
npm run mcp:build

次に登録します。

claude mcp add video-to-claude --scope user -- node /ABSOLUTE/PATH/TO/video-to-claude/dist/mcp/server.js

/ABSOLUTE/PATH/TO/video-to-claude を実際のパスに置き換えてください。
Windows の例： C:/Users/you/repos/video-to-claude（JSON ではスラッシュを使用できます）。

---

/vtc スラッシュコマンドを追加する（オプション B と C のみ）

プラグインのインストール（オプション A）では、スキルが /video-to-claude:vtc として自動的に含まれます。

オプション B/C では、リポジトリに .claude/commands/vtc.md が含まれています。Claude Code がプロジェクトスコープのスラッシュコマンドを読み込むのは、作業ディレクトリがクローンしたリポジトリ内にある場合のみです。

どのディレクトリからでも /vtc を使うには、コマンドファイルをユーザーレベルのコマンドフォルダーにコピーしてください。

# macOS / Linux
cp .claude/commands/vtc.md ~/.claude/commands/vtc.md

# Windows (PowerShell)
Copy-Item .claude\commands\vtc.md $HOME\.claude\commands\vtc.md

設定を変更した後は、Claude Code を再起動してください。

---

使い方

/vtc

以上です。ブラウザーが開いたら、アップロード、シーク、注釈の追加を行い、送信します。注釈付きフレームが会話に表示されます。Claude は赤いマークを読み取り、それに応じて動作します。

---

MCP ツール

ツール	説明
start_capture_session	必要に応じて開発サーバーを起動し、セッションを作成してブラウザーを開きます。sessionId を返します。
await_capture	ユーザーが「送信」をクリックするまでポーリングします（デフォルトのタイムアウトは 600 秒）。注釈付き WebP を画像コンテンツブロックとして返します。

/vtc スラッシュコマンドは、両方のツールを自動的に順番に呼び出します。

---

ビジョンの制約

• 形式：WebP（ツールが出力）
• フレームあたりの目標サイズは 2 MB 以下（上限 5 MB）。必要に応じて品質を 80 から 50 に下げて再試行します。
• 最大幅：960 px
• 実用上の上限は、自動ダウンスケール前で約 20 フレームです。ソフト上限は約 100 フレームです。

---

トラブルシューティング

開発サーバーが開きませんでしたか？
リポジトリのディレクトリで npm run dev を実行し、/vtc をもう一度お試しください。

Claude Code に MCP ツールが表示されませんか？
claude mcp list を実行して登録を確認してください。Claude Code を再起動してください。クローンしたリポジトリを使用している場合は、dist/mcp/server.js が存在することを確認してください（存在しない場合は、npm run mcp:build を再実行してください）。

ポートが競合していますか？
MCP サーバーはアプリを探すためにポート 3000～3005 をスキャンします。空いているポートで npm run dev を実行するか、ポート 3000 を使用している他のプロセスを停止してください。

大きなファイルのアップロードが止まりますか？
ソースは 512 KB のチャンク単位でアップロードされます。非常に大きなファイル（> 2 GB）は、ディスクの速度が遅い場合、アップロードに少し時間がかかることがあります。

---

技術スタック

• Next.js 16 App Router（Node 24）— UI と REST API
• ffmpeg-static — 動画のプローブと単一フレームの抽出
• sharp — SVG 注釈の合成と品質を再試行する WebP エンコード
• @modelcontextprotocol/sdk — MCP stdio トランスポート

---

ライセンス

MIT — LICENSE を参照