ਆਪਣੇ Next.js App ਵਿੱਚ WebMCP ਕਿਵੇਂ ਜੋੜਿਆ ਜਾਵੇ

AI agents ਅਕਸਰ ਵੈੱਬ ਐਪਸ ਨੂੰ ਸਮਝਣ ਵਿੱਚ ਮੁਸ਼ਕਲ ਮਹਿਸੂਸ ਕਰਦੇ ਹਨ। ਉਹ DOM ਨੂੰ ਸਕ੍ਰੈਪ ਕਰਦੇ ਹਨ ਅਤੇ ਅੰਦਾਜ਼ਾ ਲਗਾਉਂਦੇ ਹਨ ਕਿ ਬਟਨ ਕੀ ਕਰਦੇ ਹਨ। ਇਸ ਨਾਲ ਗਲਤੀਆਂ ਅਤੇ hallucinations ਹੁੰਦੀਆਂ ਹਨ।

WebMCP ਇਸ ਸਮੱਸਿਆ ਦਾ ਹੱਲ ਕਰਦਾ ਹੈ। ਇਹ ਇੱਕ W3C ਸਟੈਂਡਰਡ ਹੈ ਜੋ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ modelContext API ਜੋੜਦਾ ਹੈ। ਅੰਦਾਜ਼ਾ ਲਗਾਉਣ ਦੀ ਬਜਾਏ, ਤੁਹਾਡਾ Next.js ਐਪ ਏਜੰਟ ਨੂੰ ਸਹੀ ਤਰ੍ਹਾਂ ਦੱਸਦਾ ਹੈ ਕਿ ਉਹ ਕਿਹੜੇ ਫੰਕਸ਼ਨ ਚਲਾ ਸਕਦਾ ਹੈ।

WebMCP ਬਨਾਮ Anthropic MCP

Anthropic MCP ਸਰਵਰ 'ਤੇ ਚੱਲਦਾ ਹੈ। ਇਹ ਡੇਟਾਬੇਸ ਜਾਂ APIs ਨਾਲ ਜੁੜਨ ਲਈ JSON-RPC ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਤੋਂ ਬਾਹਰ ਰਹਿੰਦਾ ਹੈ।

WebMCP ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ ਵਿੱਚ ਚੱਲਦਾ ਹੈ। ਇਹ ਟੂਲਸ ਨੂੰ ਸਥਾਨਕ (locally) ਤੌਰ 'ਤੇ ਰਜਿਸਟਰ ਕਰਦਾ ਹੈ। ਇਹ ਉਪਭੋਗਤਾ ਦੇ ਮੌਜੂਦਾ ਸੈਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਕਿਸੇ ਵਾਧੂ auth ਜਾਂ ਬੈਕਐਂਡ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।

ਇਹ ਇਕੱਠੇ ਕੰਮ ਕਰਦੇ ਹਨ। ਤੁਸੀਂ ਬੈਕਐਂਡ ਕੰਮਾਂ ਲਈ MCP ਅਤੇ ਫਰੰਟਐਂਡ ਇੰਟਰੈਕਸ਼ਨਾਂ ਲਈ WebMCP ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।

ਟੂਲਸ ਨੂੰ ਐਕਸਪੋਜ਼ ਕਰਨ ਦੇ ਦੋ ਤਰੀਕੇ:

  • HTML Forms: ਆਪਣੇ ਫਾਰਮਾਂ ਵਿੱਚ toolname ਅਤੇ tooldescription ਐਟਰੀਬਿਊਟਸ ਜੋੜੋ। ਏਜੰਟ ਬਿਨਾਂ ਕਿਸੇ JavaScript ਦੇ ਟੂਲ ਅਤੇ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਦੇਖ ਸਕਦਾ ਹੈ। ਇਸਦੀ ਵਰਤੋਂ ਸਰਚ ਅਤੇ ਫਿਲਟਰਾਂ ਲਈ ਕਰੋ।

  • JavaScript: ਡਾਇਨਾਮਿਕ ਲੌਜਿਕ ਲਈ navigator.modelContext API ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਮਲਟੀ-ਸਟੈਪ ਫਲੋਜ਼ (multi-step flows) ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਹੈ।

Next.js ਵਿੱਚ ਇੰਪਲੀਮੈਂਟੇਸ਼ਨ

  1. ਬ੍ਰਾਊਜ਼ਰ ਸਪੋਰਟ ਲਈ polyfill ਇੰਸਟਾਲ ਕਰੋ: npm install @mcp-b/global @mcp-b/react-webmcp

  2. ਆਪਣੇ layout ਵਿੱਚ polyfill ਨੂੰ ਇਨੀਸ਼ੀਅਲਾਈਜ਼ ਕਰਨ ਲਈ ਇੱਕ WebMCPProvider ਬਣਾਓ।

  3. ਆਪਣੇ client components ਵਿੱਚ useWebMCP hook ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ hook ਟੂਲ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਅਤੇ cleanup ਨੂੰ ਆਪਣੇ ਆਪ ਸੰਭਾਲਦਾ ਹੈ।

Example tool setup:

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 context ਨੂੰ ਵਧਾ ਦਿੰਦੇ ਹਨ ਅਤੇ reasoning ਨੂੰ ਹੌਲੀ ਕਰ ਦਿੰਦੇ ਹਨ। ਪ੍ਰਤੀ ਪੇਜ 50 ਟੂਲਸ ਤੋਂ ਘੱਟ ਰੱਖੋ।
  • ਵਿਸਤ੍ਰਿਤ ਵੇਰਵੇ ਪ੍ਰਦਾਨ ਕਰੋ। ਏਜੰਟ ਇਹ ਸਮਝਣ ਲਈ ਕਿ ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਦੋਂ ਕਰਨੀ ਹੈ, ਇਹਨਾਂ ਸਟ੍ਰਿੰਗਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ।
  • ਸਰਵਿਸ ਲੇਅਰ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਟੂਲ ਹੈਂਡਲਰਾਂ ਦੇ ਅੰਦਰ 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