Declarative API

Alexandra Klepper

François Beaufort

เผยแพร่: 18 พฤษภาคม 2026

วิดีโออธิบาย	เว็บ	ส่วนขยาย	สถานะของ Chrome	ความตั้งใจ
GitHub	ช่วงทดลองใช้จากต้นทาง		ดู	ความตั้งใจที่จะทดลอง

ใช้ Declarative API เพื่อเปลี่ยนรูปแบบ HTML มาตรฐานให้เป็นเครื่องมือ WebMCP โดยการเพิ่มคำอธิบายประกอบ คำอธิบายประกอบจะกำหนดชื่อและวัตถุประสงค์ของเครื่องมือในองค์ประกอบ <form> ขณะที่ฟิลด์จะทำหน้าที่เป็นพารามิเตอร์ของเครื่องมือ เบราว์เซอร์จะแปลองค์ประกอบเหล่านี้เป็นการแสดงผลที่มีโครงสร้างซึ่งเอเจนต์สามารถใช้ได้ในลักษณะเดียวกับเครื่องมือที่จำเป็น

โปรดอ่านตัวอย่าง Use Case ก่อนใช้ API นี้

การลงทะเบียนเครื่องมือ

เพิ่มแอตทริบิวต์ HTML ต่อไปนี้ลงในแบบฟอร์ม

• toolname: ตั้งชื่อเครื่องมืออย่างชัดเจนตามวัตถุประสงค์
• tooldescription: อธิบายการดำเนินการที่เครื่องมือทำและวัตถุประสงค์ของเครื่องมือ

ตัวอย่างเช่น แบบฟอร์มต่อไปนี้จะอยู่ที่ example.com/get-customer-support

<form toolname="createSupportRequest" tooldescription="Submits a request for customer support.">
</form>

เมื่อเอเจนต์โทรหา toolname เบราว์เซอร์จะโฟกัสที่แบบฟอร์มและ ป้อนข้อมูลในช่องของแบบฟอร์มนั้น โดยแบบฟอร์มจะยังคงปรากฏต่อผู้ใช้

หากนำแอตทริบิวต์ HTML toolname หรือ tooldescription ออก ระบบจะยกเลิกการลงทะเบียนเครื่องมือ

(ไม่บังคับ) พารามิเตอร์เครื่องมือ

หากต้องการเพิ่มความแม่นยำ ให้เพิ่มแอตทริบิวต์ HTML ต่อไปนี้ลงในองค์ประกอบของแบบฟอร์มแต่ละรายการ

• toolparamdescription: แมปองค์ประกอบกับคำอธิบายพร็อพเพอร์ตี้ภายในสคีมา JSON หากไม่มีแอตทริบิวต์นี้ เบราว์เซอร์จะใช้เนื้อหาภายใน <label> ที่เชื่อมโยงและข้ามองค์ประกอบย่อยที่ติดป้ายกำกับได้ หากไม่มีป้ายกำกับ เบราว์เซอร์จะอ้างอิงถึง aria-description

แบบฟอร์มต่อไปนี้ใช้พารามิเตอร์ที่ไม่บังคับสำหรับองค์ประกอบ <select>

<form toolname="supportRequestTool"
  tooldescription="Submit a request for support."
  action="/submit">

  <label for="firstName">First Name</label>
  <input type=text name=firstName>

  <label for="lastName">Last Name</label>
  <input type=text name=lastName>

  <select name="select" required 
    toolparamdescription="Determines what team this request is routed to.">
    <option value="Customer happiness team">Return my purchase.</option>
    <option value="Distribution team">Check where my package is.</option>
    <option value="Website support team">Get help on the website.</option>
  </select>

  <button type=submit>Submit</button>
</form>

เบราว์เซอร์จะตีความแบบฟอร์มนี้เป็นเครื่องมือที่แสดงด้วย JSON ต่อไปนี้

[
  {
    "name": "supportRequestTool",
    "description": "Submit a request for support.",
    "inputSchema": {
      "type": "object",
      "properties": {
        "firstName": {
          "type": "string"
        },
        "lastName": {
          "type": "string"
        },
        "select": {
          "type": "string",
          "anyOf": [
            {
              "type": "string",
              "const": "Customer happiness team",
              "title": "Return my purchase."
            },
            {
              "type": "string",
              "const": "Distribution team",
              "title": "Check where my package is."
            },
            {
              "type": "string",
              "const": "Website support team",
              "title": "Get help on the website."
            }
          ],
          "enum": [
            "Customer happiness team",
            "Distribution team",
            "Website support team"
          ],
          "description": "Determines what team this request is routed to."
        }
      },
      "required": [
        "select"
      ]
    }
  }
]

ส่งแบบฟอร์ม

คุณมี 2 ตัวเลือกในการส่งแบบฟอร์ม ดังนี้

• ผู้ใช้ต้องคลิกส่งด้วยตนเองเพื่อทำงานให้เสร็จสมบูรณ์
• เพิ่ม toolautosubmit เพื่อทริกเกอร์การส่งและการนำทางเมื่อโมเดลเรียกใช้เครื่องมือนี้

อินเทอร์เฟซ SubmitEvent เปิดตัวagentInvokedแอตทริบิวต์บูลีน แอตทริบิวต์นี้จะตั้งค่าเป็น "จริง" ทุกครั้งที่ AI Agent เรียกใช้แบบฟอร์ม เพื่อปรับลักษณะการทำงานของเว็บแอปให้เหมาะกับการโต้ตอบที่อิงตาม AI Agent โดยเฉพาะ

นอกจากนี้ SubmitEvent ยังมีเมธอด respondWith(Promise<any>) เพื่อให้คุณส่งพรอมิสไปยังเบราว์เซอร์ที่แก้ไขด้วยผลลัพธ์ของแบบฟอร์มได้ จากนั้นระบบจะแปลงค่าผลลัพธ์เป็นอนุกรมและส่งกลับไปยังโมเดลเป็นเอาต์พุตของเครื่องมือ หากต้องการใช้วิธีนี้ คุณต้องเรียกใช้ preventDefault() ก่อนเพื่อหยุดการส่งแบบฟอร์มมาตรฐานของเบราว์เซอร์

<form toolautosubmit toolname="search_tool"
  tooldescription="Search the web" action="/search">
  <input type=text name=query>
</form>
<script>
  document.querySelector("form").addEventListener("submit", (e) => {
    e.preventDefault();
    if (!myFormIsValid()) {
      if (e.agentInvoked) { e.respondWith(myFormValidationErrorPromise) };
      return;
    }
    if (e.agentInvoked) { e.respondWith(Promise.resolve("Search is done!")); }
  });
</script>

เบราว์เซอร์จะส่งสัญญาณว่า AI Agent ได้เรียกใช้เครื่องมือที่มีเหตุการณ์ "toolactivated" ซึ่งจะเริ่มทำงานในหน้าต่างเมื่อมีการป้อนข้อมูลในช่องแบบฟอร์มล่วงหน้า ในทางกลับกัน หากผู้ใช้ยกเลิกการดำเนินการที่เป็น Agent หรือมีการเรียกใช้เมธอด reset() ระบบจะทริกเกอร์เหตุการณ์ "toolcancel" เหตุการณ์ทั้ง 2 รายการนี้ยกเลิกไม่ได้และมีแอตทริบิวต์ toolName สำหรับการระบุ

window.addEventListener('toolactivated', ({ toolName }) => {
  console.log(`the tool "${toolName}" execution was activated.`);
  // TODO: Update UI or validate form if needed.
});

window.addEventListener('toolcancel', ({ toolName }) => {
  console.log(`the tool "${toolName}" execution was cancelled.`);
  // TODO: Let the user know. Update UI.
});

แก้ไขตัวบ่งชี้โฟกัส

ตัวบ่งชี้โฟกัสที่มองเห็นได้มีความสําคัญอย่างยิ่งในการแจ้งให้ผู้ใช้และตัวแทนทราบว่าตนเองอยู่ส่วนใดของหน้าเว็บ เมื่อตัวแทนเรียกใช้เครื่องมือได้สำเร็จ โฟกัสที่แบบฟอร์มที่เชื่อมโยง และป้อนข้อมูลในช่องโดยอัตโนมัติ เบราว์เซอร์จะทริกเกอร์คลาสจำลอง CSS ที่เฉพาะเจาะจงเพื่อแสดงความคิดเห็นด้วยภาพ

• :tool-form-active จะมีผลกับองค์ประกอบ form ของ HTML ของเครื่องมือ
• :tool-submit-active จะใช้กับปุ่มส่งของแบบฟอร์ม หากมี

ระบบจะปิดใช้งานคลาสเหล่านี้เมื่อแบบฟอร์มส่งแล้ว เจ้าหน้าที่ยกเลิกการดำเนินการ หรือผู้ใช้รีเซ็ตแบบฟอร์ม คุณปรับแต่ง CSS สำหรับสถานะเหล่านี้หรือใช้สไตล์เบราว์เซอร์เริ่มต้นได้

/* Chrome default declarative form styles. */
form:tool-form-active {
  outline: light-dark(blue, cyan) dashed 1px;
  outline-offset: -1px;
}

input:tool-submit-active {
  outline: light-dark(red, pink) dashed 1px;
  outline-offset: -1px;
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับ แนวทางปฏิบัติแนะนำและรูปแบบการโฟกัส

มีส่วนร่วมและแชร์ความคิดเห็น

WebMCP อยู่ระหว่างการหารืออย่างต่อเนื่องและอาจมีการเปลี่ยนแปลงในอนาคต หากคุณ ลองใช้ API นี้และมีความคิดเห็น โปรดแจ้งให้เราทราบ

• อ่านคำอธิบายของ WebMCP ถามคำถามและเข้าร่วมการสนทนา
• อ่านแนวทางปฏิบัติแนะนำสำหรับ WebMCP
• ดูการติดตั้งใช้งานสำหรับ Chrome ได้ที่ Chrome Status
• เข้าร่วมโปรแกรมตัวอย่างก่อนเปิดตัว เพื่อดู API ใหม่ๆ ก่อนใครและรับสิทธิ์เข้าถึงรายชื่ออีเมลของเรา
• หากมีความคิดเห็นเกี่ยวกับการติดตั้งใช้งานของ Chrome โปรดรายงานข้อบกพร่องของ Chromium