تصور کنید هفته‌ها از عمر خود را صرف طراحی دکمه‌ها و پنجره‌های تاییدیه تکراری کنید، در حالی که تمام تمرکز شما باید روی منطق هوش مصنوعی باشد. توسعه‌دهندگان کلاینت‌های پروتکل زمینهٔ مدل (Model Context Protocol - MCP) تا پیش از ۷ جولای ۲۰۲۶ دقیقاً در همین چرخهٔ فرسایشی گیر کرده بودند. در واقع، بسیاری از آن‌ها هفته‌های متوالی را صرف بازسازی هفت صفحه تکراری از رابط کاربری می‌کردند.
به نقل از مستندات پروژه، کتابخانه mcp-elements که در ۷ جولای ۲۰۲۶ عرضه شد، با ارائه ۳۸ مؤلفه (Component) آماده، این مشکل را حل کرده است. این ابزار به جای ارائه یک ویجت یکپارچه و بسته، از «مدل shadcn» استفاده می‌کند؛ یعنی مؤلفه‌ها مستقیماً از طریق یک ابزار خط فرمان (CLI) در مخزن کد کاربر کپی می‌شوند. طبق مستندات، این رویکرد تضمین می‌کند که هیچ وابستگی خارجی در زمان اجرا (Runtime Dependency) وجود نداشته باشد که نیاز به به‌روزرسانی داشته یا باعث خرابی برنامه شود. کاربران می‌توانند با دستوراتی مانند npx mcp-elements add mcp-tool-call قطعات خاصی را نصب کنند تا کد منبع، CSS و ماشین‌های وضعیت (State Machines) به‌طور فوری دریافت شود و مسیرهای Import به‌طور خودکار به مسیرهای نسبی تغییر یابند.
همان‌طور که در تحلیل‌های پیشین ما درباره‌ی استانداردهای ارتباطی مدل‌های زبانی اشاره کردیم، رشد اکوسیستم MCP خیره‌کننده بوده است. طبق داده‌های رسمی، این اکوسیستم در سال گذشته رشد انفجاری داشته و تعداد دانلودهای ماهانه SDKهای این پروتکل از ۲ میلیون به ۹۷ میلیون رسیده است. با وجود بیش از ۹۴۰۰ سرور که اکنون در فهرست ثبت‌شده (Registry) قرار دارند، تقاضا برای رابط‌های کاربری کلاینت یکپارچه به شدت افزایش یافت. اکثر توسعه‌دهندگان دریافتند که برای هر پروژه جدید، باید به‌صورت دستی کارت‌های فراخوانی ابزار، دیالوگ‌های تایید OAuth و مرورگرهای منابع را کدنویسی کنند. در این راستا، ابزارهایی برای عیب‌یابی این ارتباطات توسعه یافته‌اند؛ برای مثال ابزار mcpsnoop برای رمزگشایی از ترافیک مخفی عامل‌ها به توسعه‌دهندگان کمک می‌کند تا تعاملات پیچیده بین کلاینت و سرور را بهتر تحلیل کنند.
ابزارهای موجود مانند AI Elements شرکت Vercel، assistant-ui و CopilotKit بخش مربوط به چت در لایه تکنولوژی را به‌خوبی پوشش می‌دهند، اما این ابزارها عمدتاً فقط برای React هستند (هرچند CopilotKit از Angular پشتیبانی می‌کند) و قطعات اختصاصی MCP را تعریف نمی‌کردند. گزینه‌های دیگر مانند Deep Chat، به جای ارائه قطعات اولیه قابل ترکیب (Composable Primitives)، یک ویجت یکپارچه و حجیم ارائه می‌دهند. نویسنده این پروژه اشاره می‌کند که هنگام جست‌وجو برای یافتن یک پنجره تاییدیه (Consent Dialog) که بتوان آن را کپی-پیست کرد و در Angular استفاده نمود، با خلأ مطلق در بازار مواجه شد. حتی غول‌هایی مانند اپل نیز در حال ساده‌سازی این تعاملات هستند، چنان‌که هدف جدید اپل در پیش‌نمایش سافاری، حذف توصیفات دستی برنامه‌نویس از طریق اتوماسیون مبتنی بر MCP است.
این کتابخانه به‌طور ویژه هفت صفحه پرچالشی در MCP را هدف قرار داده است که اصطکاک زیادی برای توسعه‌دهنده ایجاد می‌کنند:
- کارت‌های فراخوانی ابزار (Tool-call cards): این‌ها به عنوان ماشین وضعیت با ۶ حالت مجزا (بیکار، در انتظار، در حال اجرا، تکمیل، خطا و لغو) عمل می‌کنند و شامل منطق تلاش مجدد (Retry)، توکن‌های تم و رعایت استانداردهای دسترسی‌پذیری هستند.
- پنجره‌های تایید OAuth: این دیالوگ‌ها محدوده‌های دسترسی (Scopes) OAuth را به زبانی لیست می‌کنند که برای انسان قابل درک و تایید باشد.
- مولدهای فرم (Form generators): این فرم‌ها به‌طور خودکار از روی JSON Schema مربوط به ابزار تولید شده و دارای اعتبارسنجی (Validation) داخلی هستند.
- بازرس‌های محدوده (Scope inspectors): برای تعیین دقیق اینکه یک سرور به چه بخش‌هایی دسترسی دارد و چه چیزی را می‌تواند تغییر دهد. برای افزایش امنیت در این لایه، راهکارهایی نظیر محدود کردن دسترسی فایل توسط ادیسون فلورز برای ایمن‌سازی سرورهای MCP پیشنهاد شده است.
- مرورگرهای منابع (Resource browsers): برای پیمایش هر آنچه که سرور در اختیار کلاینت قرار می‌دهد.
- نشان‌های وضعیت اتصال (Connection status badges): شاخص‌های بصری برای نمایش لحظه‌ای وضعیت اتصال به سرور.
- قاب‌های اپلیکیشن MCP (MCP Apps frames): آی‌فریم‌های ایزوله (Sandboxed iframes) با یک پل ارتباطی postMessage که از مشخصات فنی منتشر شده در ژانویه ۲۰۲۶ پیروی می‌کند.
علاوه بر این‌ها، این کیت شامل ۳۱ مؤلفه پایه هوش مصنوعی است؛ مواردی مانند حباب‌های چت، متن‌های در حال استریم (Streaming text)، ورودی‌های پرامپت، کارت‌های منبع، دکمه‌ها و دیالوگ‌ها.
معماری این سیستم بر یک ساختار سه لایه استوار است تا سازگاری کامل با فریم‌ورک‌های مختلف را تضمین کند:
- لایه CSS: استایل‌شیت‌های ساده که از توکن‌های طراحی OKLCH استفاده می‌کنند. این لایه از CSS-in-JS و وابستگی به فرآیند Build اجتناب می‌کند تا کاربران بتوانند توکن‌ها را برای ایجاد تم شخصی تغییر دهند.
- لایه هسته (Core Layer): ماشین‌های وضعیت ساده با TypeScript که چرخه حیات ابزار، جریان تاییدیه و منطق تبدیل JSON-Schema به فرم را مدیریت می‌کنند. این بسته‌ها هیچ Importی از فریم‌ورک‌ها ندارند.
- لایه آداپتور (Adapter Layer): مؤلفه‌های نازک در React، Angular و Vue که مشترک در ماشین‌های هسته هستند و کلاس‌های CSS را اعمال می‌کنند.
این لایه‌بندی تضمین می‌کند که هر اصلاح خطا در ماشین وضعیت هسته — مانند مشکل مدیریت فوکوس که هفته گذشته اصلاح شد — به‌طور هم‌زمان در تمام فریم‌ورک‌های پشتیبانی شده اعمال شود، زیرا باگ تنها در یک مکان وجود داشت. این طراحی خلأهای موجود در کتابخانه‌های دیگر را پر می‌کند؛ برای مثال، یک درخواست برای پشتیبانی از Svelte در vercel/ai-elements از سپتامبر ۲۰۲۵ باز مانده است. با استفاده از هسته مستقل از فریم‌ورک، افزودن فریم‌ورک‌های جدید حجم محدودی از کار را می‌طلبد و آداپتورهای Svelte و Lit در حال حاضر در نقشه راه پروژه قرار دارند.
در لایه جزئیات، mcp-elements قابلیت‌های پیچیده‌ای را رایگان ارائه می‌دهد که کدنویسی آن‌ها معمولاً بیشتر از مسیر اصلی (Happy Path) زمان می‌برد:
- مدیریت فوکوس: دیالوگ‌ها هنگام باز شدن، فوکوس را به درون خود منتقل می‌کنند، کلید Tab را به دام می‌اندازند (Trap)، با کلید Escape بسته می‌شوند و پس از بسته شدن، فوکوس را به المان تحریک‌کننده (Trigger) باز می‌گردانند.
- پشتیبانی از صفحه‌خوان‌ها: وضعیت اتصال از
aria-liveاستفاده می‌کند تا تغییرات وضعیت برای کاربران نابینا اعلام شود؛ ویژگی‌ای که در تقریباً تمام کتابخانه‌های مؤلفه AI غایب است. - کنتراست و دسترسی‌پذیری: هر دو تم ارائه شده، استانداردهای WCAG AA را پاس می‌کنند و در تم تاریک، متن‌های کم‌رنگ به نسبت کنتراست ۹.۴:۱ می‌رسند.
- مدیریت وضعیت مستحکم: کارت‌های فراخوانی ابزار تمام مسیرهای شکست و لغو را رندر می‌کنند، نه فقط مسیر دمو و موفقیت‌آمیز.
برای توسعه‌دهنده، این به معنای پایان دیالوگ‌های «دست‌ساز» است که اغلب در تست‌های دسترسی‌پذیری شکست می‌خورند. با جداسازی رابط کاربری از SDK کلاینت MCP، این ابزار به توسعه‌دهندگان اجازه می‌دهد منطق اتصال خود را داشته باشند و کارهای خسته‌کننده رندر کردن تغییرات وضعیت را به mcp-elements بسپارند. این ابزار یک فریم‌ورک چت یا یک ارائه‌دهنده ابری نیست؛ بلکه مجموعه‌ای از قطعات اولیه (Primitives) است. اگرچه در حال حاضر در نسخه v0.1 است و Vue هنوز در حال تکمیل مجموعه مؤلفه‌های پایه خود است، اما به توسعه‌دهندگان اجازه می‌دهد مالک کد منبع باشند و دقیقاً تصمیم بگیرند چه زمانی به‌روزرسانی‌های مربوط به مشخصات در حال تکامل MCP را بپذیرند.
گام بعدی شما
- اگر در حال توسعه کلاینت MCP هستید، با دستور
npx mcp-elements add mcp-tool-callاولین مؤلفه را تست کنید. - استانداردهای دسترسی‌پذیری (Accessibility) اپلیکیشن خود را با معیارهای WCAG AA تطبیق دهید.
- ساختار لایه‌بندی هسته و آداپتور را برای افزودن فریم‌ورک‌های شخصی بررسی کنید.
اما برای درک بهتر اینکه چگونه این پروتکل‌ها در لایه سخت‌افزاری بهینه می‌شوند، تحلیل ما درباره تراشه‌های Blackwell را بخوانید.
گفتگو