𝗟𝗲𝘀𝘀𝗼𝗻𝘀 𝗳𝗿𝗼𝗺 𝗯𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝟮𝟬 𝗠𝗖𝗣 𝗔𝗽𝗽𝘀 𝗶𝗻 𝟮 𝗱𝗮𝘆𝘀

मेरी टीम ने दो दिनों में 20 MCP Apps बनाए। इससे मुझे यह स्पष्ट रूप से समझ आया कि ये टूल्स क्या करते हैं और कहाँ विफल होते हैं।

MCP Apps, MCP spec का पहला आधिकारिक extension हैं। ये किसी टूल को उसके परिणाम के साथ एक UI resource वापस करने की अनुमति देते हैं। Host इस UI को एक sandboxed iframe में रेंडर करता है। आप चैट में सीधे tables, charts और forms दिखा सकते हैं।

विजुअल जानकारी अक्सर टेक्स्ट से बेहतर होती है। एक chart, CSV file से कहीं बेहतर है। टेक्स्ट के ढेर की तुलना में pull requests की लिस्ट पढ़ना आसान होता है।

यहाँ वे सबक दिए गए हैं जो हमने सीखे:

• Apps सर्वर के अंदर रहती हैं एक MCP App कोई hosted URL नहीं है। इसे MCP के माध्यम से प्राप्त किया जाता है, HTTP के माध्यम से नहीं। UI कोड आपके MCP server के साथ ही आता है।

• React और Vite का उपयोग करें हमने अपने मौजूदा design system का उपयोग करने के लिए React का इस्तेमाल किया। हमने /ui फोल्डर में एक Vite project सेटअप किया। यह build के दौरान हर TSX file के लिए एक HTML file आउटपुट करता है।

• टेक्स्ट अभी भी प्राथमिक अनुबंध (primary contract) है यदि कोई host MCP Apps को सपोर्ट नहीं करता है, तो वह UI property को अनदेखा कर देता है। यूजर को केवल टेक्स्ट रिस्पॉन्स ही दिखाई देता है। अपना एकमात्र उत्तर कभी भी केवल UI में न रखें। यदि आप ऐसा करते हैं, तो टर्मिनल क्लाइंट्स का उपयोग करने वाले यूजर्स के लिए आपका टूल काम नहीं करेगा। हमेशा इस तरह से डिज़ाइन करें जैसे कि आपके आधे यूजर्स को केवल टेक्स्ट ही दिखाई देगा।

• असंगत लेआउट (inconsistent layouts) की अपेक्षा रखें हर host spec को अलग तरह से लागू करता है। ChatGPT इसे चौड़ा (wide) रेंडर करता है। Claude इसे संकरा (narrow) रेंडर करता है। मोबाइल पर यह फिर से अलग होता है। शुरुआत से ही ऐसे लेआउट डिज़ाइन करें जो कम चौड़ाई (narrow widths) पर भी सही ढंग से एडजस्ट (reflow) हो सकें।

• Dev loop धीमा है अभी तक कोई मानक टेस्टिंग टूल उपलब्ध नहीं है। आपको हर क्लाइंट में इसे मैन्युअल रूप से build, install और चेक करना होगा। मानक frontend काम की तुलना में यह धीमा महसूस होता है।

• ऐप में secrets इकट्ठा न करें Apps एक sandboxed iframe में चलती हैं। Host कंटेंट देख सकता है। फॉर्म फील्ड्स में कभी भी API keys या OAuth tokens न डालें। यदि आपको संवेदनशील डेटा की आवश्यकता है, तो एक अलग सुरक्षित फॉर्म का उपयोग करें।

यदि आप अभी शुरुआत करते हैं:

  • अपने UI को अपने सर्वर के अंदर बंडल करें।
  • Multi-page Vite सेटअप का उपयोग करें।
  • अपने मौजूदा design system को सीधे इम्पोर्ट करें।

MCP Apps अभी शुरुआती दौर में हैं और spec बदल रहा है। टूलिंग अभी सीमित है, लेकिन इन्हें शिप करना सार्थक है।

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

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