WebMCP ट्यूटोरियल: Building Agent-Ready Websites With Chrome's New Standard

अभी, AI एजेंट वेब को वैसे ब्राउज़ करते हैं जैसे कोई पर्यटक किसी विदेशी मेन्यू को पढ़ता है: पिक्सल्स पर आँखें सिकोड़ना, अंदाज़ लगाना कि बटन क्या करते हैं, और उम्मीद करना कि क्लिक के बीच में पेज का लेआउट न बदल जाए। Google और Microsoft ने तय किया कि इस समस्या को ढंग से सुलझाया जाना चाहिए।

फरवरी 2026 में, Chrome 146 ने WebMCP का एक शुरुआती प्रीव्यू जारी किया—एक प्रस्तावित वेब मानक जो वेबसाइट्स को एजेंट्स को बिल्कुल बताने देता है कि वे क्या कर सकती हैं और कैसे कर सकती हैं। 

अब स्क्रीन-स्क्रैपिंग नहीं। 

अब DOM का रिवर्स-इंजीनियरिंग नहीं।

इस ट्यूटोरियल में, मैं आपको समझाऊँगा कि WebMCP वास्तव में क्या है, अपना एन्वायरनमेंट कैसे सेट करें, और फिर HTML-आधारित और JavaScript-आधारित दोनों तरीकों से काम करने वाले इंटीग्रेशन बनाएँ। 

मैं एजेंट इनवोकेशन्स को संभालने के सुरक्षा सुझाव भी कवर करूँगा, साथ ही Chrome के डिबगिंग टूल्स से सब कुछ कैसे टेस्ट करें।

WebMCP क्या है?

WebMCP (Web Model Context Protocol) एक नया ब्राउज़र मानक है जो वेबसाइट्स को अपनी क्षमताएँ संरचित टूल्स के रूप में घोषित करने देता है, जिन्हें AI एजेंट सीधे कॉल कर सकते हैं। AI को विज़ुअल इंटरफ़ेस को “पढ़ने” और क्लिक करके आगे बढ़ने के बजाय, WebMCP खुद वेबपेज को एक साफ-सुथरा, क्लाइंट-साइड API में बदल देता है।

आइए सोचें कि आज कोई एजेंट किसी ट्रैवल साइट पर फ्लाइट बुक करने की कोशिश करता है तो क्या होता है। उसे समझना पड़ता है कि कौन सा फ़ील्ड डिपार्चर सिटी माँग रहा है, अंदाज़ लगाना पड़ता है कि तारीख का फ़ॉर्मेट MM/DD है या YYYY-MM-DD, सर्च बटन ढूँढना पड़ता है, और उम्मीद करनी पड़ती है कि पेज किसी अनजान लेआउट में रीलोड न हो। अगर साइट इसके बजाय searchFlights नाम का एक टूल पब्लिश कर सके, जिसमें origin, destination, dates और passenger count के लिए टाइप्ड पैरामीटर्स हों, तो यह सारा अनुमान लगाना गायब हो जाता है।

WebMCP इसे संभव बनाता है। कोई साइट navigator.modelContext नामक ब्राउज़र API के ज़रिए टूल्स रजिस्टर करती है, जहाँ हर टूल के साथ एक नाम, प्राकृतिक भाषा में विवरण, और उसके इनपुट व आउटपुट के लिए JSON स्कीमा होता है। एजेंट उन टूल्स को खोजता है, स्कीमा के अनुरूप पैरामीटर्स भेजता है, और बदले में स्ट्रक्चर्ड डेटा प्राप्त करता है।

Google और Microsoft के इंजीनियरों ने मिलकर W3C Web Machine Learning कम्युनिटी ग्रुप के अंतर्गत यह स्पेक बनाया। आर्किटेक्चर पूरी तरह क्लाइंट-साइड है, जो इसे सामान्य MCP डिप्लॉयमेंट्स से अलग बनाता है, जहाँ एक अलग बैकएंड सर्वर टूल एक्ज़िक्यूशन संभालता है। जहाँ स्टैण्डर्ड MCP एजेंट्स को JSON-RPC के माध्यम से बैकएंड सर्वर्स से जोड़ता है, वहीं WebMCP सब कुछ ब्राउज़र टैब के अंदर रखता है। 

टूल्स पेज के JavaScript में एक्ज़िक्यूट होते हैं; वे वही सेशन साझा करते हैं जो यूज़र के पास पहले से है, और ब्राउज़र यह नियंत्रित करता है कि एजेंट को क्या करने की अनुमति है। अगर आपने पहले MCP सर्वर्स के साथ काम किया है (उदाहरण के लिए, हमारे MCP Model Context Protocol ट्यूटोरियल में), तो टूल रजिस्ट्रेशन की अवधारणाएँ परिचित लगेंगी, लेकिन डिप्लॉयमेंट मॉडल काफ़ी अलग है।

WebMCP की प्रमुख विशेषताएँ और क्षमताएँ

दो APIs उपलब्ध हैं, और उनका उद्देश्य अलग-अलग है:

• Declarative API HTML एनोटेशन्स के माध्यम से काम करता है। आप toolname और tooldescription एट्रिब्यूट्स को <form> एलिमेंट पर जोड़ते हैं, साथ ही व्यक्तिगत फ़ील्ड्स पर वैकल्पिक toolparamdescription, और ब्राउज़र मौजूदा फ़ॉर्म स्ट्रक्चर से एक JSON स्कीमा जेनरेट करता है। जिन साइट्स पर पहले से अच्छे फ़ॉर्म बने हुए हैं, उन्हें एजेंट-एक्सेसिबल बनने के लिए बहुत कम बदलाव की ज़रूरत होती है।
• Imperative API आपको पूरा प्रोग्रामेटिक कंट्रोल देता है। आप navigator.modelContext.registerTool() कॉल करते हैं और टूल का नाम, विवरण, इनपुट स्कीमा, और एक execute कॉलबैक परिभाषित करते हैं। यह रास्ता उन चीज़ों के लिए है जो साधारण फ़ॉर्म के लिए बहुत डायनेमिक हैं: मल्टी-स्टेप वर्कफ़्लोज़, API कॉल्स, कम्प्यूटेड रिज़ल्ट्स, और कस्टम वेलिडेशन लॉजिक।

दोनों APIs डायनेमिक रजिस्ट्रेशन की अनुमति देते हैं, यानी पेज स्टेट बदलने पर टूल्स दिख और छिप सकते हैं। यूज़र के लॉग-इन से पहले, आप केवल login टूल एक्सपोज़ कर सकते हैं। ऑथेंटिकेशन के बाद, अकाउंट-विशिष्ट टूल्स रजिस्टर हो जाते हैं।

• JSON स्कीमा हर टूल पर टाइप्स, एनम्स, आवश्यक फ़ील्ड्स, और पैरामीटर विवरण निर्धारित करते हैं। यही संरचना एजेंट्स को पैरामीटर वैल्यू गढ़ने या डेटा गलत फ़ील्ड्स में डालने से रोकती है।
• CSS псूडो-क्लासेस एजेंट इंटरैक्शन के दौरान विज़ुअल फ़ीडबैक देती हैं। Chrome :tool-form-active उस किसी भी फ़ॉर्म पर लगाता है जिसे कोई एजेंट वर्तमान में भर रहा है, और :tool-submit-active उस फ़ॉर्म के सबमिट बटन पर लगता है। स्क्रीन देख रहा व्यक्ति ठीक-ठीक समझ सकता है कि एजेंट किस फ़ॉर्म पर काम कर रहा है।

अभी तक कोई बिल्ट-इन डिस्कवरी मैकेनिज़्म नहीं है। एजेंट को आपके टूल्स के बारे में जानने के लिए पहले आपके पेज पर आना पड़ता है। Chrome टीम ने .well-known/webmcp मैनिफ़ेस्ट फ़ाइल के ज़रिए प्री-विज़िट डिस्कवरी के विचार पर चर्चा की है, लेकिन इस पर अभी कुछ स्पेसिफ़ाई नहीं किया गया है।

क्योंकि WebMCP अभी शुरुआती प्रीव्यू में है, आपको कुछ खुरदुरे किनारे और चल रहे बदलावों की उम्मीद रखनी चाहिए, ख़ासकर क्योंकि स्पेसिफ़िकेशन पहले ही वर्ज़न्स में विकसित हो चुका है, जिसमें मार्च 2026 में provideContext और clearContext मेथड्स का हटना शामिल है। 

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

WebMCP की पूर्व-आवश्यकताएँ और एन्वायरनमेंट सेटअप

सही एन्वायरनमेंट सेट करना कुछ मिनट लेता है, जबकि गलत Chrome वर्ज़न काफी ज़्यादा समय बर्बाद कर देगा।

Chrome Canary वर्ज़न 146.0.7672.0 या उससे ऊपर आवश्यक है। Chrome का स्टेबल रिलीज़, बीटा और देव चैनल WebMCP फ़्लैग के साथ शिप नहीं होते। Chrome फ़ोरम्स में कई डेवलपर्स ने गलत वर्ज़न इंस्टॉल करने और फ़्लैग ग़ायब होने पर हैरान होने के बारे में लिखा है। विशेष रूप से Canary पेज से ही डाउनलोड करें।

Chrome Canary डाउनलोड पेज

ब्राउज़र से आगे, आपको HTML फ़ॉर्म्स और JavaScript इवेंट हैंडलिंग का कार्यशील ज्ञान चाहिए। अगर आपको पुनरावृत्ति चाहिए, DataCamp का Introduction to JavaScript कोर्स बुनियादी बातें कवर करता है। 

Model Context Tool Inspector एक्सटेंशन अनिवार्य नहीं है, पर इंस्टॉल करने लायक है। यह वर्तमान पेज पर रजिस्टर हुए सभी टूल्स दिखाता है, आपको अपने टाइप किए पैरामीटर्स के साथ उन्हें मैन्युअली एक्ज़िक्यूट करने देता है, और नैचुरल लैंग्वेज के साथ टूल इनवोकेशन टेस्ट करने के लिए बिल्ट-इन Gemini API सपोर्ट रखता है।

WebMCP का प्रयोगात्मक फ़्लैग सक्षम करना

Chrome Canary इंस्टॉल होने के बाद:

1. एड्रेस बार में chrome://flags/#enable-webmcp-testing पर जाएँ।
2. "WebMCP for testing" फ़्लैग को Enabled पर सेट करें।
3. पेज के नीचे Relaunch पर क्लिक करें।

chrome://flags पेज जिसमें WebMCP फ़्लैग हाइलाइटेड है और Enabled पर सेट है

रिलॉन्च के बाद, DevTools (F12) खोलें, Console टैब पर जाएँ, और चलाएँ:

console.log(navigator.modelContext);संचालित द्वारा

DevTools कंसोल में navigator.modelContext ऑब्जेक्ट दिख रहा है।

आउटपुट में कोई ऑब्जेक्ट दिखना ( undefined के बजाय) यह पुष्टि करता है कि API उपलब्ध है। यहाँ से, आप Model Context Tool Inspector एक्सटेंशन इंस्टॉल कर सकते हैं और Google का ट्रैवल डेमो खोल सकते हैं, ताकि किसी वास्तविक पेज पर टूल रजिस्ट्रेशन काम करते हुए देखें। 

वहाँ, आप बस एक्सटेंशन लॉन्च करें, और आपको नीचे जैसा कुछ दिखना चाहिए:

Chrome का Model Context Tool Inspector एक्सटेंशन के साथ Google की Flight Search डेमो वेबसाइट। 

जैसा कि आप देख सकते हैं, Model Context Tool Inspector searchFlights टूल का पता लगाता है और उसके इनपुट स्कीमा को एक्सपोज़ करता है, जिससे मॉडल को पेज के साथ इंटरैक्ट करने का कहीं स्पष्ट तरीका मिलता है।

अपना पहला WebMCP इंटीग्रेशन बनाना

पहला WebMCP इंटीग्रेशन बनाने के दो तरीके हैं, और हम नीचे दोनों का खाका देते हैं:

डिक्लेरेटिव अप्रोच (HTML)

WebMCP टूल रजिस्टर करने का सबसे आसान तरीका है अपने पेज पर पहले से मौजूद किसी फ़ॉर्म को एनोटेट करना। यहाँ एक मानक प्रोडक्ट सर्च फ़ॉर्म है जिसमें कोई WebMCP एनोटेशन नहीं हैं:

<form action="/search" method="GET">
  <label for="query">Search term</label>
  <input type="text" name="query" id="query" required>

  <label for="category">Category</label>
  <select name="category" id="category">
    <option value="all">All categories</option>
    <option value="electronics">Electronics</option>
    <option value="books">Books</option>
    <option value="clothing">Clothing</option>
  </select>

  <button type="submit">Search</button>
</form>संचालित द्वारा

चार एट्रिब्यूट्स इसे एजेंट-कॉलेबल टूल में बदल देते हैं। toolname और tooldescription सीधे <form> टैग पर जाते हैं। व्यक्तिगत फ़ील्ड्स पर, toolparamtitle और toolparamdescription तब डिफ़ॉल्ट लेबल्स को ओवरराइड करते हैं जब वे एजेंट के लिए पर्याप्त वर्णनात्मक नहीं होते:

<form toolname="search_products"
      tooldescription="Search the product catalog by keyword and optional category filter"
      action="/search" method="GET">

  <label for="query">Search term</label>
  <input type="text" name="query" id="query" required
         toolparamdescription="The keyword or phrase to search for in product titles and descriptions">

  <label for="category">Category</label>
  <select name="category" id="category"
          toolparamtitle="Product Category"
          toolparamdescription="Filter results to a specific product category. Use 'all' for no filter.">
    <option value="all">All categories</option>
    <option value="electronics">Electronics</option>
    <option value="books">Books</option>
    <option value="clothing">Clothing</option>
  </select>

  <button type="submit">Search</button>
</form>संचालित द्वारा

ब्राउज़र इन एट्रिब्यूट्स के साथ जो करता है वह आंतरिक रूप से एक JSON स्कीमा जेनरेट करना है। टूल का नाम, पैरामीटर टाइप्स, <select> ऑप्शन्स से आने वाले enum वैल्यू, और HTML से required मार्कर्स—ये सब बिना किसी अतिरिक्त कॉन्फ़िगरेशन के साथ ले लिए जाते हैं।

इसे टेस्ट करने के लिए, अपने लोकल मशीन पर किसी भी टेक्स्ट एडिटर से एक साधारण .html फ़ाइल बनाएँ, ऊपर का कोड पेस्ट करें, और Chrome में file:///{your_document_path.html} से खोलें; एक्सटेंशन को लोकल फ़ाइल के साथ काम कराने के लिए, एक्सटेंशन सेटिंग्स खोलें, Details पर जाएँ, और नीचे दिए स्क्रीनशॉट के अनुसार file URLs तक एक्सेस सक्षम करें।

एक्सटेंशन को लोकल फ़ाइलों तक पहुँच की अनुमति देना।

अन्यथा, आपका ब्राउज़र आपकी लोकल HTML फ़ाइल के साथ इंटरैक्ट नहीं कर पाएगा। यह हो जाने के बाद, अगर आप Chrome से फ़ाइल खोलते हैं और WebMCP एक्सटेंशन की जाँच करते हैं, तो आपको नीचे दिए स्क्रीनशॉट जैसा कुछ दिखना चाहिए। 

एनोटेशन्स जोड़ने के बाद search_products टूल के लिए जेनरेटेड स्कीमा दिखाता एक्सटेंशन।

तो वास्तव में होता क्या है जब कोई एजेंट इस टूल को कॉल करता है? 

Chrome फ़ॉर्म पर फ़ोकस करता है, एजेंट द्वारा दिए गए वैल्यूज़ से फ़ील्ड्स को भरता है, और यहीं रुक जाता है। यूज़र को अभी भी Submit पर क्लिक करना होता है। यह डिफ़ॉल्ट डिज़ाइन के तहत है, क्योंकि कार्रवाई होने से पहले इंसान को इसे कन्फर्म करना चाहिए।

फ़ॉर्म टैग पर toolautosubmit एट्रिब्यूट जोड़ना उस कन्फर्मेशन स्टेप को हटा देता है। यह सर्च क्वेरी जैसी केवल-पढ़ने वाली कार्यवाहियों के लिए समझ में आता है। जो भी चीज़ डेटा बदलती है, खरीदारी ट्रिगर करती है, या अकाउंट सेटिंग्स बदलती है—उसके लिए इसे ऑफ़ ही रखें।

सबमिशन को इंटरसेप्ट करने और एजेंट को एक स्ट्रक्चर्ड रिज़ल्ट वापस भेजने का भी तरीका है। सबमिट इवेंट पर respondWith() मेथड एक प्रॉमिस लेता है, और आप जो भी उससे resolve करते हैं, वही टूल का आउटपुट बन जाता है:

<form toolname="search_products"
      tooldescription="Search the product catalog"
      toolautosubmit
      action="/search">
  <input type="text" name="query" required>
  <button type="submit">Search</button>
</form>

<script>
  document.querySelector("form").addEventListener("submit", (e) => {
    e.preventDefault();

    const query = new FormData(e.target).get("query");

    if (!query || query.trim().length === 0) {
      if (e.agentInvoked) {
        e.respondWith(Promise.resolve({
          error: "Search query cannot be empty. Please provide a keyword."
        }));
      }
      return;
    }

    const results = performSearch(query);

    if (e.agentInvoked) {
      e.respondWith(Promise.resolve({
        content: [{ type: "text", text: JSON.stringify(results) }]
      }));
    }
  });
</script>संचालित द्वारा

सबमिट इवेंट पर agentInvoked बूलियन तब true होता है जब सबमिशन किसी एजेंट ने ट्रिगर किया हो और सामान्य मानव क्लिक के लिए false। आप इसका उपयोग एजेंट-विशिष्ट रिस्पॉन्स फ़ॉर्मैटिंग और अपने सामान्य फ़ॉर्म हैंडलिंग के बीच ब्रांच करने के लिए कर सकते हैं।

जब किसी फ़ील्ड पर toolparamdescription मौजूद नहीं होता, तो ब्राउज़र संबंधित <label> एलिमेंट से विवरण लेता है, या उसके अभाव में aria-description एट्रिब्यूट से। इसलिए एक्सेसिबल मार्कअप बिना किसी अतिरिक्त काम के ही वाजिब पैरामीटर विवरण देता है।

एक मौजूदा कमी: <input type="radio"> एलिमेंट्स के समूह के लिए, toolparamdescription समूह के पहले रेडियो बटन पर जाना चाहिए, और यह पूरे पैरामीटर पर लागू होता है।

इम्पेरेटिव अप्रोच (JavaScript)

फ़ॉर्म्स बहुत कुछ कवर करते हैं, लेकिन कुछ टूल्स को एप्लिकेशन स्टेट के साथ काम करना, API कॉल्स करना, या ऐसे कम्प्यूटेड रिज़ल्ट्स लौटाने होते हैं जो पारंपरिक फ़ॉर्म सबमिशन से मैप नहीं होते। यहाँ एक बेसिक टूल है जो टू-डू लिस्ट में आइटम जोड़ता है:

window.navigator.modelContext.registerTool({
  name: "addTodo",
  description: "Add a new item to the user's to-do list. Use when the user asks to create, add, or remember a task.",
  inputSchema: {
    type: "object",
    properties: {
      text: {
        type: "string",
        description: "The task description"
      },
      priority: {
        type: "string",
        enum: ["low", "medium", "high"],
        description: "Task priority level. Default to 'medium' if not specified by the user."
      }
    },
    required: ["text"]
  },
  execute: ({ text, priority = "medium" }) => {
    const newItem = { id: Date.now(), text, priority, done: false };
    todoApp.addItem(newItem);
    todoApp.renderList();

    return {
      content: [{
        type: "text",
        text: Added task: "${text}" with ${priority} priority. The to-do list now has ${todoApp.getCount()} items.
      }]
    };
  }
});संचालित द्वारा

execute कॉलबैक एजेंट द्वारा भेजे गए पैरामीटर्स प्राप्त करता है (जो inputSchema से मेल खाने चाहिए), आपका एप्लिकेशन लॉजिक चलाता है, और एक content ऐरे लौटाता है। 

एक महत्वपूर्ण बात: रिटर्न करने से पहले UI अपडेट करें। 

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

function onUserLogin(user) {
  navigator.modelContext.registerTool({
    name: "viewOrderHistory",
    description: "Show the user's past orders with dates and totals",
    inputSchema: {
      type: "object",
      properties: {
        limit: {
          type: "number",
          description: "Maximum number of orders to return. Defaults to 10."
        }
      }
    },
    execute: async ({ limit = 10 }) => {
      const orders = await fetchOrders(user.id, limit);
      return {
        content: [{ type: "text", text: JSON.stringify(orders) }]
      };
    }
  });
}

function onUserLogout() {
  navigator.modelContext.unregisterTool("viewOrderHistory");
}संचालित द्वारा

और अधिक यथार्थपरक परिदृश्य: किसी रेस्तरां की आरक्षण पेज जो टेबल उपलब्धता जाँचती है। यह उदाहरण इन-कोड वेलिडेशन भी दिखाता है, जिसकी Chrome डॉक्यूमेंटेशन अनुशंसा करती है क्योंकि स्कीमा संयम एजेंट्स के लिए सहायक होते हैं पर हर एक द्वारा लागू नहीं किए जाते।

navigator.modelContext.registerTool({
  name: "checkAvailability",
  description: "Check table availability for a given date and party size at this restaurant. Returns available time slots.",
  inputSchema: {
    type: "object",
    properties: {
      date: {
        type: "string",
        description: "The desired reservation date in YYYY-MM-DD format"
      },
      partySize: {
        type: "number",
        description: "Number of guests, between 1 and 12"
      }
    },
    required: ["date", "partySize"]
  },
  execute: async ({ date, partySize }) => {
    if (partySize < 1 || partySize > 12) {
      return {
        content: [{
          type: "text",
          text: "Party size must be between 1 and 12. For larger groups, please call the restaurant directly at (555) 123-4567."
        }]
      };
    }

    const parsedDate = new Date(date);
    if (isNaN(parsedDate.getTime()) || parsedDate < new Date()) {
      return {
        content: [{
          type: "text",
          text: "Please provide a valid future date in YYYY-MM-DD format."
        }]
      };
    }

    const slots = await api.getAvailableSlots(date, partySize);
    renderAvailabilityCalendar(date, slots);

    return {
      content: [{
        type: "text",
        text: JSON.stringify({
          date,
          partySize,
          availableSlots: slots.map(s => s.time),
          message: slots.length > 0
            ? Found ${slots.length} available time slots.
            : "No availability for this date. Try a different date or smaller party."
        })
      }]
    };
  }
});संचालित द्वारा

Chrome डॉक्यूमेंटेशन की कुछ बातें उल्लेखनीय हैं। जहाँ संभव हो, रॉ यूज़र इनपुट स्वीकार करें। अगर कोई कहता है "11:00 to 15:00," तो आपका टूल उन स्ट्रिंग्स को सीधे ले, बजाय इसके कि एजेंट उन्हें minutes-from-midnight या किसी अन्य आंतरिक फ़ॉर्मेट में बदले। 

वेलिडेशन सिर्फ़ स्कीमा में नहीं, कोड में करें, क्योंकि स्कीमा प्रवर्तन एजेंट्स में भिन्न होता है। और केवल तब लौटें जब UI अपडेट हो चुका हो, क्योंकि एजेंट्स यह देखने के लिए पेज देख सकते हैं कि ऑपरेशन पूरा हुआ या नहीं।

सर्वर-साइड MCP टूल्स जो क्लाइंट-साइड WebMCP इम्प्लीमेंटेशन का पूरक बनें, उनके लिए हमारे FastMCP के साथ MCP सर्वर्स बनाने पर गाइड में सेटअप विस्तार से कवर किया गया है।

WebMCP में एजेंट इनवोकेशन और सुरक्षा को संभालना

WebMCP स्पेसिफ़िकेशन मानता है कि कोई मानव देख रहा है। Google और Microsoft में लेखकों ने इसे सहकारी वर्कफ़्लोज़, न कि स्वायत्त संचालन के इर्द-गिर्द डिज़ाइन किया है। नीचे दिए मैकेनिज़्म उसी सोच को दर्शाते हैं।

AI बनाम मानव यूज़र्स का पता लगाना

SubmitEvent इंटरफ़ेस पर agentInvoked नामक एक नया बूलियन प्रॉपर्टी आती है। जब कोई एजेंट फ़ॉर्म सबमिशन ट्रिगर करता है, तो प्रॉपर्टी true होती है। जब कोई व्यक्ति सामान्य रूप से Submit क्लिक करता है, तो यह false होती है।

document.querySelector("form").addEventListener("submit", (e) => {
  if (e.agentInvoked) {
    console.log("AI agent submitted the form");
    if (!isWithinAgentRateLimit()) {
      e.preventDefault();
      e.respondWith(Promise.resolve({
        error: "Too many requests. Please wait before trying again."
      }));
      return;
    }
  }
});संचालित द्वारा

फ़ॉर्म सबमिशन से आगे, दो विंडो-लेवल इवेंट्स हैं जो एजेंट गतिविधि ट्रैक करते हैं। toolactivated तब फायर होता है जब कोई एजेंट टूल इनवोक करता है, और Chrome संबंधित फ़ॉर्म फ़ील्ड्स को पहले से भर देता है। toolcancel तब फायर होता है जब यूज़र ऑपरेशन रद्द करता है या फ़ॉर्म रीसेट करता है। 

ये दोनों इवेंट्स कैंसिलेबल नहीं हैं, लेकिन दोनों में toolName प्रॉपर्टी होती है ताकि आपको पता हो कि कौन सा टूल शामिल था।

window.addEventListener("toolactivated", ({ toolName }) => {
  showAgentActivityBanner(toolName);
});

window.addEventListener("toolcancel", ({ toolName }) => {
  hideAgentActivityBanner();
});संचालित द्वारा

ह्यूमन-इन-द-लूप परमिशन्स लागू करना

डिक्लेरेटिव टूल्स के साथ, डिफ़ॉल्ट व्यवहार यह है कि एजेंट द्वारा फ़ील्ड्स भरने के बाद इंसान को Submit क्लिक करना पड़ता है। वास्तविक प्रभाव वाले किसी भी काम के लिए यह डिफ़ॉल्ट बने रहना चाहिए।

toolautosubmit एट्रिब्यूट उस स्टेप को हटा देता है। यह केवल-पढ़ने या कम-जोखिम वाले टूल्स पर होना चाहिए: सर्च क्वेरीज़, उपलब्धता जाँच, स्टेटस चेक्स। 

जो कुछ भी डेटा बनाता, संशोधित करता, या मिटाता है उसे मैनुअल क्लिक की आवश्यकता होनी चाहिए।

आप CSS псूडो-क्लासेस से एजेंट इंटरैक्शन स्टेट को स्टाइल कर सकते हैं:

form:tool-form-active {
  border: 2px solid #2563eb;
  background-color: #eff6ff;
  font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">1rem;
  border-radius: 8px;
}

form:tool-form-active::before {
  content: "AI agent is filling this form";
  display: block;
  font-size: 0.875rem;
  color: #2563eb;
  font-weight: 600;
  font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">0.5rem;
}संचालित द्वारा

एक फ़ॉर्म जिसमें :tool-form-active स्टाइलिंग लागू है, नीली बॉर्डर और "AI agent is filling this form" लेबल दिख रहा है।

इम्पेरेटिव टूल्स एक अलग चुनौती पेश करते हैं। वहाँ कोई फ़ॉर्म और कोई सबमिट बटन नहीं होता, इसलिए एजेंट के टूल कॉल करते ही एक्ज़िक्यूशन तुरंत चल पड़ता है। 

ऐसे किसी भी ऑपरेशन के लिए जो मानव अनुमोदन के बिना नहीं होना चाहिए, आपको कन्फर्मेशन खुद टूल में बनाना होगा:

navigator.modelContext.registerTool({
  name: "deleteAccount",
  description: "Permanently delete the user's account and all associated data. Cannot be undone.",
  inputSchema: {
    type: "object",
    properties: {
      confirmPhrase: {
        type: "string",
        description: "The user must type 'DELETE MY ACCOUNT' to confirm."
      }
    },
    required: ["confirmPhrase"]
  },
  execute: ({ confirmPhrase }) => {
    if (confirmPhrase !== "DELETE MY ACCOUNT") {
      return {
        content: [{
          type: "text",
          text: "Confirmation phrase does not match. Ask the user to confirm explicitly."
        }]
      };
    }

    return new Promise((resolve) => {
      showConfirmationModal("Are you sure?", {
        onConfirm: async () => {
          await api.deleteAccount();
          resolve({ content: [{ type: "text", text: "Account deleted." }] });
        },
        onCancel: () => {
          resolve({ content: [{ type: "text", text: "Deletion cancelled by user." }] });
        }
      });
    });
  }
});संचालित द्वारा

MCP इकोसिस्टम में पैटर्न सुसंगत है: एजेंट इरादा व्यक्त करता है, मानव एक्ज़िक्यूशन कन्फर्म करता है। यह अलग-अलग MCP इम्प्लीमेंटेशन्स में कैसे काम करता है, इसका व्यापक दृष्टिकोण पाने के लिए हमारा शीर्ष MCP सर्वर्स और क्लाइंट्स का ओवरव्यू देखें।

अपनी WebMCP इम्प्लीमेंटेशन का परीक्षण

जब आपका पहला WebMCP इंटीग्रेशन चलने लगे, तब उसे टेस्ट करने का समय है। 

Chrome DevTools एजेंट सिम्युलेटर का उपयोग करना

Model Context Tool Inspector एक्सटेंशन इंस्टॉल करने के बाद, इसके आइकन पर एक छोटा बैज दिखाता है कि वर्तमान पेज ने कितने टूल्स रजिस्टर किए हैं। पॉप-अप खोलने पर हर टूल नाम, विवरण, और इनपुट स्कीमा के साथ दिखता है। अगर कोई टूल जो आपने रजिस्टर किया है यहाँ नहीं दिख रहा, तो रजिस्ट्रेशन सही से काम नहीं किया।

एक्सटेंशन पैनल जिसमें कई रजिस्टर किए गए टूल्स की सूची दिख रही है और उनके स्कीमा विस्तृत हैं।

एजेंट सिम्युलेटर को टेस्ट करने के लिए, Google की Flight Search डेमो वेबसाइट पर वापस चलते हैं। अब हम देख सकते हैं कि इस ऐप को मैन्युअली या नैचुरल लैंग्वेज से कैसे एक्ज़िक्यूट करें। 

मैन्युअल एक्ज़िक्यूशन अप्रोच

मैन्युअल एक्ज़िक्यूशन एजेंट टेस्टिंग के अनिश्चित तत्व को हटा देता है। एक्सटेंशन पैनल में ड्रॉपडाउन से कोई टूल चुनें, "Input Arguments" फ़ील्ड में एक JSON ऑब्जेक्ट टाइप करें, और "Execute Tool" पर क्लिक करें। एक्सटेंशन आपके दिए पैरामीटर्स के साथ सीधे टूल को कॉल करता है।

एक्सटेंशन में searchFlights टूल चुना हुआ है, JSON पैरामीटर्स भरे हुए हैं, और Execute Tool बटन दिख रहा है।

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

{
  "origin": "LON",
  "destination": "NYC",
  "tripType": "round-trip",
  "outboundDate": "2026-06-10",
  "inboundDate": "2026-06-17",
  "passengers": 2
}संचालित द्वारा

मैन्युअल टूल एक्ज़िक्यूशन के बाद सर्च रिज़ल्ट्स दिखाता ट्रैवल डेमो पेज।

प्राकृतिक भाषा परीक्षण

प्राकृतिक भाषा परीक्षण Gemini API का उपयोग करता है। एक्सटेंशन की सेटिंग्स में AI Studio से कोई की पेस्ट करें, फिर ऐसा प्रॉम्प्ट टाइप करें 

Search for round-trip flights from London to New York leaving June 10th, returning June 17th, for 2 passengers.संचालित द्वारा

एक्सटेंशन आपके टूल डेफ़िनिशन्स के साथ उस प्रॉम्प्ट को Gemini 2.5 Flash को भेजता है, और मॉडल तय करता है कि कौन सा टूल इनवोक करना है और कौन से पैरामीटर्स पास करने हैं।

एक्सटेंशन का प्राकृतिक भाषा इनपुट फ़ील्ड जिसमें प्रॉम्प्ट टाइप है और नीचे एजेंट का टूल इनवोकेशन रिस्पॉन्स दिख रहा है।

अगर एजेंट गलत टूल चुनता है या पैरामीटर्स गलत मैप करता है, तो संभवतः आपके टूल विवरण और अधिक विशिष्ट होने चाहिए। अच्छे विवरण यह स्पष्ट करते हैं कि टूल क्या करता है ("फ्लाइट उपलब्धता जाँचने के लिए इसका उपयोग करें"), न कि यह कि इसे किसके लिए उपयोग नहीं करना चाहिए।

एक व्यावहारिक टेस्टिंग क्रम:

1. पेज लोड के बाद एक्सटेंशन में टूल्स दिख रहे हैं, यह वेरिफ़ाई करें।
2. हर टूल को सही पैरामीटर्स के साथ मैन्युअली एक्ज़िक्यूट करें। कन्फर्म करें कि execute लॉजिक काम कर रहा है और UI अपेक्षा के अनुसार अपडेट हो रहा है।
3. गलत पैरामीटर्स के साथ एक्ज़िक्यूट करें। देखें कि आपकी वेलिडेशन त्रुटियाँ पकड़ती है और मैसेज इतने स्पष्ट हैं कि एजेंट स्वयं-सुधार कर सके।
4. प्राकृतिक भाषा से टेस्ट करें। देखें कि एजेंट सही टूल चुनता है और यूज़र के शब्दों को स्कीमा पैरामीटर्स से सही ढंग से मैप करता है या नहीं।
5. एज केस टेस्ट करें: अनऑथेंटिकेटेड यूज़र्स, डिसेबल्ड फ़ॉर्म्स, API डाउनटाइम, और तेज़ी से दोहराए गए कॉल्स।

Google के इकोसिस्टम के भीतर MCP टूल्स के संदर्भ के लिए, हमारा Google MCP Servers ट्यूटोरियल कई प्रासंगिक पैटर्न कवर करता है। और Chrome से परे प्रोटोकॉल लैंडस्केप का व्यापक दृष्टिकोण पाने के लिए देखें Top Remote MCP Servers।

निष्कर्ष

WebMCP वेबसाइट्स को AI एजेंट्स के साथ सीधा संचार चैनल देता है। एजेंट्स के पेज पर अनुमान लगाने के बजाय, साइट स्ट्रक्चर्ड टूल डेफ़िनिशन्स पब्लिश करती है, और एजेंट उन्हें टाइप्ड पैरामीटर्स के साथ कॉल करता है। डिक्लेरेटिव API केवल कुछ HTML एट्रिब्यूट्स से मौजूदा फ़ॉर्म्स को एजेंट-कॉलेबल टूल्स में बदल देता है। इम्पेरेटिव API बाकी सभी जटिलताओं को कवर करता है। सुरक्षा मॉडल उन कार्रवाइयों में इंसान को नियंत्रण में रखता है जो मायने रखती हैं।

स्पेक अभी शुरुआती चरण में है, केवल Chrome Canary में फ़्लैग के पीछे उपलब्ध है, और प्रोडक्शन उपयोग के लिए उपयुक्त नहीं है। लेकिन यह तथ्य कि Google और Microsoft दोनों इसे साथ मिलकर लिख रहे हैं, और W3C गवर्नेंस दे रहा है, यह दर्शाता है कि इसके एक स्थिर वेब मानक बनने का वास्तविक मार्ग है। अभी API के साथ समय बिताने का मतलब है कि जब स्थिर रिलीज़ आएगी तब आप पहले से ही टूल डिज़ाइन पैटर्न्स और सुरक्षा मैकेनिज़्म समझ चुके होंगे।

अगर आप अभी से तैयारी शुरू करना चाहते हैं, तो अपनी मौजूदा साइट्स के फ़ॉर्म्स का ऑडिट करें और पहचानें कि किन्हें एजेंट एक्सेस से सबसे ज़्यादा लाभ होगा। सर्च फ़ॉर्म्स और उपलब्धता चेकर कम-जोखिम वाले शुरुआती बिंदु हैं। जब आप उन पर डिक्लेरेटिव API के साथ सहज हो जाएँ, तो उन वर्कफ़्लोज़ के लिए इम्पेरेटिव टूल्स पर जाएँ जिन्हें कस्टम लॉजिक चाहिए। 

विषय को और एक्सप्लोर करने के लिए, मैं अनुशंसा करता हूँ:

• MCP Model Context Protocol ट्यूटोरियल—WebMCP के मूलभूत सिद्धांतों के लिए।
• FastMCP के साथ MCP सर्वर्स बनाना—क्लाइंट-साइड WebMCP के पूरक सर्वर-साइड MCP टूल्स के लिए।
• Google MCP Servers ट्यूटोरियल—Google-विशिष्ट इंटीग्रेशन पैटर्न्स के लिए।
• Top Remote MCP Servers और Top MCP Servers and Clients—वृहत्तर इकोसिस्टम के लिए।