宿泊施設の空室照会をAIに公開する

照会はAIに任せ、予約の確定は人が画面で確認する。役割を分けた構成の例です。

ライブデモ

対応環境では check_availability ツールが登録されます。未対応の環境では、同じフォームが通常UIとして動きます。

Live tool

check_availability

対応状況を確認中
input{"type":"object","properties":{"date":{"type":"string","description":"宿泊日 (YYYY-MM-DD)"},"guests":{"type":"integer","description":"宿泊人数 (1〜6)"}},"required":["date","guests"],"additionalProperties":false}
result

入力例を選ぶか、フォームから実行できます。

実装コード

日付と人数は文字列として届くため、形式と範囲を検証してから処理に渡します。照会だけなら副作用はありませんが、 説明文にはそのことを明記します。

JavaScriptImperative API
await document.modelContext.registerTool({
  name: "check_availability",
  title: "空室を照会",
  description:
    "指定した日付と人数で空室を照会する。予約や変更は行わない。",
  inputSchema: {
    type: "object",
    properties: {
      date: { type: "string", description: "宿泊日 (YYYY-MM-DD)" },
      guests: { type: "integer", description: "宿泊人数 (1〜6)" },
    },
    required: ["date", "guests"],
    additionalProperties: false,
  },
  annotations: { readOnlyHint: true },
  execute: async ({ date, guests }) => {
    if (typeof date !== "string" || !/^\d{4}-\d{2}-\d{2}$/.test(date)) {
      throw new Error("dateはYYYY-MM-DD形式で指定してください。");
    }
    if (typeof guests !== "number" || guests < 1 || guests > 6) {
      throw new Error("guestsは1〜6の整数で指定してください。");
    }
    return checkAvailability(date, guests);
  },
});

安全設計

  • 照会は読み取り専用。予約・変更・キャンセルはしない
  • 予約は通常UIの予約フォームで、内容確認後に人間が実行する
  • 日付形式と人数の範囲を検証してから処理に渡す
  • 未対応ブラウザでは通常UIの照会フォームをそのまま使える
次の行動

あなたのサイトを診断する

公開URLから、WebMCPの導入候補を確認できます。

対応を診断