WebMCP React એપ્સને AI એજન્ટ્સ માટે સીધા જ સ્ટ્રક્ચર્ડ ટૂલ APIs એક્સપોઝ કરવાની મંજૂરી આપે છે, જે અસ્થિર UI-સ્ક્રેપિંગને બદલે વિશ્વસનીય, UI-સ્વતંત્ર કોલ્સ દ્વારા કામ કરે છે. આ ફીચર Chrome 149 અને તેનાથી ઉપરના વર્ઝનમાં origin-trial માં ઉપલબ્ધ છે, અને તમે તેને chrome://flags/#enable-webmcp-testing દ્વારા ચાલુ કરી શકો છો.
એજન્ટ્સને ક્લિક કરવાનું શીખવવામાં રહેલી સમસ્યા
AI એજન્ટ્સને વેબ પેજ સાથે ઇન્ટરેક્ટ કરવા દેવાના મોટાભાગના વર્તમાન પ્રયાસો વિઝ્યુઅલ ક્યુઝ (visual cues) પર આધારિત છે. એક એજન્ટ DOM ને પાર્સ કરે છે, કયો એલિમેન્ટ બટન છે તેનો અંદાજ લગાવે છે, ક્લિક્સ, સ્ક્રોલ અને ફોર્મ ફીલ્ડ્સ ભરે છે. જે ક્ષણે બટન ખસે છે, લેબલ બદલાય છે અથવા લેઆઉટમાં ફેરફાર થાય છે, તે સ્ક્રિપ્ટ નિષ્ફળ જાય છે. આ અભિગમ ધીમો છે કારણ કે તે બ્રાઉઝર દ્વારા દરેક સ્ટેપ રેન્ડર થવાની રાહ જુએ છે, અને રૂટિન રિડિઝાઇન આખી ઓટોમેશન પાઇપલાઇનને તોડી શકે છે.
WebMCP મોડેલને બદલી નાખે છે
WebMCP એ Google Chrome દ્વારા રજૂ કરવામાં આવેલ એક નવો વેબ સ્ટાન્ડર્ડ છે. એજન્ટ માટે એક્સપ્લોર કરવા માટે વિઝ્યુઅલ સરફેસ એક્સપોઝ કરવાને બદલે, એક પેજ tools નો સેટ જાહેરાત કરે છે—જે પેજ કરી શકે તેવા નામિત અને ટાઇપ્ડ ઓપરેશન્સ. એક AI એજન્ટ પહેલા પૂછે છે કે “કયા ટૂલ્સ ઉપલબ્ધ છે?”; પેજ “searchProducts” અથવા “checkout” જેવી યાદી સાથે જવાબ આપે છે. ત્યારબાદ એજન્ટ ટૂલના જાહેર કરેલા ઇનપુટ સ્કીમા સાથે મેળ ખાતા JSON પેલોડ મોકલીને ટૂલને ઇનવોક કરે છે, દા.ત. searchProducts(query: "jacket"). બ્રાઉઝર આ વિનંતીને સીધી પેજના JavaScript પર રૂટ કરે છે, જે કોઈપણ UI સામેલગીરી વગર અન્ડરલાઇંગ લોજિક ચલાવે છે.
પરિણામ એવું ઇન્ટરેક્શન છે જે ત્વરિત છે, CSS ફેરફારોને ધ્યાનમાં લીધા વિના કામ કરે છે, અને જ્યાં સુધી ટૂલની વ્યાખ્યાઓ સ્થિર રહે છે ત્યાં સુધી કાર્યરત રહે છે.
ડેવલપર્સ માટે મહત્વના ફાયદા
- ઝડપ – કોમ્યુનિકેશન બ્રાઉઝરના મેસેજિંગ સિસ્ટમની અંદર રહે છે, જે ક્લિક્સ રેન્ડર કરવા અને પેજ અપડેટ્સની રાહ જોવાની પ્રક્રિયાને દૂર કરે છે.
- વિશ્વસનીયતા – ટૂલ્સ એ જ ફંક્શન્સને કોલ કરે છે જે સાઇટ તેના પોતાના UI માટે પહેલેથી જ વાપરે છે, તેથી રિડિઝાઇન કરવાથી API તૂટતું નથી.
- કંટ્રોલ – કયા ઓપરેશન્સ એક્સપોઝ કરવાના છે, તેઓ કયા પેરામીટર્સ સ્વીકારે છે, અને એજન્ટ રિસ્પોન્સમાં શું જોઈ શકે છે તે ડેવલપર્સ નક્કી કરે છે.
- UI સ્વતંત્રતા – સ્ટાઇલિંગ, લેઆઉટ અથવા કમ્પોનન્ટ રિફેક્ટરિંગ હવે એજન્ટની ફીચર ઇનવોક કરવાની ક્ષમતાને અસર કરતું નથી.
WebMCP સર્વર સાઇડ પર વપરાતા હાલના MCP (Message-Channel-Protocol) ને રિપ્લેસ કરતું નથી. MCP હેવી ડેટા ફેચિંગ અને બેકએન્ડ ઓર્કેસ્ટ્રેશન સંભાળવાનું ચાલુ રાખશે, જ્યારે WebMCP લાઈવ, ઇન-ટેબ ઇન્ટરેક્શન સંભાળશે.
React ડેવલપર્સ કેવી રીતે શરૂઆત કરી શકે છે
React કોડ ઇમ્પરેટિવ JavaScript API અથવા ડિકલેરેટિવ HTML ફોર્મ-આધારિત API નો ઉપયોગ કરીને ટૂલ્સ રજિસ્ટર કરી શકે છે. એક સામાન્ય પેટર્ન રજિસ્ટ્રેશનને કસ્ટમ હૂક (custom hook) માં રેપ કરવાની છે:
- ટૂલનું નામ અને ટૂંકી વિગતો સાથે રજિસ્ટ્રેશન ફંક્શનને કોલ કરો.
- ઇનપુટ સ્કીમા સપ્લાય કરો (દાખલા તરીકે, જરૂરી ફીલ્ડ્સનું વર્ણન કરતી JSON સ્કીમા).
- એક
executeકોલબેક આપો જે હાલનું બિઝનેસ લોજિક ચલાવે—જે ઘણીવાર એ જ ફંક્શન હોય છે જે બટન ક્લિક દ્વારા ટ્રિગર થાય છે.
જ્યારે હૂક ચાલે છે, ત્યારે બ્રાઉઝર પેજના WebMCP મેનિફેસ્ટમાં ટૂલ ઉમેરે છે. મેનિફેસ્ટને શોધતો AI એજન્ટ પછી ક્યારેય DOM ને અડ્યા વગર ટૂલને ઇનવોક કરી શકે છે.
રજિસ્ટ્રેશન કમ્પોનન્ટ માઉન્ટ સમયે થતું હોવાથી, ટૂલ્સને ચોક્કસ રૂટ્સ અથવા ફીચર ફ્લેગ્સ સુધી મર્યાદિત કરી શકાય છે, જે ટીમોને પ્રોડક્શન વિરુદ્ધ ટેસ્ટ એન્વાયરમેન્ટમાં AI શું કરી શકે તેના પર ગ્રેન્યુલર કંટ્રોલ આપે છે.
સાવચેતીઓ અને શું ધ્યાન રાખવું
WebMCP હજુ પણ ઓરિજિન ટ્રાયલ છે. તે ફક્ત Chrome 149+ માં કામ કરે છે અને ફ્લેગ દ્વારા મેન્યુઅલી ઇનેબલ કરવું આવશ્યક છે.
આગળ શું આવશે
Google એ AI-નેટિવ વેબ અનુભવો સાથે પ્રયોગ કરવા માંગતા ડેવલપર્સ માટે આ ટ્રાયલ ખોલી છે. રસ ધરાવતા કોઈપણ માટે આગળના પગલાં આ છે:
- Chrome માં ફ્લેગ ઇનેબલ કરો અને ટાર્ગેટ સાઇટને રીલોડ કરો.
- React કમ્પોનન્ટમાં એક સાદું ટૂલ રજિસ્ટ્રેશન ઉમેરો અને બ્રાઉઝરના devtools માં મેનિફેસ્ટ દેખાય છે તે જુઓ.
- ટૂલને કોલ કરવા અને રિસ્પોન્સ વેરિફાય કરવા માટે AI ક્લાયન્ટ (દાખલા તરીકે, WebMCP પ્રોટોકોલને અનુસરતી લોકલ સ્ક્રિપ્ટ) ટેસ્ટ કરો.
- સ્ટેબલ શિપિંગ પર અપડેટ્સ માટે ટ્રાયલના સ્ટેટસ પેજ પર નજર રાખો.
મુખ્ય વાત: WebMCP React ડેવલપર્સને તેમની એપ્સને AI એજન્ટ્સ દ્વારા સીધી રીતે કોલ કરી શકાય તેવી બનાવવાની રીત આપે છે, જે UI એલિમેન્ટ્સને સ્થિર, ટાઇપ્ડ સર્વિસિસમાં ફેરવે છે. આ ફેરફાર સ્ક્રીન-સ્ક્રેપિંગના મેન્ટેનન્સના кошાળને દૂર કરે છે અને ખરા અર્થમાં AI-નેટિવ વેબ એપ્લિકેશન્સ તરફનો માર્ગ ખોલે છે—જો ટીમો પ્રાયોગિક Chrome એન્વાયરમેન્ટમાં કામ કરવા માટે તૈયાર હોય.