अपने Next.js App में WebMCP कैसे जोड़ें

AI एजेंट अक्सर वेब ऐप्स को समझने में संघर्ष करते हैं। वे DOM को स्क्रैप करते हैं और अंदाज़ा लगाते हैं कि बटन क्या करते हैं। इससे त्रुटियाँ और मतिभ्रम (hallucinations) पैदा होते हैं।

WebMCP इसे हल करता है। यह एक W3C मानक है जो ब्राउज़रों में modelContext API जोड़ता है। अंदाज़ा लगाने के बजाय, आपका Next.js ऐप एजेंट को सटीक रूप से बताता है कि वह कौन से फंक्शन चला सकता है।

WebMCP बनाम Anthropic MCP

Anthropic MCP सर्वर पर चलता है। यह डेटाबेस या APIs से जुड़ने के लिए JSON-RPC का उपयोग करता है। यह ब्राउज़र के बाहर रहता है।

WebMCP ब्राउज़र टैब में चलता है। यह टूल्स को स्थानीय रूप से (locally) रजिस्टर करता है। यह उपयोगकर्ता के मौजूदा सत्र (session) का उपयोग करता है। इसके लिए किसी अतिरिक्त ऑथेंटिकेशन (auth) या बैकएंड की आवश्यकता नहीं होती है।

वे मिलकर काम करते हैं। आप बैकएंड कार्यों के लिए MCP और फ्रंटएंड इंटरैक्शन के लिए WebMCP का उपयोग कर सकते हैं।

टूल्स को एक्सपोज़ करने के दो तरीके:

  • HTML फॉर्म: अपने फॉर्म में toolname और tooldescription एट्रिब्यूट्स जोड़ें। एजेंट बिना किसी JavaScript के टूल और पैरामीटर्स को देख सकता है। इसका उपयोग सर्च और फिल्टर्स के लिए करें।

  • JavaScript: डायनेमिक लॉजिक के लिए navigator.modelContext API का उपयोग करें। यह मल्टी-स्टेप फ्लो के लिए सबसे अच्छा है।

Next.js में कार्यान्वयन (Implementation)

  1. ब्राउज़र सपोर्ट के लिए पॉलीफिल (polyfill) इंस्टॉल करें: npm install @mcp-b/global @mcp-b/react-webmcp

  2. अपने लेआउट में पॉलीफिल को इनिशियलाइज़ करने के लिए एक WebMCPProvider बनाएँ।

  3. अपने क्लाइंट कंपोनेंट्स में useWebMCP हुक का उपयोग करें। यह हुक टूल रजिस्ट्रेशन और क्लीनअप को स्वचालित रूप से संभालता है।

उदाहरण टूल सेटअप:

useWebMCP({
  name: 'searchProducts',
  description: 'Search the product catalog.',
  inputSchema: z.object({
    query: z.string(),
    category: z.string().optional(),
  }),
  execute: async ({ query, category }) => {
    const res = await fetch(`/api/products?q=${query}`);
    return res.json();
  },
});

सर्वोत्तम अभ्यास (Best Practices)

  • HTTPS का उपयोग करें। प्रोडक्शन में WebMCP के लिए सुरक्षित कनेक्शन की आवश्यकता होती है।
  • टूल्स की संख्या कम रखें। बहुत अधिक टूल्स AI कॉन्टेक्स्ट को बढ़ा देते हैं और रीजनिंग (reasoning) को धीमा कर देते हैं। प्रति पेज 50 टूल्स से कम रखें।
  • विस्तृत विवरण (rich descriptions) प्रदान करें। एजेंट यह समझने के लिए इन स्ट्रिंग्स पर भरोसा करते हैं कि टूल का उपयोग कब करना है।
  • सर्विस लेयर का उपयोग करें। टूल हैंडलर्स के अंदर React state पर निर्भर न रहें। पुराने डेटा (stale data) से बचने के लिए साधारण फंक्शन का उपयोग करें।

टेस्टिंग

Chrome 146 या नया वर्शन खोलें। chrome://flags में WebMCP फ्लैग को इनेबल करें। AI एजेंट के बिना अपने टूल्स का परीक्षण करने के लिए Model Context Tool Inspector एक्सटेंशन का उपयोग करें।

WebMCP एजेंटिक वेब ब्राउज़िंग का भविष्य है। इसे अभी से लागू करना शुरू करें ताकि जब ब्राउज़र इसे डिफ़ॉल्ट रूप से इनेबल करें, तो आप तैयार रहें।

स्रोत: https://dev.to/webtoolshub/how-to-add-webmcp-to-your-nextjs-app-complete-2026-guide-pbp