ライブデモ
対応環境では search_menu ツールが登録されます。未対応の環境では、同じ検索フォームが通常UIとして動きます。
Live tool
search_menu
対応状況を確認中
input
{"type":"object","properties":{"query":{"type":"string","description":"料理やカテゴリのキーワード"}},"required":["query"],"additionalProperties":false}result
入力例を選ぶか、フォームから実行できます。
実装コード
ツール名は動詞から始め、説明には「何をするか」「何をしないか」を書きます。AIから渡される値は、 長さと形式を検証してから処理に渡します。
JavaScriptImperative API
await document.modelContext.registerTool({
name: "search_menu",
title: "メニューを検索",
description:
"提供中のメニューをキーワードで検索する。変更や予約は行わない。",
inputSchema: {
type: "object",
properties: {
query: { type: "string", description: "料理やカテゴリのキーワード" },
},
required: ["query"],
additionalProperties: false,
},
annotations: { readOnlyHint: true },
execute: async ({ query }) => {
if (typeof query !== "string" || query.length > 50) {
throw new Error("queryには50文字以内の文字列を指定してください。");
}
return searchMenu(query);
},
});安全設計
- 検索は読み取り専用。メニューの変更はしない
- 予約などの重要操作は、通常UIの予約フォームで人間が確認する
- 未対応ブラウザでは、同じ検索フォームを通常UIとして表示する
- 入力は50文字以内に制限し、過剰な値を拒否する
次の行動
対応を診断 あなたのサイトを診断する
公開URLから、WebMCPの導入候補を確認できます。