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 toolparamtitle="Support type" 
    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": {
        "text": {
          "type": "string",
          "title": "firstName",
          "description": "First name"
        },
        "text": {
          "type": "string",
          "title": "lastName",
          "description": "Last name"
        },
        "select": {
          "type": "string",
          "anyOf": [
            {
              "const": "Customer happiness team",
              "title": "Return my purchase."
            },
            {
              "const": "Distribution team",
              "title": "Check where my package is."
            },
            {
              "const": "Website support team",
              "title": "Get help on the website."
            }
          ],
          "enum": [
            "Customer happiness team",
            "Distribution team",
            "Website support team"
          ],
          "title": "Support type",
          "description": "Determines what team this request is routed to."
        }
      },
      "required": [
        "select"
      ]
    }
  }
]

ส่งแบบฟอร์ม

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

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

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

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