Declarative API

在 HTML <form> 標籤上加入屬性，瀏覽器自動將表單轉換為 Agent 可呼叫的工具。零 JavaScript。

Declarative API 的運作原理： 當 Agent 造訪你的網頁時，瀏覽器會掃描所有帶有 toolname 屬性的 <form>，自動產生對應的工具定義（名稱、描述、參數）。Agent 呼叫工具時，瀏覽器會自動填入表單欄位並提交。

關鍵屬性： toolname 工具名稱 | tooldescription 工具描述 | toolparamtitle 參數名稱 | toolparamdescription 參數描述 | toolautosubmit 是否自動提交

1. 登入表單

toolname="login" | toolautosubmit="false"（需使用者確認）

HTML 原始碼

<form toolname="login"
      tooldescription="Log in to the application with email and password"
      toolautosubmit="false">

  <input type="email" name="email"
         toolparamtitle="Email"
         toolparamdescription="User email address for login">

  <input type="password" name="password"
         toolparamtitle="Password"
         toolparamdescription="User account password">

</form>

2. 航班搜尋

toolname="flight_search" | toolautosubmit="true"（Agent 可自動提交）

注意 toolautosubmit="true"： 這個表單允許 Agent 直接自動提交，不需要使用者確認。適合搜尋類的操作（不會造成副作用）。涉及金錢或隱私的操作建議設為 false。

3. 聯絡表單

toolname="send_message"

事件日誌

當表單被提交時（人類或 Agent），會記錄在這裡。 Agent 觸發的提交可透過 SubmitEvent.agentInvoked 區分。

等待表單提交...

Agent 看到的工具定義

這是 Agent 透過 WebMCP 看到的結構化工具。不需要截圖或猜 DOM，直接就能理解頁面功能。

Agent 視角（自動產生的 Tool Schema）

[
  {
    "name": "login",
    "description": "Log in to the application with email and password",
    "parameters": {
      "Email": "User email address for login",
      "Password": "User account password"
    },
    "autosubmit": false
  },
  {
    "name": "flight_search",
    "description": "Search for available flights between two cities on a specific date",
    "parameters": {
      "origin_airport_code": "3-letter IATA code for departure airport",
      "destination_airport_code": "3-letter IATA code for arrival airport",
      "departure_date": "Departure date in YYYY-MM-DD format",
      "number_of_passengers": "Number of passengers (1-9)"
    },
    "autosubmit": true
  },
  {
    "name": "send_message",
    "description": "Send a contact message to customer support",
    "parameters": {
      "sender_name": "Full name of the person sending the message",
      "sender_email": "Email address for reply",
      "message_subject": "Message category",
      "message_body": "The actual message content"
    }
  }
]