WebMCP と AI エージェント

ImgFlow はホームとツールページで、ブラウザ内 AI エージェント向けに圧縮キューを WebMCP 草案 API で公開します。画像は端末内で処理され、エージェントはページが登録したツールのみ呼び出せます。

前提条件

デスクトップ版 Google Chrome（最新 Canary/Dev 推奨。安定版はビルドにより異なります）。
HTTPS で本サイトにアクセス（localhost 可）。
chrome://flags/#enable-webmcp-testing で「WebMCP for testing」を Enabled にし、Chrome を完全に再起動。
API は試験的 — フラグ名と挙動は Chrome のバージョンで変わる可能性があります。公式ドキュメントを参照してください。

WebMCP テストフラグを有効化

chrome://flags/#enable-webmcp-testing を開く
ドロップダウンで Enabled を選択
下部の Relaunch をクリックし、Chrome が完全に終了して再起動するまで待つ

chrome://flags/#enable-webmcp-testing · Chrome WebMCP 公式ドキュメント

本サイトで登録されるツール

ホームまたは任意のツールページでツール島の読み込み後、次のツールが document.modelContext に登録されます：

add_image_from_url
set_compression_settings
get_compression_status
download_image
download_all_results
reset_queue

スモークテスト（約 1 分）

ホームで DevTools → Console を開き、下のスクリプトを貼り付けて実行します。WebMCP が有効でツール島が読み込まれていれば、get_compression_status を含むツール名の一覧が返ります。

ホームを開いてスモークテストを実行

(async () => {
  const mc = document.modelContext;
  if (!mc?.getTools) {
    return {
      ok: false,
      reason: 'document.modelContext.getTools is missing. Enable chrome://flags/#enable-webmcp-testing, relaunch Chrome, open the homepage, then retry.',
    };
  }
  const tools = await mc.getTools();
  const names = tools.map((tool) => tool.name).sort();
  return {
    ok: names.includes('get_compression_status'),
    names,
  };
})();

登録確認のみで、実際の圧縮は行いません。フルフローは WebMCP 対応の AI クライアントや Model Context Tool Inspector で add_image_from_url と get_compression_status を呼び出してください。

制限事項

WebMCP 非対応ブラウザは webmcp.ts を読み込みません — 通常利用に変更はありません。
add_image_from_url は CORS の制約があります。data: URL を使うか、ユーザーにページへドラッグを依頼してください。
navigator.modelContext は非推奨です — document.modelContext を使用してください（ToolApp と同じ）。