問い合わせの下書きをAIに作らせる

入力の手間はAIに任せ、送信の判断は人間が行う。読み取り専用の次に紹介したい下書き型の構成です。

ライブデモ

対応環境では draft_contact ツールが登録されます。AIが作った下書きはフォームに入るだけで、送信は人間がボタンを押すまで実行されません

Live tool

draft_contact

対応状況を確認中

ツールができるのは下書きの反映までです。送信は、同意チェック後に人間がボタンを押して実行します。

実装コード

ツールの実行処理は「フォームに入力を反映する」までに限定します。送信APIを呼び出すコードを execute内に書かないことが最重要です。

JavaScriptImperative API
await document.modelContext.registerTool({
  name: "draft_contact",
  title: "問い合わせの下書きを作成",
  description:
    "問い合わせフォームに下書きを入力する。送信はしない。送信は利用者が画面で確認して行う。",
  inputSchema: {
    type: "object",
    properties: {
      name: { type: "string", description: "氏名" },
      email: { type: "string", description: "返信用メールアドレス" },
      message: { type: "string", description: "問い合わせ内容" },
    },
    required: ["name", "email", "message"],
    additionalProperties: false,
  },
  annotations: { readOnlyHint: false },
  execute: async ({ name, email, message }) => {
    if (typeof name !== "string" || name.length > 50) {
      throw new Error("nameには50文字以内の文字列を指定してください。");
    }
    if (typeof email !== "string" || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
      throw new Error("emailはメールアドレスの形式で指定してください。");
    }
    if (typeof message !== "string" || message.length > 2000) {
      throw new Error("messageには2000文字以内の文字列を指定してください。");
    }
    // 送信はしない。フォームに反映して、利用者の確認を待つだけ。
    fillForm({ name, email, message });
    return { status: "drafted", nextStep: "内容を確認して送信ボタンを押してください。" };
  },
});

安全設計

  • execute内で送信APIを呼ばない。下書き反映までに限定する
  • 送信ボタンは通常UIに残し、二重送信を防ぐ
  • 同意チェックボックスはAIが操作できず、必ず人間が選択する
  • 未対応ブラウザでは、通常の問い合わせフォームとして動く
送信はAIに任せない

問い合わせの送信は、利用者の意思確認が必要な操作です。AIが自動送信できる構成にすると、 誤送信やスパム送信のリスクが生じます。下書きまでに限定してください。

次の行動

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

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

対応を診断