२ दिवसांत २० MCP Apps तयार करण्यापासून मिळालेले धडे

माझ्या टीमने दोन दिवसांत २० 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 सर्व्हरसोबतच येतो.

• React आणि Vite वापरा आमची सध्याची design system वापरण्यासाठी आम्ही React चा वापर केला. आम्ही /ui फोल्डरमध्ये एक Vite प्रोजेक्ट सेट केला. बिल्ड दरम्यान तो प्रत्येक TSX फाईलसाठी एक HTML फाईल तयार करतो.

• मजकूर (Text) अजूनही मुख्य आधार आहे जर एखादा host MCP Apps ला सपोर्ट करत नसेल, तर तो UI property दुर्लक्षित करतो. वापरकर्त्याला फक्त मजकूर स्वरूपातील प्रतिसाद दिसतो. तुमचे एकमेव उत्तर फक्त UI मध्ये ठेवू नका. तसे केल्यास, टर्मिनल क्लायंट वापरणाऱ्या वापरकर्त्यांसाठी तुमचे टूल काम करणार नाही. नेहमी असे डिझाइन करा की जणू तुमच्या अर्ध्या वापरकर्त्यांना फक्त मजकूरच दिसणार आहे.

• लेआउट्समध्ये तफावत असू शकते याची अपेक्षा ठेवा प्रत्येक host spec ची अंमलबजावणी वेगवेगळ्या पद्धतीने करते. ChatGPT मध्ये लेआउट रुंद (wide) दिसतो, तर Claude मध्ये अरुंद (narrow) दिसतो. मोबाईलवर ते अजून वेगळे दिसते. सुरुवातीपासूनच असे लेआउट्स डिझाइन करा जे अरुंद रुंदीमध्येही व्यवस्थित जुळवून घेतील (reflow होतील).

• डेव्हलपमेंट लूप (dev loop) संथ आहे अद्याप कोणतेही स्टँडर्ड टेस्टिंग टूल उपलब्ध नाही. तुम्हाला प्रत्येक क्लायंटमध्ये ते मॅन्युअली बिल्ड, इन्स्टॉल आणि तपासावे लागते. स्टँडर्ड फ्रंटएंड कामाच्या तुलनेत हे संथ वाटते.

• ॲपमध्ये सिक्रेट्स (secrets) गोळा करू नका Apps एका sandboxed iframe मध्ये चालतात. Host ला त्यातील मजकूर दिसू शकतो. फॉर्म फील्ड्समध्ये कधीही API keys किंवा OAuth tokens टाकू नका. तुम्हाला संवेदनशील डेटाची गरज असल्यास वेगळा सुरक्षित फॉर्म वापरा.

जर तुम्ही आता सुरुवात करत असाल तर:

  • तुमचा UI तुमच्या सर्व्हरमध्येच बंडल करा.
  • multi-page Vite सेटअप वापरा.
  • तुमची सध्याची design system थेट इम्पोर्ट करा.

MCP Apps अजून सुरुवातीच्या टप्प्यात आहेत आणि spec मध्ये सतत बदल होत आहेत. टूल्सची उपलब्धता कमी असली तरी, ते वापरण्यासारखे (shipping) आहेत.

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

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