اگر امروز در حال ساخت ابزارهای هوش مصنوعی هستید، عبور از متنهای ساده به سمت رابطهای بصری غنی، مرز جدید رقابت است. تیمی که در عرض دو روز ۲۰ اپلیکیشن MCP ساخت، دریافت که آوردن سطوح بصری برند شده به درون یک محیط گفتگو دیگر یک انتخاب لوکس نیست، بلکه ضرورتی برای افزایش سرعت پیمایش اطلاعات (Scannability) است.
این اپلیکیشنها بر اساس مشخصات پروتکل زمینه مدل (Model Context Protocol یا MCP) — که شبیه به یک مترجم استاندارد است و اجازه میدهد ابزارهای مختلف با یک زبان مشترک با مدل زبانی صحبت کنند — توسعه یافتهاند. اپلیکیشنهای MCP نخستین توسعه رسمی این پروتکل هستند و به ابزار اجازه میدهند در کنار نتیجه متنی، یک منبع رابط کاربری (UI resource) نیز برگرداند. این قابلیت به میزبان (Host) اجازه میدهد تا iframeهای ایزولهشدهای (Sandboxed) حاوی نمودارها، جداول، طرحهای برند شده یا فرمهای تعاملی که میتوانند مجدداً ابزارهای دیگر را فراخوانی کنند، رندر کند. این رویکرد، دیوارهای متنی پر از بالت (bullet) را به داشبوردهای بصری تبدیل میکند؛ برای مثال، یک لیست مرتبشده از درخواستهای ادغام (Pull Requests) در یک قالب گرافیکی، بسیار سریعتر و راحتتر از یک فایل CSV یا یک لیست متنی قابل بررسی است.
معماری اپلیکیشنهای MCP
به نقل از گزارش وبسایت dev.to، معماری فنی این اپلیکیشنها برخلاف انتظار است. یک اپلیکیشن MCP در واقع یک URL میزبانیشده نیست که ابزار شما به آن اشاره کند، یا یک iframe شخص ثالث نباشد که شما آن را جاسازی کنید. در عوض، این اپلیکیشنها از طریق خودِ پروتکل MCP و نه HTTP فراخوانی میشوند. این یعنی کد رابط کاربری مستقیماً همراه با سرور MCP ارسال شده و از طریق طرح منبع ui:// سرویسدهی میشود.
برای سازماندهی این ساختار فایلها، روشهای مختلفی وجود دارد. یک رویکرد این است که فایلهای UI در کنار ابزارها قرار گیرند (مثلاً قرار دادن project-summary.html در کنار list_projects.py). رویکرد دیگر، استفاده از یک پوشه متمرکز به نام /ui است. این تیم برای بهرهگیری از سیستم طراحی داخلی خود از React استفاده کرد و ساختار سرور خود را به صورت زیر سازماندهی نمود:
- پوشه
my-mcp-server/tools/(شامل منطق پایتونی مانندlist_projects.py) - پوشه
my-mcp-server/ui/(شامل فایلهای.tsxمانندpattern-card.tsx) - قرارگیری فایلهای
package.jsonوvite.config.mjsدر ریشه پوشه/ui
آنها از یک پروژه Vite استفاده کردند که پیکربندی شده بود تا در زمان ساخت (Build time)، برای هر فایل TSX یک فایل HTML مجزا تولید کند.
نردههای ایمنی در پیادهسازی فنی
طبق مستندات این تیم، برای تضمین پایداری در کلاینتهای مختلف، چندین قانون سختگیرانه تعریف شد تا این واقعیت پذیرفته شود که اپلیکیشنهای MCP صرفاً برای «غنیسازی» (Enrichment-only) هستند:
- طراحی متن-محور: پاسخ متنی همچنان قرارداد اصلی است. اگر میزبان (Host) از این افزونه پشتیبانی نکند (مانند Claude Code یا اکثر کلاینتهای مبتنی بر ترمینال)، ویژگی
_meta.uiبهطور بیصدا نادیده گرفته میشود. اگر پاسخ واقعی را فقط در UI قرار دهید و پاسخ متنی را خالی بگذارید، ابزار برای نیمی از کاربران بهطور کامل از کار میافتد. - کامپوننتهای بدون وضعیت (Stateless): اجزا باید «ساده»، خالص و خستهکننده باشند. تمام دادهها باید به عنوان props از نتیجه ابزار پاس داده شوند. هیچ فراخوانی (Fetch) از داخل اپلیکیشن، هیچ ماشین وضعیتی (State Machine) و هیچ فراخوانی مستقیم به API نباید وجود داشته باشد. این کار باعث میشود UI یک بازنمود قطعی (Deterministic render) از محاسبات ابزار باشد.
- مرزهای امنیتی: چون اپلیکیشنهای MCP در یک iframe ایزوله (Sandboxed) اجرا میشوند، محتوا برای میزبان قابل مشاهده است. در نتیجه، توسعهدهندگان هرگز نباید از اپلیکیشنهای MCP برای جمعآوری اطلاعات حساس (Secrets) استفاده کنند. این شامل کلیدهای API در فیلدهای فرم یا توکنهای OAuth میشود. در عوض، توسعهدهندگان باید از روش استخراج URL یا یک فرم خارجی امن استفاده کنند و احتمالاً آن را با اپلیکیشنی جفت کنند که برای بررسی وضعیت، یک نقطه انتهایی (Endpoint) را نظارت (Poll) میکند.
مشکل پراکندگی میزبانها
یکی از دردناکترین بخشهای چرخه توسعه، نبود استانداردهای تست است. با وجود وجود یک مشخصه (Spec)، میزبانها آن را با سلیقه و نظرات خاص خود در مورد عرض کانتینر، فاصله (Padding)، تایپوگرافی پیشفرض و مدیریت حالت تیره/روشن (Dark/Light mode) پیاده میکنند:
- ChatGPT: در مرورگر بهصورت عریض رندر میکند.
- Claude: در یک پنل گفتگو بهصورت باریک رندر میشود.
- VS Code: پنل کناری آن توصیف شده به عنوان یک «ماجراجویی کوچک» جداگانه با ویژگیهای خاص.
- موبایل: محدودیتهای منحصربهفرد و خاص خود را ارائه میدهد.
به دلیل نبود ابزارهایی مانند Storybook یا هارنس Playwright در چرخه CI، فرآیند تکرار کاملاً دستی است: ساخت، نصب در کلاینت A، بررسی چشمی، نصب در کلاینت B، بررسی چشمی و تکرار مجدد. برای کاهش این مشکل، توسعهدهندگان توصیه میکنند از ابتدا قالبهایی طراحی کنید که در عرضهای کم بهطور منعطف و مناسب تغییر شکل دهند (Reflow). استفاده از یک File Watcher برای بازسازی کدها هنگام ذخیره، به کاهش اصطکاک کمک کرد، اگرچه تضمین کیفیت بصری (Visual QA) همچنان کند است.
این تجربه نشان میدهد صنعت به سمت رابطهای کاربری «صرفاً غنیکننده» میرود. هرچند مشخصات فعلی در مراحل اولیه است و ابزارها محدود هستند، اما توانایی جاسازی رندرهای قطعی از دادهها مستقیماً در دل یک گفتگو، جهشی عظیم در تجربه کاربری (UX) نسبت به متنهای خام است.
برای کسانی که به دنبال تکامل بعدی هستند، MCP Tasks در حال حاضر در مرحله آزمایشی است. این قابلیت ممکن است در نهایت الگوی «ناممکن» فعلی — یعنی جمعآوری ورودیهای ابزار از طریق UI پیش از آنکه فراخوانی ابزار واقعاً انجام شود — را حل کند.
گام بعدی شما
- اگر توسعهدهنده هستید، در طراحی UI برای مدلها، متن را به عنوان «پشتیبان» (Fallback) نگه دارید تا در کلاینتهای مختلف شکست نخورید.
- برای کاهش اصطکاک در تست، از File Watcher برای بازسازی سریع کدها استفاده کنید.
- منتظر معرفی MCP Tasks باشید که احتمالاً مشکل دریافت ورودیهای کاربر از طریق UI پیش از فراخوانی ابزار را حل خواهد کرد.
اما داستان سختافزاری این تحول حتی شگفتانگیزتر است — به تحلیل ما دربارهی تراشههای Blackwell مراجعه کنید.
گفتگو