Declarative API

Alexandra Klepper

Published: May 18, 2026

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

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

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

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

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

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

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

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

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

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

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

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

• toolparamdescription: จับคู่องค์ประกอบกับคำอธิบายพร็อพเพอร์ตี้ภายใน JSON Schema หากไม่มีแอตทริบิวต์นี้ เบราว์เซอร์จะใช้เนื้อหาภายใน <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 Agent ทริกเกอร์แบบฟอร์ม เพื่อปรับลักษณะการทำงานของเว็บแอปให้เหมาะกับการโต้ตอบที่อิงตาม AI Agent โดยเฉพาะ

นอกจากนี้ 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 ใช้กับองค์ประกอบ HTML form ของเครื่องมือ
• :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
• เข้าร่วมโปรแกรมทดลองใช้ก่อนเปิดตัว เพื่อดู API ใหม่ก่อนใครและรับสิทธิ์เข้าถึงรายชื่ออีเมลของเรา
• หากมีความคิดเห็นเกี่ยวกับการใช้งานของ Chrome โปรดรายงานข้อบกพร่อง Chromium