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

మా బృందం రెండు రోజుల్లో 20 MCP Apps నిర్మించింది. ఈ సాధనాలు ఏమి చేస్తాయి మరియు అవి ఎక్కడ విఫలమవుతాయనే దానిపై ఇది నాకు స్పష్టమైన అవగాహనను ఇచ్చింది.

MCP Apps అనేవి MCP spec కి మొదటి అధికారిక ఎక్స్‌టెన్షన్. ఇవి ఒక టూల్ తన ఫలితంతో పాటు ఒక UI రిసోర్స్‌ను తిరిగి పంపేలా చేస్తాయి. హోస్ట్ ఈ UIని ఒక sandboxed iframeలో రెండర్ చేస్తుంది. మీరు చాట్‌లో నేరుగా టేబుల్స్, చార్ట్‌లు మరియు ఫారమ్‌లను చూపించవచ్చు.

టెక్స్ట్ కంటే విజువల్ సమాచారం తరచుగా మెరుగ్గా ఉంటుంది. ఒక CSV ఫైల్ కంటే చార్ట్ మెరుగ్గా ఉంటుంది. టెక్స్ట్ కొండ కంటే pull requests జాబితాను చదవడం సులభం.

మేము నేర్చుకున్న పాఠాలు ఇక్కడ ఉన్నాయి:

• Apps సర్వర్ లోపలే ఉంటాయి MCP App అనేది హోస్ట్ చేయబడిన URL కాదు. ఇది HTTP ద్వారా కాకుండా MCP ద్వారా పొందబడుతుంది. UI కోడ్ మీ MCP సర్వర్‌తో పాటే వస్తుంది.

• React మరియు Vite ఉపయోగించండి మా వద్ద ఉన్న డిజైన్ సిస్టమ్‌ను ఉపయోగించడానికి మేము Reactను ఉపయోగించాము. మేము /ui ఫోల్డర్‌లో ఒక Vite ప్రాజెక్ట్‌ను సెటప్ చేసాము. ఇది బిల్డ్ సమయంలో ప్రతి TSX ఫైల్ కోసం ఒక HTML ఫైల్‌ను అవుట్‌పుట్‌గా ఇస్తుంది.

• టెక్స్ట్ ఇంకా ప్రాథమిక ఒప్పందం (primary contract) ఒకవేళ హోస్ట్ MCP Apps ని సపోర్ట్ చేయకపోతే, అది UI ప్రాపర్టీని విస్మరిస్తుంది. వినియోగదారుడు కేవలం టెక్స్ట్ రెస్పాన్స్‌ను మాత్రమే చూస్తారు. మీ సమాధానం మొత్తం UIలో మాత్రమే ఉంచకండి. అలా చేస్తే, టెర్మినల్ క్లయింట్‌లను ఉపయోగించే వినియోగదారులకు మీ టూల్ పని చేయదు. మీ వినియోగదారులలో సగం మంది కేవలం టెక్స్ట్‌ను మాత్రమే చూస్తారని భావించి ఎల్లప్పుడూ డిజైన్ చేయండి.

• అసమాన లేఅవుట్‌లను (inconsistent layouts) ఆశించండి ప్రతి హోస్ట్ specను భిన్నంగా అమలు చేస్తుంది. ChatGPT వెడల్పుగా రెండర్ చేస్తుంది. Claude ఇరుకుగా రెండర్ చేస్తుంది. మొబైల్ మళ్ళీ వేరుగా ఉంటుంది. ప్రారంభం నుండే ఇరుకైన వెడల్పుల వద్ద కూడా సర్దుబాటు అయ్యే (reflow) లేఅవుట్‌లను డిజైన్ చేయండి.

• డెవ్ లూప్ (dev loop) నెమ్మదిగా ఉంటుంది ఇంకా ఎటువంటి ప్రామాణిక టెస్టింగ్ టూల్ లేదు. మీరు ప్రతి క్లయింట్‌లో మాన్యువల్‌గా బిల్డ్ చేసి, ఇన్‌స్టాల్ చేసి, తనిఖీ చేయాలి. సాధారణ ఫ్రంటెండ్ పనితో పోలిస్తే ఇది నెమ్మదిగా అనిపిస్తుంది.

• యాప్‌లో సీక్రెట్‌లను (secrets) సేకరించకండి Apps sandboxed iframeలో రన్ అవుతాయి. హోస్ట్ కంటెంట్‌ను చూడగలదు. ఫారమ్ ఫీల్డ్‌లలో ఎప్పుడూ API కీలు లేదా OAuth టోకెన్‌లను ఉంచకండి. మీకు సెన్సిటివ్ డేటా కావాలంటే విడిగా ఒక సురక్షితమైన ఫారమ్‌ను ఉపయోగించండి.

మీరు ఇప్పుడే ప్రారంభిస్తే:

  • మీ UIని మీ సర్వర్ లోపలే బండిల్ చేయండి.
  • మల్టీ-పేజీ Vite సెటప్‌ను ఉపయోగించండి.
  • మీ వద్ద ఉన్న డిజైన్ సిస్టమ్‌ను నేరుగా ఇంపోర్ట్ చేయండి.

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