WebMCP React ਐਪਸ ਨੂੰ AI agents ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ structured tool APIs ਪ੍ਰਦਾਨ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਜੋ ਕਿ ਭਰੋਸੇਯੋਗ, UI-independent ਕਾਲਾਂ ਰਾਹੀਂ ਕਮਜ਼ੋਰ UI-scraping ਦੀ ਜਗ੍ਹਾ ਲੈਂਦਾ ਹੈ। ਇਹ ਫੀਚਰ Chrome 149 ਅਤੇ ਇਸ ਤੋਂ ਉੱਪਰ ਦੇ version ਲਈ ਇੱਕ origin-trial ਵਿੱਚ ਉਪਲਬਧ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਇਸਨੂੰ chrome://flags/#enable-webmcp-testing ਰਾਹੀਂ ਚਾਲੂ ਕਰ ਸਕਦੇ ਹੋ।
Agents ਨੂੰ ਕਲਿੱਕ ਕਰਨਾ ਸਿਖਾਉਣ ਵਿੱਚ ਸਮੱਸਿਆ
AI agents ਨੂੰ ਵੈੱਬ ਪੇਜ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਨ ਦੇਣ ਦੇ ਜ਼ਿਆਦਾਤਰ ਮੌਜੂਦਾ ਯਤਨ ਵਿਜ਼ੂਅਲ ਸੰਕੇਤਾਂ (visual cues) 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਇੱਕ agent DOM ਨੂੰ ਪਾਰਸ ਕਰਦਾ ਹੈ, ਅੰਦਾਜ਼ਾ ਲਗਾਉਂਦਾ ਹੈ ਕਿ ਕਿਹੜਾ element ਬਟਨ ਹੈ, ਕਲਿੱਕਾਂ ਦਾ ਸਿਮੂਲੇਸ਼ਨ ਕਰਦਾ ਹੈ, ਸਕ੍ਰੋਲ ਕਰਦਾ ਹੈ, ਅਤੇ ਫਾਰਮ ਫੀਲਡਾਂ ਨੂੰ ਭਰਦਾ ਹੈ। ਜਿਸ ਪਲ ਕੋਈ ਬਟਨ ਹਿੱਲਦਾ ਹੈ, ਲੇਬਲ ਬਦਲਦਾ ਹੈ, ਜਾਂ ਲੇਆਉਟ ਵਿੱਚ ਕੋਈ ਤਬਦੀਲੀ ਹੁੰਦੀ ਹੈ, ਸਕ੍ਰਿਪਟ ਫੇਲ ਹੋ ਜਾਂਦੀ ਹੈ। ਇਹ ਪਹੁੰਚ ਹੌਲੀ ਹੈ ਕਿਉਂਕਿ ਇਹ ਹਰ ਸਟੈਪ ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਉਡੀਕ ਕਰਦੀ ਹੈ, ਅਤੇ ਇੱਕ ਰੁਟੀਨ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਬਦਲਾਅ ਪੂਰੀ ਆਟੋਮੇਸ਼ਨ ਪਾਈਪਲਾਈਨ ਨੂੰ ਤੋੜ ਸਕਦਾ ਹੈ।
WebMCP ਮਾਡਲ ਨੂੰ ਬਦਲ ਦਿੰਦਾ ਹੈ
WebMCP Google Chrome ਦੁਆਰਾ ਪੇਸ਼ ਕੀਤਾ ਗਿਆ ਇੱਕ ਨਵਾਂ ਵੈੱਬ ਸਟੈਂਡਰਡ ਹੈ। Agent ਦੁਆਰਾ ਖੋਜਣ ਲਈ ਵਿਜ਼ੂਅਲ ਸਰਫੇਸ ਪ੍ਰਦਾਨ ਕਰਨ ਦੀ ਬਜਾਏ, ਇੱਕ ਪੇਜ tools ਦਾ ਇੱਕ ਸੈੱਟ ਐਡਵਰਟਾਈਜ਼ ਕਰਦਾ ਹੈ—ਨਾਮਿਤ, ਟਾਈਪ ਕੀਤੇ ਆਪਰੇਸ਼ਨ ਜੋ ਪੇਜ ਕਰ ਸਕਦਾ ਹੈ। ਇੱਕ AI agent ਪਹਿਲਾਂ ਪੁੱਛਦਾ ਹੈ “ਕਿਹੜੇ tools ਉਪਲਬਧ ਹਨ?”; ਪੇਜ “searchProducts” ਜਾਂ “checkout” ਵਰਗੀ ਸੂਚੀ ਨਾਲ ਜਵਾਬ ਦਿੰਦਾ ਹੈ। ਫਿਰ agent ਇੱਕ JSON payload ਭੇਜ ਕੇ tool ਨੂੰ ਇਵੋਕ (invoke) ਕਰਦਾ ਹੈ ਜੋ tool ਦੇ ਘੋਸ਼ਿਤ input schema ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ searchProducts(query: "jacket")। ਬ੍ਰਾਊਜ਼ਰ ਇਸ ਰਿਕਵੈਸਟ ਨੂੰ ਸਿੱਧੇ ਪੇਜ ਦੇ JavaScript ਨੂੰ ਰੂਟ ਕਰਦਾ ਹੈ, ਜੋ ਕਿਸੇ ਵੀ UI ਸ਼ਮੂਲੀਅਤ ਤੋਂ ਬਿਨਾਂ ਅੰਡਰਲਾਈਂ ਲੌਜਿਕ ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ।
ਇਸਦਾ ਨਤੀਜਾ ਇੱਕ ਅਜਿਹਾ ਇੰਟਰੈਕਸ਼ਨ ਹੈ ਜੋ ਤੁਰੰਤ ਹੈ, CSS ਤਬਦੀਲੀਆਂ ਦੇ ਬਾਵਜੂਦ ਕੰਮ ਕਰਦਾ ਹੈ, ਅਤੇ ਜਦੋਂ ਤੱਕ tool ਦੀਆਂ ਪਰਿਭਾਸ਼ਾਵਾਂ ਸਥਿਰ ਰਹਿੰਦੀਆਂ ਹਨ, ਉਦੋਂ ਤੱਕ ਕਾਰਜਸ਼ੀਲ ਰਹਿੰਦੀਆਂ ਹਨ।
ਡਿਵੈਲਪਰਾਂ ਲਈ ਮਹੱਤਵਪੂਰਨ ਫਾਇਦੇ
- Speed – ਸੰਚਾਰ (Communication) ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਮੈਸੇਜਿੰਗ ਸਿਸਟਮ ਦੇ ਅੰਦਰ ਰਹਿੰਦਾ ਹੈ, ਕਲਿੱਕਾਂ ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਅਤੇ ਪੇਜ ਅੱਪਡੇਟਾਂ ਦੀ ਉਡੀਕ ਕਰਨ ਦੇ ਵਾਪਸੀ ਚੱਕਰ (round-trip) ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ।
- Reliability – Tools ਉਹੀ ਫੰਕਸ਼ਨ ਕਾਲ ਕਰਦੇ ਹਨ ਜੋ ਸਾਈਟ ਪਹਿਲਾਂ ਹੀ ਆਪਣੇ UI ਲਈ ਵਰਤਦੀ ਹੈ, ਇਸ ਲਈ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਬਦਲਾਅ API ਨੂੰ ਨਹੀਂ ਤੋੜਦਾ।
- Control – ਡਿਵੈਲਪਰ ਫੈਸਲਾ ਕਰਦੇ ਹਨ ਕਿ ਕਿਹੜੇ ਆਪਰੇਸ਼ਨ ਪ੍ਰਦਾਨ ਕੀਤੇ ਜਾਣੇ ਹਨ, ਉਹ ਕਿਹੜੇ ਪੈਰਾਮੀਟਰ ਸਵੀਕਾਰ ਕਰਦੇ ਹਨ, ਅਤੇ agent ਨੂੰ ਰਿਸਪਾਂਸ ਵਿੱਚ ਕੀ ਦਿਖਾਈ ਦੇ ਸਕਦਾ ਹੈ।
- UI independence – ਸਟਾਈਲਿੰਗ, ਲੇਆਉਟ, ਜਾਂ ਕੰਪੋਨੈਂਟ ਰੀਫੈਕਟਰੀੰਗ ਹੁਣ agent ਦੀ ਫੀਚਰ ਨੂੰ ਇਵੋਕ ਕਰਨ ਦੀ ਯੋਗਤਾ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਕਰਦੀ।
WebMCP ਸਰਵਰ ਸਾਈਡ 'ਤੇ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਮੌਜੂਦਾ MCP (Message-Channel-Protocol) ਨੂੰ ਬਦਲਦਾ ਨਹੀਂ ਹੈ। MCP ਭਾਰੀ ਡਾਟਾ ਫੈਚਿੰਗ ਅਤੇ ਬੈਕਐਂਡ ਆਰਕੈਸਟ੍ਰੇਸ਼ਨ ਨੂੰ ਸੰਭਾਲਣਾ ਜਾਰੀ ਰੱਖਦਾ ਹੈ, ਜਦੋਂ ਕਿ WebMCP ਲਾਈਵ, in-tab ਇੰਟਰੈਕਸ਼ਨਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ।
React ਡਿਵੈਲਪਰ ਕਿਵੇਂ ਸ਼ੁਰੂਆਤ ਕਰ ਸਕਦੇ ਹਨ
React ਕੋਡ ਇੱਕ ਇੰਪੈਰੇਟਿਵ JavaScript API ਜਾਂ ਇੱਕ ਡਿਕਲੇਰੇਟਿਵ HTML ਫਾਰਮ-ਅਧਾਰਤ API ਦੀ ਵਰਤੋਂ ਕਰਕੇ tools ਨੂੰ ਰਜਿਸਟਰ ਕਰ ਸਕਦਾ ਹੈ। ਇੱਕ ਆਮ ਤਰੀਕਾ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਨੂੰ ਇੱਕ ਕਸਟਮ ਹੁੱਕ (custom hook) ਵਿੱਚ ਲਪੇਟਣਾ ਹੈ:
- Tool ਦੇ ਨਾਮ ਅਤੇ ਇੱਕ ਸੰਖੇਪ ਵਰਣਨ ਨਾਲ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰੋ।
- ਇੱਕ input schema ਪ੍ਰਦਾਨ ਕਰੋ (ਉਦਾਹਰਨ ਲਈ, ਲੋੜੀਂਦੇ ਫੀਲਡਾਂ ਦਾ ਵਰਣਨ ਕਰਨ ਵਾਲਾ ਇੱਕ JSON schema)।
- ਇੱਕ
executeਕਾਲਬੈਕ ਪ੍ਰਦਾਨ ਕਰੋ ਜੋ ਮੌਜੂਦਾ ਬਿਜ਼ਨਸ ਲੌਜਿਕ ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ—ਅਕਸਰ ਉਹੀ ਫੰਕਸ਼ਨ ਜੋ ਇੱਕ ਬਟਨ ਕਲਿੱਕ ਦੁਆਰਾ ਟ੍ਰਿਗਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
ਜਦੋਂ ਹੁੱਕ ਚੱਲਦਾ ਹੈ, ਬ੍ਰਾਊਜ਼ਰ ਪੇਜ ਦੇ WebMCP manifest ਵਿੱਚ tool ਨੂੰ ਜੋੜ ਦਿੰਦਾ ਹੈ। ਇੱਕ AI agent ਜੋ manifest ਨੂੰ ਲੱਭ ਲੈਂਦਾ ਹੈ, ਉਹ ਫਿਰ DOM ਨੂੰ ਛੂਹੇ ਬਿਨਾਂ tool ਨੂੰ ਇਵੋਕ ਕਰ ਸਕਦਾ ਹੈ।
ਕਿਉਂਕਿ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਕੰਪੋਨੈਂਟ ਮਾਊਂਟ ਟਾਈਮ (component mount time) 'ਤੇ ਹੁੰਦੀ ਹੈ, tools ਨੂੰ ਖਾਸ ਰੂਟਾਂ ਜਾਂ ਫੀਚਰ ਫਲੈਗਾਂ ਤੱਕ ਸੀਮਤ (scoped) ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਟੀਮਾਂ ਨੂੰ ਇਸ ਗੱਲ 'ਤੇ ਗ੍ਰੈਨੂਲਰ ਕੰਟਰੋਲ ਮਿਲਦਾ ਹੈ ਕਿ AI ਪ੍ਰੋਡਕਸ਼ਨ ਬਨਾਮ ਟੈਸਟ ਵਾਤਾਵਰਣ ਵਿੱਚ ਕੀ ਕਰ ਸਕਦਾ ਹੈ।
ਸਾਵਧਾਨੀਆਂ ਅਤੇ ਕੀ ਦੇਖਣਾ ਹੈ
WebMCP ਅਜੇ ਵੀ ਇੱਕ origin trial ਹੈ। ਇਹ ਸਿਰਫ Chrome 149+ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਫਲੈਗ ਰਾਹੀਂ ਮੈਨੂਅਲੀ ਚਾਲੂ ਕਰਨਾ ਪੈਂਦਾ ਹੈ।
ਅੱਗੇ ਕੀ ਆਉਂਦਾ ਹੈ
Google ਨੇ ਉਹਨਾਂ ਡਿਵੈਲਪਰਾਂ ਲਈ ਇਹ ਟ੍ਰਾਇਲ ਖੋਲ੍ਹ ਦਿੱਤਾ ਹੈ ਜੋ AI-native ਵੈੱਬ ਅਨੁਭਵਾਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਨ। ਦਿਲਚਸਪੀ ਰੱਖਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਵਿਅਕਤੀ ਲਈ ਅਗਲੇ ਕਦਮ ਹਨ:
- Chrome ਵਿੱਚ ਫਲੈਗ ਨੂੰ ਚਾਲੂ ਕਰੋ ਅਤੇ ਟਾਰਗੇਟ ਸਾਈਟ ਨੂੰ ਰੀਲੋਡ ਕਰੋ।
- ਇੱਕ React ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਇੱਕ ਸਧਾਰਨ tool ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਜੋੜੋ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ devtools ਵਿੱਚ manifest ਨੂੰ ਦਿਖਾਈ ਦੇਣ ਵੇਲੇ ਦੇਖੋ।
- Tool ਨੂੰ ਕਾਲ ਕਰਨ ਅਤੇ ਰਿਸਪਾਂਸ ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਲਈ ਇੱਕ AI client (ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਲੋਕਲ ਸਕ੍ਰਿਪਟ ਜੋ WebMCP ਪ੍ਰੋਟੋਕੋਲ ਦੀ ਪਾਲਣਾ ਕਰਦੀ ਹੈ) ਦਾ ਟੈਸਟ ਕਰੋ।
- ਸਥਿਰ ਸ਼ਿਪਿੰਗ (stable shipping) ਬਾਰੇ ਅੱਪਡੇਟ ਲਈ ਟ੍ਰਾਇਲ ਦੇ ਸਟੇਟਸ ਪੇਜ ਨੂੰ ਟ੍ਰੈਕ ਕਰੋ।
Takeaway: WebMCP React ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਉਹ ਤਰੀਕਾ ਦਿੰਦਾ ਹੈ ਜਿਸ ਨਾਲ ਉਹ ਆਪਣੀਆਂ ਐਪਸ ਨੂੰ AI agents ਦੁਆਰਾ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਕਾਲ ਕਰਨ ਯੋਗ ਬਣਾ ਸਕਦੇ ਹਨ, ਜਿਸ ਨਾਲ UI ਐਲੀਮੈਂਟਸ ਨੂੰ ਸਥਿਰ, ਟਾਈਪ ਕੀਤੇ ਸਰਵਿਸਿਜ਼ ਵਿੱਚ ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਇਹ ਤਬਦੀਲੀ ਸਕ੍ਰੀਨ-ਸਕ੍ਰੇਪਿੰਗ ਦੇ ਰੱਖ-ਰਖਾਅ ਦੇ ਡਰ ਨੂੰ ਖਤਮ ਕਰਦੀ ਹੈ ਅਤੇ ਸੱਚੇ AI-native ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵੱਲ ਇੱਕ ਰਸਤਾ ਖੋਲ੍ਹਦੀ ਹੈ—ਬਸ਼ਰਤੇ ਟੀਮਾਂ ਪ੍ਰਯੋਗਸ਼ਾਲਾ Chrome ਵਾਤਾਵਰਣ ਵਿੱਚ ਕੰਮ ਕਰਨ ਲਈ ਸਹਿਮਤ ਹੋਣ।