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

எனது குழு இரண்டு நாட்களில் 20 MCP Apps-களை உருவாக்கியது. இந்தத் கருவிகள் என்ன செய்கின்றன மற்றும் எங்கே தோல்வியடைகின்றன என்பதைப் பற்றிய தெளிவான பார்வையை இது எனக்கு வழங்கியது.

MCP Apps என்பது MCP specification-க்கான முதல் அதிகாரப்பூர்வ விரிவாக்கமாகும் (extension). இவை ஒரு கருவி அதன் முடிவோடு ஒரு UI resource-ஐயும் வழங்க அனுமதிக்கின்றன. Host இந்த UI-ஐ ஒரு sandboxed iframe-இல் காண்பிக்கும். நீங்கள் அட்டவணைகள் (tables), வரைபடங்கள் (charts) மற்றும் படிவங்களை (forms) நேரடியாக ஒரு சாட்டில் (chat) காட்ட முடியும்.

உரை (text) விட காட்சித் தகவல் (visual information) பெரும்பாலும் சிறப்பாக இருக்கும். ஒரு CSV கோப்பை விட ஒரு வரைபடம் (chart) சிறந்தது. ஒரு பெரிய உரைத் தொகுப்பை விட pull requests-களின் பட்டியல் எளிதாகப் படிக்கக்கூடியது.

நாங்கள் கற்றுக்கொண்ட பாடங்கள் இதோ:

• Apps சர்வர் உள்ளேயே இருக்கும் ஒரு MCP App என்பது hosted URL அல்ல. இது HTTP மூலம் அல்லாமல், MCP மூலமே பெறப்படுகிறது. UI குறியீடு (code) உங்கள் MCP server-உடன் இணைந்தே வரும்.

• React மற்றும் Vite-ஐப் பயன்படுத்தவும் எங்களது ஏற்கனவே உள்ள design system-ஐப் பயன்படுத்துவதற்காக நாங்கள் React-ஐப் பயன்படுத்தினோம். நாங்கள் /ui கோப்புறையில் (folder) ஒரு Vite project-ஐ அமைத்தோம். இது build செய்யும் போது ஒவ்வொரு TSX file-க்கும் ஒரு HTML file-ஐ வெளியிடுகிறது.

• உரை (Text) இப்போதும் முதன்மையான ஒப்பந்தமாகும் (primary contract) ஒரு host MCP Apps-ஐ ஆதரிக்கவில்லை என்றால், அது UI property-ஐப் புறக்கணிக்கும். பயனர் உரையை (text response) மட்டுமே காண்பார். உங்கள் பதிலின் ஒரே பகுதியை UI-இல் மட்டும் வைக்காதீர்கள். அப்படிச் செய்தால், terminal clients பயன்படுத்தும் பயனர்களுக்கு உங்கள் கருவி வேலை செய்யாது. உங்கள் பயனர்களில் பாதி பேர் உரையை மட்டுமே பார்ப்பார்கள் எனக் கருதி எப்போதும் வடிவமைக்கவும்.

• மாறுபட்ட லேஅவுட்களை (layouts) எதிர்பார்க்கவும் ஒவ்வொரு host-உம் specification-ஐ வெவ்வேறு விதமாகச் செயல்படுத்துகிறது. ChatGPT அகலமாகவும் (wide), Claude குறுகலாகவும் (narrow) காண்பிக்கும். மொபைல் போன்களில் இது இன்னும் மாறுபடும். ஆரம்பத்திலிருந்தே குறுகிய அகலங்களுக்கு ஏற்ப மாறும் (reflow) லேஅவுட்களை வடிவமைக்கவும்.

• டெவலப்மென்ட் சுழற்சி (dev loop) மெதுவானது இன்னும் நிலையான சோதனை கருவி (standard testing tool) எதுவும் இல்லை. நீங்கள் ஒவ்வொரு client-இலும் கைமுறையாக (manually) build செய்து, install செய்து, சரிபார்க்க வேண்டும். இது சாதாரண frontend வேலைகளை விட மெதுவாகத் தோன்றும்.

• ஒரு app-இல் ரகசியத் தகவல்களைச் (secrets) சேகரிக்காதீர்கள் Apps ஒரு sandboxed iframe-இல் இயங்குகின்றன. Host அதன் உள்ளடக்கத்தைப் பார்க்க முடியும். Form fields-களில் API keys அல்லது OAuth tokens-களை ஒருபோதும் வைக்காதீர்கள். உங்களுக்குத் தனிப்பட்டத் தரவுகள் (sensitive data) தேவைப்பட்டால், ஒரு தனிப் பாதுகாப்பான படிவத்தைப் (secure form) பயன்படுத்தவும்.

நீங்கள் இப்போது தொடங்கினால்:

  • உங்கள் UI-ஐ உங்கள் சர்வர் உள்ளேயே இணைக்கவும் (bundle).
  • ஒரு multi-page Vite setup-ஐப் பயன்படுத்தவும்.
  • உங்கள் ஏற்கனவே உள்ள design system-ஐ நேரடியாக இறக்குமதி (import) செய்யவும்.

MCP Apps இன்னும் ஆரம்பக் கட்டத்தில் உள்ளன மற்றும் specification மாறிக்கொண்டே இருக்கிறது. இதற்கான கருவிகள் (tooling) குறைவாகவே உள்ளன, ஆனால் இவற்றை வெளியிடுவது பயனுள்ளதாக இருக்கும்.

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

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