डिक्लेरेटिव एपीआई

Alexandra Klepper

पब्लिश होने की तारीख: 18 मई, 2026

ज़्यादा जानकारी देने वाला वीडियो	वेब	एक्सटेंशन	Chrome स्टेटस	मकसद
GitHub	डेवलपर के लिए बिना किसी शुल्क आज़माने की सुविधा	डेवलपर के लिए बिना किसी शुल्क आज़माने की सुविधा	देखें	एक्सपेरिमेंट करने का इरादा

एनोटेशन जोड़कर, स्टैंडर्ड एचटीएमएल फ़ॉर्म को WebMCP टूल में बदलने के लिए, Declarative API का इस्तेमाल करें. एनोटेशन, <form> एलिमेंट में टूल का नाम और मकसद बताते हैं. वहीं, फ़ील्ड टूल के पैरामीटर के तौर पर काम करते हैं. ब्राउज़र इन एलिमेंट को स्ट्रक्चर्ड फ़ॉर्मैट में बदलता है, ताकि एजेंट इनका इस्तेमाल निर्देशात्मक टूल की तरह कर सकें.

इस एपीआई का इस्तेमाल करने से पहले, इस्तेमाल के उदाहरणों के बारे में पढ़ें.

टूल रजिस्टर करना

अपने फ़ॉर्म में ये एचटीएमएल एट्रिब्यूट जोड़ें:

• toolname: टूल के नाम को उसके मकसद के हिसाब से साफ़ तौर पर बताएं.
• tooldescription: बताएं कि टूल कौनसी कार्रवाई करता है और इसका मकसद क्या है.

उदाहरण के लिए, यह फ़ॉर्म example.com/get-customer-support पर मौजूद है:

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

जब कोई एजेंट toolname को कॉल करता है, तो ब्राउज़र फ़ॉर्म को फ़ोकस में लाता है और उसके फ़ील्ड में जानकारी भरता है. फ़ॉर्म, उपयोगकर्ता को दिखता रहता है.

toolname या tooldescription एचटीएमएल एट्रिब्यूट को हटाने पर, टूल का रजिस्ट्रेशन रद्द हो जाता है.

(ज़रूरी नहीं) टूल के पैरामीटर

जवाबों को ज़्यादा सटीक बनाने के लिए, फ़ॉर्म के अलग-अलग एलिमेंट में ये एचटीएमएल एट्रिब्यूट जोड़ें:

• 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"
      ]
    }
  }
]

फ़ॉर्म सबमिट करना

फ़ॉर्म सबमिट करने के लिए, आपके पास दो विकल्प हैं:

• टास्क पूरा करने के लिए, उपयोगकर्ता को मैन्युअल तरीके से सबमिट करें पर क्लिक करना होगा.
• सबमिट करने की प्रोसेस शुरू करने और नेविगेशन में बदलाव करने के लिए, toolautosubmit जोड़ें.

SubmitEvent इंटरफ़ेस में agentInvoked बूलियन एट्रिब्यूट के बारे में बताया गया है. जब भी कोई फ़ॉर्म, एआई एजेंट से ट्रिगर होता है, तब इस एट्रिब्यूट को 'सही है' पर सेट किया जाता है. इससे आपके वेब ऐप्लिकेशन का व्यवहार, एजेंट के साथ होने वाले इंटरैक्शन के हिसाब से बदल जाता है.

इसके अलावा, 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>

ब्राउज़र यह सिग्नल देता है कि एआई एजेंट ने "toolactivated" इवेंट के साथ किसी टूल को एक्ज़ीक्यूट किया है. फ़ॉर्म फ़ील्ड में पहले से जानकारी भरने के बाद, यह इवेंट विंडो पर ट्रिगर होता है. इसके उलट, अगर कोई उपयोगकर्ता एजेंट की कार्रवाई को रद्द करता है या reset() तरीके का इस्तेमाल करता है, तो "toolcancel" इवेंट ट्रिगर होता है. इन दोनों इवेंट को रद्द नहीं किया जा सकता. साथ ही, पहचान करने के लिए 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.
});

फ़ोकस इंडिकेटर में बदलाव करना

फ़ोकस इंडिकेटर का दिखना ज़रूरी है. इससे उपयोगकर्ताओं और एजेंट को पता चलता है कि वे पेज पर कहां हैं. जब कोई एजेंट किसी टूल को चालू करता है, उससे जुड़े फ़ॉर्म पर फ़ोकस करता है, और उसके फ़ील्ड में अपने-आप जानकारी भर जाती है, तो ब्राउज़र विज़ुअल फ़ीडबैक के लिए खास सीएसएस स्यूडो-क्लास ट्रिगर करता है:

• :tool-form-active को टूल के एचटीएमएल form एलिमेंट पर लागू किया जाता है.
• :tool-submit-active को फ़ॉर्म के सबमिट बटन पर लागू किया जाता है. हालांकि, ऐसा तब होता है, जब सबमिट बटन मौजूद हो.

फ़ॉर्म सबमिट करने पर, एजेंट के कार्रवाई रद्द करने पर या उपयोगकर्ता के फ़ॉर्म को रीसेट करने पर, ये क्लास बंद हो जाती हैं. इन स्थितियों के लिए सीएसएस को पसंद के मुताबिक बनाया जा सकता है या ब्राउज़र की डिफ़ॉल्ट स्टाइल का इस्तेमाल किया जा सकता है.

/* 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 पर अब भी काम चल रहा है. इसलिए, आने वाले समय में इसमें बदलाव हो सकता है. अगर आपने इस एपीआई को आज़माया है और आपको कोई सुझाव, शिकायत या राय देनी है, तो हमें ज़रूर बताएं.

• WebMCP के बारे में जानकारी देने वाला लेख पढ़ें, सवाल पूछें, और चर्चा में हिस्सा लें.
• WebMCP इस्तेमाल करने के सबसे सही तरीके पढ़ें.
• Chrome Status पर जाकर, Chrome के लिए लागू करने की प्रोसेस देखें.
• अर्ली प्रीव्यू प्रोग्राम में शामिल हों. इससे आपको नए एपीआई के बारे में पहले से पता चल जाएगा. साथ ही, आपको हमारी मेलिंग लिस्ट का ऐक्सेस भी मिल जाएगा.
• अगर आपको Chrome में इस सुविधा को लागू करने के बारे में कोई सुझाव, शिकायत या राय देनी है, तो Chromium में गड़बड़ी की रिपोर्ट सबमिट करें.