पब्लिश होने की तारीख: 18 मई, 2026, पिछली बार अपडेट किए जाने की तारीख: 2 जून, 2026
| ज़्यादा जानकारी देने वाला वीडियो | वेब | एक्सटेंशन | Chrome स्टेटस | मकसद |
|---|---|---|---|---|
| GitHub | देखें | एक्सपेरिमेंट करने का इरादा |
WebMCP Imperative API का इस्तेमाल करके, स्टैंडर्ड JavaScript की मदद से कई तरह के टूल तय किए जा सकते हैं. आपके टूल अलग-अलग फ़ंक्शन पूरे कर सकते हैं. जैसे, फ़ॉर्म में जानकारी डालना, साइट पर नेविगेट करना, और स्टेट मैनेजमेंट.
इस एपीआई का इस्तेमाल करने से पहले, इस्तेमाल के उदाहरणों के बारे में पढ़ें.
मॉडल के बारे में जानकारी देना
टूल रजिस्टर करने के लिए, modelContext इंटरफ़ेस का इस्तेमाल करें. टूल रजिस्टर करने के लिए, नाम, जानकारी, और इनपुट स्कीमा के साथ-साथ काम की प्रॉपर्टी की ज़रूरत होती है.
मॉडल कॉन्टेक्स्ट में कोई टूल जोड़ने के लिए, registertool का इस्तेमाल करें.
WebMCPza Maker
document.modelContext.registerTool({
name: 'toggle_layer',
description: 'Control pizza layers (sauce, cheese). Use "add", "remove", or "toggle".',
inputSchema: {
type: 'object',
properties: {
layer: { type: 'string', enum: ['sauce-layer', 'cheese-layer'] },
action: { type: 'string', enum: ['add', 'remove', 'toggle'] },
},
required: ['layer'],
},
execute: async ({ layer, action }) => {
await toggleLayer(layer, action);
return `Performed ${action || 'toggle'} on layer: ${layer}`;
},
});
ऑर्डर का स्टेटस पाना
document.modelContext.registerTool({
name: 'get_order_status',
description: 'Search orders in a given timeframe. Returns order number, shipping status and location',
inputSchema: {
"type": "object",
"properties": {
"timeframe": { "type": "string", "oneOf": [
{ "type": "string", "const": "today", "title": "Today" },
{ "type": "string", "const": "yesterday", "title": "Yesterday" },
{ "type": "string", "const": "last_7_days", "title": "Last 7 Days" },
{ "type": "string", "const": "last_30_days", "title": "Last 30 Days" },
{ "type": "string", "const": "last_6_months", "title": "Last 6 Months" }],
"enum": [ "today", "yesterday", "last_7_days", "last_30_days", "last_6_months" ],
"description": "Timeframe for the order lookup." }
},
"required": [ "timeframe" ]
},
execute: async ({ timeframe }) => {
// Add your API or database logic here to fetch and return the order data as a string.
},
});
AbortSignal का इस्तेमाल करके, किसी टूल को हटाया जा सकता है. इसके लिए, टूल को वैकल्पिक पैरामीटर के तौर पर पास करना होगा.
const addTodoTool = {
name: "addTodo",
description: "Add a new item to the to-do list",
inputSchema: {
type: "object",
properties: { text: { type: "string" } },
},
execute: async ({ text }) => {
// You should handle the persistence logic here (omitted for demo)
return `Added to-do: ${text}`;
},
annotations: {
readOnlyHint: false,
untrustedContentHint: true
},
};
const controller = new AbortController();
document.modelContext.registerTool(addTodoTool, { signal: controller.signal });
// Unregister the tool later...
controller.abort();
टूल एक्सप्लोर करें
उपलब्ध टूल देखने के लिए, document.modelContext.getTools() का इस्तेमाल करें. यह एसिंक्रोनस तरीका, उन टूल की सूची दिखाता है जिन्हें कॉल करने वाले दस्तावेज़ को ऐक्सेस करने की अनुमति है.
const [tool] = await document.modelContext.getTools();
console.log(tool);
// {
// annotations: { readOnlyHint: false, untrustedContentHint: true },
// description: "Add a new item to the to-do list",
// inputSchema: '{"type":"object","properties":{"text":{"type":"string"}}}',
// name: "addTodo",
// origin: "https://example.com",
// window: Window {window: Window, self: Window, ...},
// }
डिफ़ॉल्ट रूप से, getTools() सिर्फ़ एक ही ऑरिजिन के टूल दिखाता है. ये टूल, कॉल करने वाले दस्तावेज़ या फ़्रेम ट्री में मौजूद एक ही ऑरिजिन के अन्य दस्तावेज़ों से रजिस्टर किए जाते हैं. अलग-अलग ऑरिजिन के टूल पाने के लिए, आपको fromOrigins विकल्प में उनके ऑरिजिन साफ़ तौर पर बताने होंगे. यह कलेक्शन सिर्फ़ सुरक्षित ऑरिजिन के साथ काम करता है.
क्रॉस-ऑरिजिन दस्तावेज़ों के टूल सिर्फ़ तब शामिल किए जाते हैं, जब:
- होस्टिंग का ओरिजन,
fromOriginsविकल्प में दिखता है. - टूल को साफ़ तौर पर आपके ऑरिजिन के लिए उपलब्ध कराया गया हो.
// https://example.com
// Get same-origin tools only
const sameOriginTools = await document.modelContext.getTools();
// Get same-origin tools plus tools from specific cross-origin documents
const allTools = await document.modelContext.getTools({
fromOrigins: ['https://partner.org']
});
आईफ़्रेम से टूल को वापस पाने और उन्हें वेब पर आधारित चैट इंटरफ़ेस में चलाने का तरीका जानने के लिए, WebMCP पेज एजेंट का डेमो देखें.
टूल चलाना
getTools() में खोजे गए टूल को मैन्युअल तरीके से चलाने के लिए, document.modelContext.executeTool() को इनपुट आर्ग्युमेंट के साथ मान्य JSON स्ट्रिंग के तौर पर कॉल करें. यह एसिंक्रोनस तरीका, टूल के एक्ज़ीक्यूशन का नतीजा दिखाता है. हालांकि, नेविगेशन ट्रिगर होने पर यह शून्य दिखाता है.
const result = await document.modelContext.executeTool(tool, '{"text": "Buy milk"}');
console.log(result);
// 'Added to-do: Buy milk'
AbortSignal का इस्तेमाल करके, टूल के ऐसे अनुरोध को रद्द किया जा सकता है जिसे पूरा होने में समय लग रहा है. हालांकि, ऐसा तब ही किया जा सकता है, जब इसे वैकल्पिक पैरामीटर के तौर पर पास किया गया हो.
const controller = new AbortController();
document.modelContext.executeTool(tool, '{"text": "Buy milk"}', {
signal: controller.signal,
});
// Cancel tool execution later...
controller.abort();
इवेंट
फ़्रेम, document.modelContext पर toolchange इवेंट को सुन सकते हैं, ताकि उपलब्ध टूल की सूची में बदलाव होने पर उन्हें सूचना मिल सके.
document.modelContext.addEventListener("toolchange", (event) => {
// Tools have changed.
});
क्रॉस-ऑरिजिन iframe
WebMCP, क्रॉस-ऑरिजिन iframe के साथ काम करता है. ये iframe, अनुमति से जुड़ी नीतियों और ऑरिजिन गेटिंग, दोनों का इस्तेमाल करते हैं.
अनुमतियों की नीति
क्रॉस-ओरिजिन iframe में, टूल रजिस्टर करने की सुविधा डिफ़ॉल्ट रूप से बंद होती है. किसी पेज को tools
अनुमतियों की नीति का इस्तेमाल करके, ऐक्सेस डेलिगेट करना होगा:
<iframe src="https://example.com" allow="tools"></iframe>
ऑरिजिन एक्सपोज़र
डिफ़ॉल्ट रूप से, टूल अलग-अलग ऑरिजिन के दस्तावेज़ों के लिए उपलब्ध नहीं होते. registerTool में मौजूद exposedTo ऐरे का इस्तेमाल करके, उन ऑरिजिन की सूची बनाई जा सकती है जिन्हें किसी टूल को देखने और उसे चलाने की अनुमति है. यह कलेक्शन सिर्फ़ सुरक्षित ऑरिजिन के साथ काम करता है.
// https://partner.org
document.modelContext.registerTool({
name: 'my_shared_tool',
description: 'Shared across origins',
// ...
}, {
exposedTo: ['https://example.com']
});
ऐंगुलर के साथ काम करता है
Angular में, WebMCP के लिए एक्सपेरिमेंटल सपोर्ट उपलब्ध है. अगर आपका ऐप्लिकेशन पहले से ही Angular में लिखा गया है, तो ऐप्लिकेशन के डिपेंडेंसी इंजेक्शन लाइफ़साइकल से जुड़े टूल रजिस्टर किए जा सकते हैं. साथ ही, अपने सिग्नल फ़ॉर्म को WebMCP टूल में बदला जा सकता है.
सुझाव/राय देना या शिकायत करना
WebMCP पर अभी काम चल रहा है. आने वाले समय में, इसमें बदलाव हो सकता है. अगर आपने इस एपीआई को आज़माया है और आपको कोई सुझाव, शिकायत या राय देनी है, तो हमें ज़रूर बताएं.
- WebMCP के बारे में जानकारी देने वाला लेख पढ़ें. सवाल पूछें और चर्चा में हिस्सा लें.
- WebMCP इस्तेमाल करने के सबसे सही तरीके पढ़ें.
- Chrome Status पर जाकर, Chrome के लिए लागू करने की प्रोसेस देखें.
- अर्ली प्रीव्यू प्रोग्राम में शामिल हों. इससे आपको नए एपीआई के बारे में पहले से पता चल जाएगा. साथ ही, आपको हमारी मेलिंग लिस्ट का ऐक्सेस भी मिल जाएगा.
- अगर आपको Chrome में इस सुविधा को लागू करने के बारे में कोई सुझाव, शिकायत या राय देनी है, तो Chromium में गड़बड़ी की रिपोर्ट सबमिट करें.