公開日: 2026 年 5 月 18 日
| 商品の解説 | ウェブ | 拡張機能 | Chrome ステータス | インテント |
|---|---|---|---|---|
| GitHub | 表示 | 試験運用版のインテント |
WebMCP Imperative 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: ({ layer, action }) => {
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: ({ 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 todo list",
inputSchema: {
type: "object",
properties: { text: { type: "string" } },
},
execute: ({ text }) => {
// You should handle the persistence logic here (omitted for demo)
return `Added todo: ${text}`;
},
annotations: {
readOnlyHint: false,
untrustedContentHint: true
},
};
const controller = new AbortController();
navigator.modelContext.registerTool(addTodoTool, { signal: controller.signal });
// Unregister the tool later...
controller.abort();
意見交換とフィードバックの提供
WebMCP は現在議論されており、今後変更される可能性があります。この API をお試しになり、フィードバックをお寄せください。
- WebMCP の解説を読み、 質問を投稿して、ディスカッションに参加してください。
- WebMCP のベスト プラクティスをご覧ください。
- Chrome ステータスで Chrome の実装を確認してください。
- 早期プレビュー プログラムに参加して 、新しい API をいち早く確認し、メーリング リストにアクセスしてください。
- Chrome の実装についてフィードバックがある場合は、 Chromium のバグを報告してください。