命令型 API

Alexandra Klepper
Alexandra Klepper
GitHub Bluesky
François Beaufort
François Beaufort
GitHub

公開日: 2026 年 5 月 18 日

商品の解説 ウェブ 拡張機能 Chrome ステータス インテント
GitHub デベロッパー トライアル デベロッパー トライアル 表示 試験運用版のインテント

WebMCP 命令型 API を使用すると、標準の JavaScript でさまざまな種類のツールを定義できます。ツールは、フォーム入力、サイト ナビゲーション、状態管理など、さまざまな機能を実行できます。

この API を使用する前に、ユースケースの例をご覧ください。

モデル コンテキストを提供する

modelContext インターフェースを使用してツールを登録します。ツールを登録するには、名前、説明、関連するプロパティを含む入力スキーマが必要です。

registertool を使用して、単一のツールをモデル コンテキストに追加します。

WebMCPza Maker

navigator.modelContext.registerTool({
  name: 'toggle_layer',
  description: 'Control pizza layers (sauce, cheese). Use "add", "remove", or "toggle".',
  inputSchema: {
    type: 'object',
    properties: {
      layer: { type: 'string', enum: ['sauce-layer', 'cheese-layer'] },
      action: { type: 'string', enum: ['add', 'remove', 'toggle'] },
    },
    required: ['layer'],
  },
  execute: async ({ layer, action }) => {
    await toggleLayer(layer, action);
    return `Performed ${action || 'toggle'} on layer: ${layer}`;
  },
});

注文ステータスを取得する

navigator.modelContext.registerTool({
  name: 'get_order_status',
  description: 'Search orders in a given timeframe. Returns order number, shipping status and location',
  inputSchema: {
    "type": "object",
    "properties": {
      "timeframe": { "type": "string", "oneOf": [
        { "type": "string", "const": "today", "title": "Today" },
        { "type": "string", "const": "yesterday", "title": "Yesterday" },
        { "type": "string", "const": "last_7_days", "title": "Last 7 Days" },
        { "type": "string", "const": "last_30_days", "title": "Last 30 Days" },
        { "type": "string", "const": "last_6_months", "title": "Last 6 Months" }],
      "enum": [ "today", "yesterday", "last_7_days", "last_30_days", "last_6_months" ],
      "description": "Timeframe for the order lookup." }
    },
    "required": [ "timeframe" ]
  },
  execute: async ({ timeframe }) => {
    // Add your API or database logic here to fetch and return the order data as a string.
  },
});

オプション パラメータとして渡された場合、AbortSignal を使用してツールを削除できます。

const addTodoTool = {
  name: "addTodo",
  description: "Add a new item to the to-do list",
  inputSchema: {
    type: "object",
    properties: { text: { type: "string" } },
  },
  execute: async ({ text }) => {
    // You should handle the persistence logic here (omitted for demo)
    return `Added to-do: ${text}`;
  },
  annotations: {
    readOnlyHint: false,
    untrustedContentHint: true
  },
};
const controller = new AbortController();
navigator.modelContext.registerTool(addTodoTool, { signal: controller.signal });

// Unregister the tool later...
controller.abort();

ツールを見る

使用可能なツールを表示するには、navigator.modelContext.getTools() を使用します。この非同期メソッドは、呼び出し元のドキュメントがオリジンに基づいてアクセスを許可されているツールのリストを返します。

const [tool] = await navigator.modelContext.getTools();
console.log(tool);

// {
//   annotations: { readOnlyHint: false, untrustedContentHint: true },
//   description: "Add a new item to the to-do list",
//   inputSchema: '{"type":"object","properties":{"text":{"type":"string"}}}',
//   name: "addTodo",
//   origin: "https://example.com",
//   window: Window {window: Window, self: Window, ...},
// }

ツールを実行する

getTools() で検出されたツールを手動で実行するには、入力引数を有効な JSON 文字列として navigator.modelContext.executeTool() を呼び出します。この非同期メソッドは、ツール実行の結果を返します。ナビゲーションがトリガーされた場合は null を返します。

const result = await navigator.modelContext.executeTool(tool, '{"text": "Buy milk"}');
console.log(result);

// 'Added to-do: Buy milk'

オプション パラメータとして渡された場合、AbortSignal を使用して保留中のツール実行をキャンセルできます。

const controller = new AbortController();
navigator.modelContext.executeTool(tool, '{"text": "Buy milk"}', {
  signal: controller.signal,
});

// Cancel tool execution later...
controller.abort();

イベント

フレームは navigator.modelContext の toolchange イベントをリッスンして、使用可能なツールのリストが変更されたときに通知を受け取ることができます。

navigator.modelContext.addEventListener("toolchange", (event) => {
  // Tools have changed.
});

クロスオリジン iframe

WebMCP は、権限に関するポリシーと明示的なオリジン ゲーティングの両方を使用するクロスオリジン iframe をサポートしています。

権限に関するポリシー

クロスオリジン iframe では、デフォルトでツールの登録が無効になっています。ページは、 アクセスを委任する必要があります。tools 権限に関するポリシー

<iframe src="https://example.com" allow="tools"></iframe>

オリジンの公開

デフォルトでは、クロスオリジン ドキュメントでツールを使用できません。registerTool 内の exposedTo 配列を使用して、ツールの表示と実行を許可する特定のオリジンを一覧表示できます。この配列は、HTTPS プロトコルを使用するオリジンのみをサポートしています。

navigator.modelContext.registerTool({
  name: 'my_shared_tool',
  description: 'Shared across origins',
  // ...
}, {
  exposedTo: ['https://trusted.com', 'https://partner.org']
});

意見交換とフィードバックの提供

WebMCP は現在議論されており、今後変更される可能性があります。この API をお試しになり、フィードバックがございましたら、ぜひお聞かせください。