𝗟𝗲𝘀𝘀𝗼𝗻𝘀 𝗳𝗿𝗼𝗺 𝗯𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝟮𝟬 𝗠𝗖𝗣 𝗔𝗽𝗽𝘀 𝗶𝗻 𝟮 𝗱𝗮𝘆𝘀
میری ٹیم نے دو دنوں میں 20 MCP Apps بنائیں۔ اس سے مجھے اس بات کا واضح اندازہ ہوا کہ یہ ٹولز کیا کرتے ہیں اور کہاں ناکام ہو جاتے ہیں۔
MCP Apps، MCP spec کی پہلی باضابطہ extension ہیں۔ یہ کسی ٹول کو اس کے نتیجے کے ساتھ ایک UI resource واپس کرنے کی اجازت دیتے ہیں۔ Host اس UI کو ایک sandboxed iframe میں رینڈر کرتا ہے۔ آپ براہ راست چیٹ میں ٹیبلز، چارٹس اور فارمز دکھا سکتے ہیں۔
بصری معلومات (visual information) اکثر متن (text) سے بہتر ہوتی ہے۔ ایک چارٹ CSV فائل سے بہتر ہے۔ ٹیکسٹ کے ایک ڈھیر کے مقابلے میں pull requests کی فہرست پڑھنا زیادہ آسان ہے۔
یہاں وہ اسباق ہیں جو ہم نے سیکھے:
• Apps سرور کے اندر ہوتی ہیں ایک MCP App کوئی hosted URL نہیں ہے۔ اسے MCP کے ذریعے حاصل کیا جاتا ہے، HTTP کے ذریعے نہیں۔ UI کوڈ آپ کے MCP server کے ساتھ ہی بھیجا جاتا ہے۔
• React اور Vite کا استعمال کریں ہم نے اپنے موجودہ design system کو استعمال کرنے کے لیے React کا استعمال کیا۔ ہم نے /ui فولڈر میں ایک Vite project سیٹ اپ کیا۔ یہ build کے دوران ہر TSX فائل کے لیے ایک HTML فائل تیار کرتا ہے۔
• متن (Text) اب بھی بنیادی معاہدہ ہے اگر کوئی host MCP Apps کو سپورٹ نہیں کرتا، تو وہ UI property کو نظر انداز کر دیتا ہے۔ صارف کو صرف ٹیکسٹ ریسپانس نظر آتا ہے۔ اپنا واحد جواب کبھی بھی صرف UI میں نہ رکھیں۔ اگر آپ ایسا کرتے ہیں، تو ٹرمینل کلائنٹس استعمال کرنے والے صارفین کے لیے آپ کا ٹول کام نہیں کرے گا۔ ہمیشہ اس طرح ڈیزائن کریں جیسے آپ کے آدھے صارفین کو صرف ٹیکسٹ ہی نظر آئے گا۔
• غیر مستقل لے آؤٹس (layouts) کی توقع رکھیں ہر host spec کو مختلف طریقے سے نافذ کرتا ہے۔ ChatGPT اسے چوڑا (wide) رینڈر کرتا ہے۔ Claude اسے تنگ (narrow) رینڈر کرتا ہے۔ موبائل کے لیے یہ کچھ اور ہی ہوتا ہے۔ شروع سے ہی ایسے لے آؤٹس ڈیزائن کریں جو تنگ چوڑائی پر خود کو ایڈجسٹ (reflow) کر سکیں۔
• ڈویلپمنٹ لوپ (dev loop) سست ہے ابھی تک کوئی معیاری ٹیسٹنگ ٹول موجود نہیں ہے۔ آپ کو ہر کلائنٹ میں اسے دستی طور پر (manually) بلڈ، انسٹال اور چیک کرنا پڑتا ہے۔ یہ عام فرنٹ اینڈ کام کے مقابلے میں سست محسوس ہوتا ہے۔
• ایپ میں خفیہ معلومات (secrets) جمع نہ کریں Apps ایک sandboxed iframe میں چلتی ہیں۔ Host مواد کو دیکھ سکتا ہے۔ فارم فیلڈز میں کبھی بھی API keys یا OAuth tokens نہ ڈالیں۔ اگر آپ کو حساس ڈیٹا کی ضرورت ہو تو ایک الگ محفوظ فارم استعمال کریں۔
اگر آپ ابھی شروع کرتے ہیں:
- اپنی UI کو اپنے سرور کے اندر بنڈل کریں۔
- multi-page Vite سیٹ اپ استعمال کریں۔
- اپنے موجودہ design system کو براہ راست امپورٹ کریں۔
MCP Apps ابھی ابتدائی مرحلے میں ہیں اور spec تبدیل ہو رہی ہے۔ ٹولنگ ابھی محدود ہے، لیکن یہ لانچ کرنے کے قابل ہیں۔
ماخذ: https://dev.to/arcade/lessons-from-building-20-mcp-apps-in-2-days-1f98
اختیاری لرننگ کمیونٹی: https://t.me/GyaanSetuAi