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

મારી ટીમે બે દિવસમાં ૨૦ MCP Apps બનાવ્યા. આનાથી મને આ ટૂલ્સ શું કરે છે અને ક્યાં નિષ્ફળ જાય છે તેનો સ્પષ્ટ ખ્યાલ મળ્યો.

MCP Apps એ MCP spec માટેનું પ્રથમ સત્તાવાર extension છે. તે કોઈ ટૂલને તેના પરિણામ સાથે UI resource રિટર્ન કરવાની મંજૂરી આપે છે. host આ UI ને sandboxed iframe માં રેન્ડર કરે છે. તમે ચેટમાં સીધા જ ટેબલ, ચાર્ટ્સ અને ફોર્મ્સ બતાવી શકો છો.

વિઝ્યુઅલ માહિતી ઘણીવાર ટેક્સ્ટ કરતા વધુ સારી હોય છે. એક ચાર્ટ CSV ફાઇલ કરતા વધુ અસરકારક છે. ટેક્સ્ટના મોટા પહાડ કરતા pull requests ની યાદી વાંચવી વધુ સરળ છે.

અહીં અમે શીખેલા પાઠ છે:

• Apps સર્વરની અંદર રહે છે MCP App એ hosted URL નથી. તે MCP દ્વારા મેળવવામાં આવે છે, HTTP દ્વારા નહીં. UI કોડ તમારા MCP server સાથે જ આવે છે.

• React અને Vite નો ઉપયોગ કરો અમે અમારા હાલના design system નો ઉપયોગ કરવા માટે React નો ઉપયોગ કર્યો. અમે /ui ફોલ્ડરમાં એક Vite પ્રોજેક્ટ સેટઅપ કર્યો. તે build દરમિયાન દરેક TSX ફાઇલ માટે એક HTML ફાઇલ આઉટપુટ આપે છે.

• ટેક્સ્ટ હજુ પણ પ્રાથમિક કરાર (primary contract) છે જો host MCP Apps ને સપોર્ટ કરતું નથી, તો તે UI property ને અવગણે છે. વપરાશકર્તા ફક્ત ટેક્સ્ટ પ્રતિસાદ જ જુએ છે. તમારો એકમાત્ર જવાબ ક્યારેય ફક્ત UI માં ન રાખો. જો તમે તેમ કરશો, તો terminal clients પરના વપરાશકર્તાઓ માટે તમારું ટૂલ કામ નહીં કરે. હંમેશા એવી રીતે ડિઝાઇન કરો જાણે કે તમારા અડધા વપરાશકર્તાઓ ફક્ત ટેક્સ્ટ જ જોશે.

• અસંગત layouts ની અપેક્ષા રાખો દરેક host spec ને અલગ રીતે અમલમાં મૂકે છે. ChatGPT પહોળું (wide) રેન્ડર કરે છે. Claude સાંકડું (narrow) રેન્ડર કરે છે. મોબાઈલ ફરીથી અલગ છે. શરૂઆતથી જ એવા layouts ડિઝાઇન કરો જે સાંકડી પહોળાઈમાં પણ વ્યવસ્થિત રીતે ગોઠવાઈ (reflow) શકે.

• ડેવ લૂપ (dev loop) ધીમો છે હજુ સુધી કોઈ પ્રમાણભૂત ટેસ્ટિંગ ટૂલ નથી. તમારે દરેક ક્લાયન્ટમાં તેને મેન્યુઅલી build, install અને ચેક કરવું પડે છે. પ્રમાણભૂત frontend કામની સરખામણીમાં તે ધીમું લાગે છે.

• એપમાં secrets એકત્રિત કરશો નહીં Apps sandboxed iframe માં ચાલે છે. host સામગ્રી જોઈ શકે છે. ફોર્મ ફીલ્ડ્સમાં ક્યારેય API keys અથવા OAuth tokens ન મૂકો. જો તમારે સંવેદનશીલ ડેટાની જરૂર હોય, તો અલગ સુરક્ષિત ફોર્મનો ઉપયોગ કરો.

જો તમે અત્યારે શરૂ કરો છો:

  • તમારા UI ને તમારા સર્વરની અંદર બંડલ કરો.
  • multi-page Vite setup નો ઉપયોગ કરો.
  • તમારા હાલના 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