২ দিনে ২০টি MCP App তৈরির অভিজ্ঞতা থেকে প্রাপ্ত শিক্ষা

আমার টিম দুই দিনে ২০টি MCP App তৈরি করেছে। এর ফলে এই টুলগুলো কী করতে পারে এবং কোথায় এগুলো ব্যর্থ হয়, সে সম্পর্কে আমি একটি পরিষ্কার ধারণা পেয়েছি।

MCP Apps হলো MCP spec-এর প্রথম অফিসিয়াল এক্সটেনশন। এগুলো একটি টুলকে তার ফলাফলের সাথে একটি UI resource রিটার্ন করতে সাহায্য করে। হোস্ট এই UI-টি একটি sandboxed iframe-এ রেন্ডার করে। আপনি সরাসরি চ্যাটে টেবিল, চার্ট এবং ফর্ম দেখাতে পারেন।

ভিজ্যুয়াল তথ্য প্রায়শই টেক্সটের চেয়ে ভালো হয়। একটি চার্ট একটি CSV ফাইলের চেয়ে অনেক বেশি কার্যকর। টেক্সটের বিশাল স্তূপের চেয়ে pull requests-এর একটি তালিকা পড়া অনেক সহজ।

আমরা যে শিক্ষাগুলো পেয়েছি তা নিচে দেওয়া হলো:

• Apps সার্ভারের ভেতরে থাকে একটি MCP App কোনো হোস্ট করা URL নয়। এটি MCP-এর মাধ্যমে ফেচ (fetch) করা হয়, HTTP-এর মাধ্যমে নয়। UI কোড আপনার MCP সার্ভারের সাথেই থাকে।

• React এবং Vite ব্যবহার করুন আমাদের বিদ্যমান design system ব্যবহার করার জন্য আমরা React ব্যবহার করেছি। আমরা একটি /ui ফোল্ডারে একটি Vite প্রজেক্ট সেটআপ করেছি। এটি বিল্ড করার সময় প্রতিটি TSX ফাইলের জন্য একটি করে HTML ফাইল আউটপুট দেয়।

• টেক্সট এখনও মূল ভিত্তি (primary contract) যদি কোনো হোস্ট MCP Apps সাপোর্ট না করে, তবে সেটি UI property-টি উপেক্ষা করবে। ব্যবহারকারী কেবল টেক্সট রেসপন্স দেখতে পাবেন। আপনার একমাত্র উত্তরটি কখনোই শুধুমাত্র UI-তে রাখবেন না। যদি আপনি তা করেন, তবে টার্মিনাল ক্লায়েন্ট ব্যবহারকারীদের জন্য আপনার টুলটি অকেজো হয়ে পড়বে। সবসময় এমনভাবে ডিজাইন করুন যেন আপনার অর্ধেক ব্যবহারকারী কেবল টেক্সটই দেখতে পান।

• অসামঞ্জস্যপূর্ণ লেআউট আশা করুন প্রতিটি হোস্ট spec-টি ভিন্নভাবে ইমপ্লিমেন্ট করে। ChatGPT চওড়াভাবে রেন্ডার করে। Claude সরুভাবে রেন্ডার করে। মোবাইলের ক্ষেত্রে বিষয়টি আবার ভিন্ন। শুরু থেকেই এমন লেআউট ডিজাইন করুন যা সরু উইডথ বা প্রস্থে স্বয়ংক্রিয়ভাবে অ্যাডজাস্ট (reflow) হতে পারে।

• ডেভ লুপ (dev loop) ধীরগতির এখনও কোনো স্ট্যান্ডার্ড টেস্টিং টুল নেই। আপনাকে প্রতিটি ক্লায়েন্টে ম্যানুয়ালি বিল্ড, ইনস্টল এবং চেক করতে হবে। স্ট্যান্ডার্ড ফ্রন্টএন্ড কাজের তুলনায় এটি ধীরগতির মনে হয়।

• অ্যাপের মধ্যে সিক্রেট (secrets) সংগ্রহ করবেন না Apps একটি sandboxed iframe-এ চলে। হোস্ট এর কন্টেন্ট দেখতে পারে। ফর্ম ফিল্ডে কখনোই API keys বা OAuth tokens রাখবেন না। সংবেদনশীল তথ্যের প্রয়োজন হলে একটি আলাদা নিরাপদ ফর্ম ব্যবহার করুন।

আপনি যদি এখন শুরু করতে চান:

  • আপনার সার্ভারের ভেতরেই UI বান্ডেল করুন।
  • একটি multi-page Vite সেটআপ ব্যবহার করুন।
  • আপনার বিদ্যমান design system সরাসরি ইম্পোর্ট করুন।

MCP Apps এখনও প্রাথমিক পর্যায়ে আছে এবং spec-টি প্রতিনিয়ত পরিবর্তিত হচ্ছে। টুলিং এখনও খুব একটা উন্নত নয়, তবে এগুলো রিলিজ করার মতো যথেষ্ট কার্যকর।

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

ঐচ্ছিক লার্নিং কমিউনিটি: https://t.me/GyaanSetuAi