੨੦ 𝗠𝗖𝗣 𝗔𝗽𝗽𝘀 ਨੂੰ ੨ ਦਿਨਾਂ ਵਿੱਚ ਬਣਾਉਣ ਤੋਂ ਮਿਲੇ ਸਬਕ

ਮੇਰੀ ਟੀਮ ਨੇ ਦੋ ਦਿਨਾਂ ਵਿੱਚ 20 MCP Apps ਬਣਾਏ। ਇਸ ਨਾਲ ਮੈਨੂੰ ਇਹ ਸਪੱਸ਼ਟ ਦ੍ਰਿਸ਼ਟੀ ਮਿਲੀ ਕਿ ਇਹ ਟੂਲ ਕੀ ਕਰਦੇ ਹਨ ਅਤੇ ਉਹ ਕਿੱਥੇ ਅਸਫਲ ਹੁੰਦੇ ਹਨ।

MCP Apps, MCP spec ਲਈ ਪਹਿਲਾ ਅਧਿਕਾਰਤ ਐਕਸਟੈਂਸ਼ਨ ਹਨ। ਇਹ ਇੱਕ ਟੂਲ ਨੂੰ ਉਸਦੇ ਨਤੀਜੇ ਦੇ ਨਾਲ ਇੱਕ UI ਰਿਸੋਰਸ ਵਾਪਸ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ। ਹੋਸਟ ਇਸ UI ਨੂੰ ਇੱਕ sandboxed iframe ਵਿੱਚ ਰੈਂਡਰ ਕਰਦਾ ਹੈ। ਤੁਸੀਂ ਚੈਟ ਵਿੱਚ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਟੇਬਲ, ਚਾਰਟ ਅਤੇ ਫਾਰਮ ਦਿਖਾ ਸਕਦੇ ਹੋ।

ਵਿਜ਼ੂਅਲ ਜਾਣਕਾਰੀ ਅਕਸਰ ਟੈਕਸਟ ਨਾਲੋਂ ਬਿਹਤਰ ਹੁੰਦੀ ਹੈ। ਇੱਕ ਚਾਰਟ CSV ਫਾਈਲ ਨਾਲੋਂ ਬਿਹਤਰ ਹੈ। ਟੈਕਸਟ ਦੇ ਇੱਕ ਵੱਡੇ ਪੈਰੇ ਨਾਲੋਂ pull requests ਦੀ ਸੂਚੀ ਪੜ੍ਹਨੀ ਆਸਾਨ ਹੁੰਦੀ ਹੈ।

ਇੱਥੇ ਉਹ ਸਬਕ ਹਨ ਜੋ ਅਸੀਂ ਸਿੱਖੇ:

• Apps ਸਰਵਰ ਦੇ ਅੰਦਰ ਹੁੰਦੀਆਂ ਹਨ ਇੱਕ MCP App ਕੋਈ ਹੋਸਟਡ (hosted) URL ਨਹੀਂ ਹੈ। ਇਸਨੂੰ MCP ਰਾਹੀਂ ਲਿਆਂਦਾ ਜਾਂਦਾ ਹੈ, HTTP ਰਾਹੀਂ ਨਹੀਂ। UI ਕੋਡ ਤੁਹਾਡੇ MCP ਸਰਵਰ ਦੇ ਨਾਲ ਹੀ ਆਉਂਦਾ ਹੈ।

• React ਅਤੇ Vite ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਸੀਂ ਆਪਣੇ ਮੌਜੂਦਾ design system ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ React ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਅਸੀਂ /ui ਫੋਲਡਰ ਵਿੱਚ ਇੱਕ Vite ਪ੍ਰੋਜੈਕਟ ਸੈੱਟ ਕੀਤਾ। ਇਹ ਬਿਲਡ ਦੌਰਾਨ ਹਰ TSX ਫਾਈਲ ਲਈ ਇੱਕ HTML ਫਾਈਲ ਆਊਟਪੁੱਟ ਕਰਦਾ ਹੈ।

• ਟੈਕਸਟ ਅਜੇ ਵੀ ਮੁੱਖ ਸਮਝੌਤਾ (primary contract) ਹੈ ਜੇਕਰ ਕੋਈ ਹੋਸਟ MCP Apps ਨੂੰ ਸਪੋਰਟ ਨਹੀਂ ਕਰਦਾ ਹੈ, ਤਾਂ ਉਹ UI property ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰ ਦਿੰਦਾ ਹੈ। ਯੂਜ਼ਰ ਨੂੰ ਸਿਰਫ਼ ਟੈਕਸਟ ਰਿਸਪਾਂਸ ਹੀ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। ਕਦੇ ਵੀ ਆਪਣਾ ਇਕਲੌਤਾ ਜਵਾਬ ਸਿਰਫ਼ UI ਵਿੱਚ ਨਾ ਰੱਖੋ। ਜੇਕਰ ਤੁਸੀਂ ਅਜਿਹਾ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਡਾ ਟੂਲ terminal clients ਵਾਲੇ ਯੂਜ਼ਰਾਂ ਲਈ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ। ਹਮੇਸ਼ਾ ਇਸ ਤਰ੍ਹਾਂ ਡਿਜ਼ਾਈਨ ਕਰੋ ਜਿਵੇਂ ਕਿ ਤੁਹਾਡੇ ਅੱਧੇ ਯੂਜ਼ਰ ਸਿਰਫ਼ ਟੈਕਸਟ ਹੀ ਦੇਖਣਗੇ।

• ਅਸਮਾਨਤਾ ਵਾਲੇ ਲੇਆਉਟ (layouts) ਦੀ ਉਮੀਦ ਰੱਖੋ ਹਰ ਹੋਸਟ spec ਨੂੰ ਵੱਖਰੇ ਤਰੀਕੇ ਨਾਲ ਲਾਗੂ ਕਰਦਾ ਹੈ। ChatGPT ਚੌੜੇ ਰੂਪ ਵਿੱਚ ਰੈਂਡਰ ਕਰਦਾ ਹੈ। Claude ਤੰਗ (narrow) ਰੂਪ ਵਿੱਚ ਰੈਂਡਰ ਕਰਦਾ ਹੈ। ਮੋਬਾਈਲ ਫ਼ੋਨਾਂ 'ਤੇ ਇਹ ਕੁਝ ਹੋਰ ਹੀ ਹੁੰਦਾ ਹੈ। ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਅਜਿਹੇ ਲੇਆਉਟ ਡਿਜ਼ਾਈਨ ਕਰੋ ਜੋ ਤੰਗ ਚੌੜਾਈ 'ਤੇ ਆਪਣੇ ਆਪ ਅਨੁਕੂਲ (reflow) ਹੋ ਸਕਣ।

• ਡੈਵ ਲੂਪ (dev loop) ਹੌਲੀ ਹੈ ਅਜੇ ਤੱਕ ਕੋਈ ਸਟੈਂਡਰਡ ਟੈਸਟਿੰਗ ਟੂਲ ਨਹੀਂ ਹੈ। ਤੁਹਾਨੂੰ ਹਰ ਕਲਾਇੰਟ ਵਿੱਚ ਇਸਨੂੰ ਮੈਨੂਅਲੀ ਬਣਾਉਣਾ, ਇੰਸਟਾਲ ਕਰਨਾ ਅਤੇ ਚੈੱਕ ਕਰਨਾ ਪੈਂਦਾ ਹੈ। ਇਹ ਸਟੈਂਡਰਡ ਫਰੰਟਐਂਡ ਕੰਮ ਦੇ ਮੁਕਾਬਲੇ ਹੌਲੀ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ।

• ਐਪ ਵਿੱਚ secrets ਇਕੱਠੇ ਨਾ ਕਰੋ ਐਪਸ ਇੱਕ sandboxed iframe ਵਿੱਚ ਚੱਲਦੀਆਂ ਹਨ। ਹੋਸਟ ਸਮੱਗਰੀ (content) ਨੂੰ ਦੇਖ ਸਕਦਾ ਹੈ। ਫਾਰਮ ਫੀਲਡਾਂ ਵਿੱਚ ਕਦੇ ਵੀ API keys ਜਾਂ OAuth tokens ਨਾ ਪਾਓ। ਜੇਕਰ ਤੁਹਾਨੂੰ ਸੰਵੇਦਨਸ਼ੀਲ (sensitive) ਡੇਟਾ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਇੱਕ ਵੱਖਰਾ ਸੁਰੱਖਿਅਤ ਫਾਰਮ ਵਰਤੋ।

ਜੇਕਰ ਤੁਸੀਂ ਹੁਣੇ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ:

  • ਆਪਣੀ UI ਨੂੰ ਆਪਣੇ ਸਰਵਰ ਦੇ ਅੰਦਰ ਬੰਡਲ (bundle) ਕਰੋ।
  • ਮਲਟੀ-ਪੇਜ Vite ਸੈੱਟਅੱਪ ਦੀ ਵਰਤੋਂ ਕਰੋ।
  • ਆਪਣੇ ਮੌਜੂਦਾ design system ਨੂੰ ਸਿੱਧਾ ਇੰਪੋਰਟ ਕਰੋ।

MCP Apps ਅਜੇ ਸ਼ੁਰੂਆਤੀ ਪੜਾਅ 'ਤੇ ਹਨ ਅਤੇ spec ਬਦਲ ਰਿਹਾ ਹੈ। ਟੂਲਿੰਗ (tooling) ਸੀਮਤ ਹੈ, ਪਰ ਇਹਨਾਂ ਨੂੰ ਲਾਂਚ ਕਰਨਾ ਫਾਇਦੇਮੰਦ ਹੈ।

Source: https://dev.to/arcade/lessons-from-building-20-mcp-apps-in-2-days-1f98

Optional learning community: https://t.me/GyaanSetuAi