Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

命令型 API

Alexandra Klepper

François Beaufort

公開日: 2026 年 5 月 18 日、最終更新日: 2026 年 10 月 15 日

商品の解説	ウェブ	拡張機能	Chrome ステータス	インテント
GitHub	オリジントライアル		表示	テストの目的

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

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

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

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

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

WebMCPza Maker

await document.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}`;
  },
});

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

await document.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.
  },
});

ツールのアノテーション（省略可）

ツールを登録する際に、annotations プロパティにメタデータを追加できます。これらのアノテーションは、エージェントとブラウザがツールの安全性、想定される副作用、出力の信頼性、対象ユーザーを理解するのに役立ちます。

readOnlyHint（ブール値、デフォルトは false）: true の場合、ツールは情報の読み取りのみを行い、アプリケーションやシステムの状態を変更しないことを示します（商品カタログの検索や注文ステータスの取得など）。これにより、エージェントは副作用なしでツールを安全に呼び出せるかどうかを判断できます。
untrustedContentHint（ブール値、デフォルトは false）: true の場合、ツールの出力に、ツールの作成者の観点から信頼できないデータ（ユーザー作成コンテンツ、レビュー、外部ウェブデータなど）が含まれていることを示します。これは、間接的なプロンプトインジェクションを軽減するために、返されたペイロードにサニタイズや区切りなどの高度なセキュリティ処理が必要であることをエージェントとクライアントに通知します。
consequentialHint（ブール値、デフォルトは false）: true の場合、ツールの実行によって、重大な、現実世界の、または不可逆的なアクション（フライトの予約、送金、データの削除など）が発生することを示します。これにより、エージェントとブラウザは、リスクの高いツールを実行する前に、必須のユーザー確認プロンプトを適用して、ユーザーの意図が誤って、または悪意を持って誤って表現されるリスクを軽減できます。
debugging（ブール値、デフォルトは false、Chrome 156 以降で使用可能）: true の場合、ツールがエンドユーザーの操作ではなく、検査とデベロッパーツール（テストフレームワークや Chrome DevTools の AI アシスタンスなど）専用に設計されていることを示します。これにより、汎用エージェントとエンドユーザーエージェントは、デベロッパー向けのツールを除外できます。

await document.modelContext.registerTool({
  name: 'book_flight',
  description: 'Book a flight for the user with confirmed flight details.',
  inputSchema: {
    type: 'object',
    properties: {
      flightId: { type: 'string', description: 'ID of the flight to book' },
      passengers: { type: 'number', description: 'Number of tickets to purchase' },
    },
    required: ['flightId', 'passengers'],
  },
  annotations: {
    readOnlyHint: false,
    consequentialHint: true,
    untrustedContentHint: false,
    debugging: false,
  },
  execute: async ({ flightId, passengers }) => {
    // Add your flight booking transaction logic here.
    return `Booked ${passengers} passenger(s) on flight ${flightId}.`;
  },
});

アノテーションがエージェントの動作に影響を与える例については、WebMCP 拡張機能の例をご覧ください。

登録解除ツール

オプションのパラメータとして渡された場合、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();
await document.modelContext.registerTool(addTodoTool, { signal: controller.signal });

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

Chrome 153 以降では、実行中の処理をキャンセルして中断することなく、ツールを登録解除できます。これにより、コンポーネントフレームワークでツールのライフサイクルを管理する際に予期しない副作用が発生することを防ぐことができます。

ツールのキャンセルを処理する

execute 関数は、ユーザーまたはエージェントによって開始された実行のキャンセルを適切に処理するために、2 番目の引数として signal という名前の AbortSignal パラメータを受け取ります。このシグナルを長時間実行の非同期タスクやネットワークオペレーション（fetch() など）に渡すと、不要な処理を回避し、全体的なリソース管理を改善して、潜在的なリークを回避できます。

await document.modelContext.registerTool({
  name: 'fetch_tool',
  description: 'Fetch the text content of a URL and stream the response.',
  inputSchema: {
    type: 'object',
    properties: {
      url: { type: 'string', description: 'The URL to fetch' },
      priority: { type: 'string', enum: ['high', 'low', 'auto'] },
    },
    required: ['url'],
  },
  execute: async ({ url, priority }, { signal }) => {
    // Abort the fetch request when tool execution is aborted.
    const response = await fetch(url, { priority, signal });
    const stream = response.body.pipeThrough(new TextDecoderStream());
    for await (const chunk of stream) {
      document.querySelector('pre').textContent += chunk;
    }
    return 'Success';
  },
});

ツールの検出

document.modelContext.getTools() を使用して、使用可能なツールを取得します。この非同期メソッドは、呼び出し元のドキュメントがアクセスを許可されているツールのリストをアルファベット順で返します。

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

// {
//   annotations: { consequentialHint: false, debugging: false, readOnlyHint: false, untrustedContentHint: true }, // Optional hints
//   description: "Add a new item to the to-do list",
//   inputSchema: {"type":"object","properties":{…}},
//   name: "addTodo",
//   origin: "https://example.com",
//   title: ""
//   window: Window {window: Window, self: Window, …},
// }

デフォルトでは、getTools() は、呼び出し元ドキュメントまたはフレームツリー内の他の同一オリジンドキュメントによって登録された同一オリジンツールのみを返します。クロスオリジンツールを取得するには、fromOrigins オプションでオリジンを明示的に指定する必要があります。この配列は、安全なオリジンのみをサポートします。

クロスオリジンドキュメントのツールは、次の条件を満たす場合にのみ含まれます。

ホスティングオリジンは fromOrigins オプションに表示されます。
ツールが明示的にオリジンに公開されている。

// https://example.com

// Get same-origin tools only
const sameOriginTools = await document.modelContext.getTools();

// Get same-origin tools plus tools from specific cross-origin documents
const allTools = await document.modelContext.getTools({
  fromOrigins: ['https://partner.org']
});

iframe からツールを取得してウェブベースのチャットインターフェース内で実行する方法の例については、WebMCP Page Agent のデモをご覧ください。ブラウザ拡張機能のエージェントが同一オリジン iframe とクロスオリジン iframe でツールを検出して実行する方法については、WebMCP 拡張機能の例をご覧ください。

ツールを実行する

getTools() で検出されたツールを手動で実行するには、JSON 文字列にシリアル化可能な入力引数の JavaScript オブジェクト（省略可）を指定して document.modelContext.executeTool() を呼び出します。この非同期メソッドは、ツールの実行結果を返します。ナビゲーションがトリガーされた場合は null を返します。

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

// 'Added to-do: Buy milk'

AbortSignal を省略可能なパラメータとして渡すと、保留中のツール実行をキャンセルできます。

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

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

イベント

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

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

クロスオリジン iframe

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

権限に関するポリシー

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

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

オリジンの露出

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

// https://partner.org

await document.modelContext.registerTool({
  name: 'my_shared_tool',
  description: 'Shared across origins',
  // ...
}, {
  exposedTo: ['https://example.com']
});

React のサポート

React には、usewebmcp パッケージを使用した WebMCP の試験運用サポートがあります。アプリケーションがすでに React で記述されている場合は、コンポーネントのマウントとマウント解除のライフサイクルに関連付けられたスタンドアロンフックを使用してツールを登録できます。useWebMCP フックは、スキーマ駆動型の型推論も提供し、ローカル実行状態を公開します。

Angular のサポート

Angular には WebMCP の試験運用版サポートがあります。アプリケーションがすでに Angular で記述されている場合は、アプリケーションの依存関係注入ライフサイクルに関連付けられたツールを登録し、Signal フォームを WebMCP ツールに変換できます。

Vue のサポート

Vue は、@vueuse/core パッケージを使用して WebMCP の試験運用版のサポートを提供しています。アプリケーションがすでに Vue で記述されている場合は、現在の Vue スコープのライフサイクルに関連付けられた useWebMCP コンポーザブルを使用してツールを登録できます。また、リアクティブな条件付きツール登録をサポートし、実行結果を自動的に正規化します。

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

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

WebMCP の説明を読む、質問を投稿する、ディスカッションに参加する。
効果的な WebMCP ツールを構築する方法と WebMCP のベストプラクティスを確認する。
Chrome ステータスで Chrome の実装を確認します。
早期プレビュープログラムに参加して、新しい API をいち早く確認し、メーリングリストにアクセスしましょう。
Chrome の実装に関するフィードバックがある場合は、Chromium のバグを報告してください。

使ってみる

宣言型 API