Web MCP Demo
概要
Web MCP は Chrome が提案するウェブ標準で、ウェブサイトのアクション（検索・予約など）をツールとして公開し、AI エージェントが発見・実行できるようにします。 ツール定義には Declarative API（HTML 属性）と Imperative API（JavaScript）の 2 つがあります。
Declarative API
<form> に属性を追加するだけでツールを定義できます。 なお、Declarative API は W3C 仕様ではまだ TODO の状態で、属性名は Explainer ドラフト (PR #76) に基づいています。
toolname— ツール名tooldescription— ツールの説明toolautosubmit— エージェントによる自動送信を許可toolparamtitle— パラメータの表示名toolparamdescription— パラメータの説明
<form toolname="search_products"
tooldescription="Search for products by name or category"
toolautosubmit>
<input type="text"
name="query"
toolparamtitle="Search Query"
toolparamdescription="The search term to find products" />
<select name="category"
toolparamtitle="Category"
toolparamdescription="Product category to filter by">
<option value="electronics">Electronics</option>
<option value="books">Books</option>
<option value="clothing">Clothing</option>
</select>
<button type="submit">Search</button>
</form>Imperative API
navigator.modelContext.registerTool() で動的にツールを登録できます。 プロパティ名は W3C 仕様ドラフトに基づいています。
name— ツールの一意な識別子description— ツールの機能の自然言語による説明inputSchema— 入力パラメータの JSON Schema 定義execute— ツール呼び出し時に実行されるコールバック関数（非同期可）annotations— ツールの振る舞いに関するオプションのメタデータ（例:readOnlyHint）
await navigator.modelContext.registerTool({
name: "get_weather",
description: "Get the current weather for a given location",
inputSchema: {
type: "object",
properties: {
location: {
type: "string",
description: "City name or zip code",
},
units: {
type: "string",
enum: ["celsius", "fahrenheit"],
description: "Temperature units",
},
},
required: ["location"],
},
execute: async ({ location, units = "celsius" }) => {
const response = await fetch(
`/api/weather?location=${location}&units=${units}`
);
return await response.json();
},
});ブラウザ対応チェック
チェック中...
このサイトでの実装
ルートレイアウトに非表示の Declarative API フォームを配置し、AI エージェントが search_site ツールとしてサイト内検索を実行できるようにしています。