webmcp

WebMCP ツール

W3C WebMCP API（navigator.modelContext）を使用してツールを実装すると、AI エージェント、ブラウザーアシスタント、支援技術がページ上の構造化された JavaScript 関数を呼び出せます。

適用する場面

次のような場合に、これらのガイドラインを参照してください。

• ブラウザーの AI エージェント向けにウェブページへツールを追加する
• navigator.modelContext を使って呼び出し可能な関数を登録する
• 既存のページ機能をエージェントに公開する
• 人間が関与する協調型エージェントのワークフローを構築する

基本ルール

優先度	ルール	説明
CRITICAL	tool-definition	すべてのツールには、name、description、inputSchema、execute が必要です
CRITICAL	security	パラメーターを検証し、破壊的な操作は確認を取り、機密データを漏らさないでください
HIGH	descriptions	具体的な説明を記述してください。LLM はこれを読んでツールを選択します
HIGH	dynamic-registration	SPA の状態変化に応じてツールを登録・登録解除してください
MEDIUM	user-interaction	購入、削除、送信には agent.requestUserInteraction() を使用してください

クイックリファレンス

1. ツールの登録（CRITICAL）

navigator.modelContext.registerTool({
  name: "add-to-cart",
  description: "Add a product to the shopping cart by ID",
  inputSchema: {
    type: "object",
    properties: {
      productId: { type: "string", description: "Product ID" },
      quantity: { type: "number", description: "How many to add (1-100)" }
    },
    required: ["productId"]
  },
  execute: async ({ productId, quantity }) => {
    await cartApi.add(productId, quantity ?? 1);
    return { content: [{ type: "text", text: `Added ${quantity ?? 1} to cart` }] };
  }
});

2. 機能検出（CRITICAL）

if ("modelContext" in navigator) {
  navigator.modelContext.registerTool({...});
}

3. ツールの説明（HIGH）

// Good — specific, includes what it returns
description: "Search available flights. Returns {id, airline, price, departure, arrival}. Does not book — use book-flight to complete."

// Bad — vague
description: "Search flights"

4. ユーザーの確認（MEDIUM）

execute: async ({ productId }, agent) => {
  const ok = await agent.requestUserInteraction(() =>
    confirm(`Buy product ${productId}?`)
  );
  if (!ok) throw new Error("Cancelled");
  await purchase(productId);
  return { content: [{ type: "text", text: "Purchased" }] };
}

5. SPA 向けの動的登録（HIGH）

// React — register on mount, unregister on unmount
useEffect(() => {
  if (!("modelContext" in navigator)) return;
  navigator.modelContext.registerTool({ name: "edit-doc", ... });
  return () => navigator.modelContext.unregisterTool("edit-doc");
}, [doc.id]);

使用方法

詳しい説明とコード例については、個々のルールファイルをお読みください。

rules/tool-definition.md
rules/descriptions.md
rules/security.md
rules/dynamic-registration.md
rules/user-interaction.md

すべてのパターンを詳しく説明した完全ガイド：AGENTS.md