MCP UI مقابل MCP Apps: الفروق وحزمة SDK والأمثلة

اسأل عشرة مطورين عن الفرق بين MCP UI وMCP Apps، وستسمع عشر إجابات مختلفة. السبب بسيط: الاسمان يصفان مشروعًا مجتمعيًا والمعيار الرسمي الذي نما من هذا المشروع، وكثير من المقالات تعاملهما كأنهما منافسان. إذا كانت إحدى أدواتك في خادم MCP يجب أن تعرض مخططًا أو استمارة أو خريطة بدلًا من كتلة نصية طويلة، فأنت بحاجة إلى معرفة الحزمة التي تثبّتها، وأين تُحفظ ملفات HTML، والمضيفات التي ستعرضها فعلًا. تعرض مقارنة MCP UI مقابل MCP Apps الفروق، وأجزاء SDK على كل جانب، وأكوادًا يمكنك تكييفها اليوم.

💡 الإجابة المختصرة: MCP Apps هو الامتداد الرسمي لبروتوكول MCP الذي أصبح متاحًا في 26 يناير 2026. MCP-UI هو مشروع SDK السابق الذي ابتكر الفكرة، وحزمه تعمل الآن مع معيار MCP Apps. اعتبرهما سلفًا وخلفًا، لا منافسين.

ما الذي يمثّله كل منهما فعلًا

MCP UI بلغة بسيطة

MCP-UI هو SDK لبناء مكونات واجهة تفاعلية لأدوات Model Context Protocol. ظهر في 2025، وابتكر فكرة أن يستطيع خادم MCP الرد بواجهة حية بدلًا من النص العادي. وبحسب توثيق MCP-UI، أثّر المشروع بشكل مباشر في مواصفات MCP Apps.

تنقسم الأداة إلى قسمين:

• @mcp-ui/server يعرض createUIResource، الذي يبني مورد واجهة من نص HTML أو من عنوان URL خارجي.
• @mcp-ui/client يعرض AppRenderer لعرض واجهة الأداة، وAppFrame لملف HTML جلبته مسبقًا.

توجد أيضًا مساعدات للخادم بلغة Ruby (mcp_ui_server) وPython (mcp-ui-server)، وهذه ميزة حقيقية عندما لا يكون خادم MCP مكتوبًا بلغة TypeScript. في شكله الأول، قدّم MCP-UI عدة أنواع من المحتوى، منها HTML الخام وعناوين URL الخارجية وRemote DOM، وكانت الواجهة تنتقل داخل استجابة الأداة.

MCP Apps بلغة بسيطة

MCP Apps هو الامتداد الرسمي الذي يتيح للأداة إرجاع مكون تفاعلي، مثل لوحة معلومات أو نموذج أو سير عمل متعدد الخطوات، يُعرض داخل المحادثة في iframe معزول. يصف الإعلان الرسمي هذا بأنه أول امتداد رسمي لـ MCP، وأنه جاهز للإنتاج.

يعتمد على عنصرين أساسيين في MCP:

1. أداة تحمل بيانات UI الوصفية في الحقل _meta.ui.resourceUri.
2. مورد واجهة يُقدَّم عبر المخطط ui://، ويحتوي على HTML وJavaScript مجمّعين.

توجد حزمة SDK في حزمة npm واحدة، هي @modelcontextprotocol/ext-apps، مع مسارات فرعية لخطافات React والتضمين في المضيف وتسجيل الخادم.

كيف اندمج المشروعان

من التجربة إلى الامتداد

اقترح القائمون على المشروع MCP Apps في نوفمبر 2025، مستندين إلى عمل MCP-UI وإلى Apps SDK الخاص بشركة OpenAI. بعد شهرين، وتحديدًا في 26 يناير 2026، أصبح الامتداد متاحًا. ويوضح الإعلان صراحةً أن MCP-UI يستمر كمشروع منفصل، وأن الانتقال إلى الامتداد الرسمي اختياري.

هذه التفصيلة مهمة لمن لديهم شيفرة قديمة. لا شيء يفرض إعادة كتابة غدًا، والحزم الخاصة بـ MCP-UI تشير الآن إلى registerAppTool وregisterAppResource من معيار MCP Apps بوصفهما الطريقة الصحيحة لربط الأدوات والموارد.

لماذا كان للمعيار أهمية

قبل الدمج، كانت تجارب واجهات الأدوات مرتبطة بكل عميل على حدة. لم يكن بالإمكان الاعتماد على تشغيل لوحة صُممت لمضيف واحد في مضيف آخر دون كود خاص بذلك العميل. أما دمج أفكار MCP-UI وApps SDK في امتداد واحد، فيعني أن مؤلف الخادم يكتب واجهة واحدة، ويستطيع أي مضيف متوافق عرضها.

بالنسبة للفرق التي تشحن خوادم MCP إلى عملاء كثيرين، هذا هو جوهر الأمر: بناء واحد، ومضيفون كثيرون، وقصة أمان واحدة.

الفروق التي تهم فعلًا

جدول المقارنة

اقرأ الجدول كخريطة للطبقات، لا كلوحة نقاط. يحدد MCP Apps العقد، ويقدّم MCP-UI وسائل راحة فوق هذا العقد.

أين تعيش ملفات HTML

أكبر فرق بنيوي هو مكان الواجهة. في MCP Apps، يخزّن الخادم الواجهة تحت URI من النوع ui://، وتشير الأداة إليها عبر _meta.ui.resourceUri. يجلب المضيف هذا المورد بشكل منفصل ويعرضه وفق جدوله الخاص، فلا يُحشر HTML في كل استجابة للأداة.

المكاسب العملية:

• قوالب قابلة للمراجعة. يستطيع المضيف قراءة القالب قبل تشغيله.
• فصل واضح. تبقى نتائج الأداة بيانات، ويبقى المورد هو الواجهة.

الأمان والعزل

الشيفرة التفاعلية داخل المحادثة تحمل مخاطر، لذلك يُعد نموذج الأمان ميزة أساسية. يسرد الإعلان أربع طبقات:

• عزل iframe داخل بيئة معزولة (sandbox) مع أذونات مقيّدة
• قوالب مُعلنة مسبقًا يمكن للمضيفين مراجعتها
• رسائل JSON-RPC قابلة للتدقيق لكل تبادل بين واجهة المستخدم والمضيف
• موافقة اختيارية من المستخدم قبل أي استدعاء لأداة تبدأه الواجهة

في جانب MCP-UI، يأخذ AppRenderer خاصية sandbox تشير إلى صفحة وكيل منفصلة، ويقدّمها مثال التوثيق من منفذ خاص بها. لا تشارك HTML غير الموثوق صفحةً واحدة مع تطبيق المضيف.

💡 نصيحة: يتحقق معالج onOpenLink الموثّق من أن الرابط يبدأ بالنص https:// أو http:// قبل استدعاء window.open. اعتمد هذه العادة. الـ View مدخل غير موثوق، لذا رشّح ما يطلب من المضيف فعله.

المضيفات التي تعرض الـ Views

عند الإطلاق، ذكر الإعلان Claude (على الويب وسطح المكتب) وGoose وVisual Studio Code Insiders، مع وصول ChatGPT في الأسبوع نفسه. ويسرد مستودع ext-apps الآن ChatGPT وClaude وVS Code وGoose وPostman وMCPJam ومفتش mcp-use وAlpic Playground. وذُكرت JetBrains وAWS وGoogle DeepMind وAntigravity بوصفها جهات تدرس الدعم.

تحقق من الحالة الحالية للمضيف الذي تستهدفه قبل أن تعد بموعد إطلاق، فهذه القائمة تتغير بسرعة.

حزم SDK التي ستتعامل معها

تؤدي عائلتان من الحزم العمل، وهما تتكاملان معًا.

الجانب الخادم مع ext-apps

بالنسبة لخادم MCP، يبدو أمر التثبيت من المستودع هكذا:

npm install -S @modelcontextprotocol/ext-apps \
  @modelcontextprotocol/client@^2.0.0 \
  @modelcontextprotocol/server@^2.0.0 \
  @modelcontextprotocol/node@^2.0.0 \
  @modelcontextprotocol/express@^2.0.0 \
  zod@^4.2.0

نسخ الأمر النصي

تمنحك حزمة الخادم مساعدين، هما registerAppTool وregisterAppResource، إضافة إلى الثابت RESOURCE_MIME_TYPE. الأول يضيف بيانات UI الوصفية إلى أداة، والثاني يقدّم حزمة HTML.

الجانب View مع صنف App

الـ View هو الصفحة التي تعمل داخل iframe. يتواصل صنف App مع المضيف عبر PostMessageTransport. تنشئ التطبيق، وتضبط معالجات مثل ontoolresult، ثم تستدعي connect(). من بعدها تستطيع الـ View استدعاء أدوات الخادم عبر callServerTool، وإرسال ملاحظات إلى النموذج عبر updateModelContext.

الجانب المضيف مع AppRenderer

إذا كنت تبني عميل محادثة خاصًا بك، فإن AppRenderer من @mcp-ui/client هو المكوّن عالي المستوى. يحتاج إلى client من MCP، وtoolName، ورابط sandbox، وtoolInput وtoolResult للاستدعاء. تتيح لك رجعات مثل onOpenLink وonMessage أن يقرر المضيف ما يُسمح للـ View بفعله. أما AppFrame فهو الخيار الأدنى مستوى لملفات HTML التي جلبتها بنفسك.

أمثلة عملية في الكود

أداة تعيد الوقت

يتبع كود الخادم هذا الدليل السريع الرسمي. تُربط أداة باسم get-time بمورد ui://، ويقرأ معالج المورد ملف HTML مجمّعًا.

import { z } from "zod";
import fs from "node:fs/promises";
import path from "node:path";
import {
  registerAppResource,
  registerAppTool,
  RESOURCE_MIME_TYPE,
} from "@modelcontextprotocol/ext-apps/server";

const DIST_DIR = path.join(process.cwd(), "dist");
const resourceUri = "ui://get-time/mcp-app.html";

registerAppTool(
  server,
  "get-time",
  {
    title: "Get Time",
    description: "Returns the current server time.",
    inputSchema: z.object({}),
    _meta: { ui: { resourceUri } },
  },
  async () => {
    const time = new Date().toISOString();
    return { content: [{ type: "text", text: time }] };
  },
);

registerAppResource(
  server,
  resourceUri,
  resourceUri,
  { mimeType: RESOURCE_MIME_TYPE },
  async () => {
    const html = await fs.readFile(path.join(DIST_DIR, "mcp-app.html"), "utf-8");
    return {
      contents: [{ uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }],
    };
  },
);

نسخ الأمر النصي

لاحظ قلة ما يوجد هنا: أداة واحدة، ومورد واحد، وحقل بيانات وصفية واحد يربط بينهما.

الـ View الذي يستدعيها

تتلقى الـ View النتيجة الأولى عبر ontoolresult، ويمكنها طلب بيانات جديدة من الخادم عندما ينقر المستخدم على زر.

import { App } from "@modelcontextprotocol/ext-apps";

const app = new App({ name: "Get Time App", version: "1.0.0" });
const serverTimeEl = document.getElementById("server-time")!;

const readTime = (result: { content?: Array<{ type: string; text?: string }> }) =>
  result.content?.find((c) => c.type === "text")?.text ?? "[ERROR]";

app.ontoolresult = (result) => {
  serverTimeEl.textContent = readTime(result);
};

document.getElementById("get-time-btn")!.addEventListener("click", async () => {
  const result = await app.callServerTool({ name: "get-time", arguments: {} });
  serverTimeEl.textContent = readTime(result);
});

app.connect();

نسخ الأمر النصي

تغليف الواجهة باستخدام createUIResource

مع MCP-UI، يبني createUIResource من @mcp-ui/server كائن المورد نيابةً عنك:

import { createUIResource } from "@mcp-ui/server";

const widgetUI = await createUIResource({
  uri: "ui://my-server/widget",
  content: { type: "rawHtml", htmlString: "<h1>Widget</h1>" },
  encoding: "text",
});

نسخ الأمر النصي

الصيغة التي ينتجها عند الإرسال هي مورد MCP عادي بنوع MIME القياسي:

{
  type: "resource",
  resource: {
    uri: "ui://my-server/widget",
    mimeType: "text/html;profile=mcp-app",
    text: "<h1>Widget</h1>",
  },
}

نسخ الأمر النصي

إرسال السياق إلى النموذج

الـ View ليست طريقًا مسدودًا. يمكنها إخبار النموذج بما فعله المستخدم للتو، فتعكس الإجابة التالية النقرة:

await app.updateModelContext({
  content: [{ type: "text", text: "User selected option B" }],
});

نسخ الأمر النصي

هذا الاستدعاء الواحد هو ما يحوّل الأداة الثابتة إلى جزء من المحادثة.

أيهما تختار

الإجابة الصادقة أن معظم المشاريع الجديدة يجب أن تبدأ من معيار MCP Apps، وأن تعامل MCP-UI كصندوق أدوات يقع إلى جانبه.

اختر SDK لـ MCP Apps عندما:

• تبدأ مشروعًا جديدًا بلغة TypeScript وتريد المسار الرسمي المحايد تجاه المضيفين.
• تريد عرض واجهة واحدة في عدة مضيفات، مثل Claude وVS Code وGoose وChatGPT.
• تريد خطافات React، أو app-bridge لتضمين الـ Views في عميل المحادثة الخاص بك.
• تشغّل أداتك مهام طويلة. توليد الصور والفيديو غير متزامن: تبدأ الأداة مهمة، ثم يستعلم شيء ما عنها حتى تنتهي. الـ View الذي يحوي شريط تقدم ومعرض نتائج يتفوق على سجل نصي في كل مرة.

احتفظ بمساعدات MCP-UI عندما:

• يكون خادمك مكتوبًا بلغة Ruby أو Python وتريد mcp_ui_server أو mcp-ui-server.
• تشحن بالفعل مخرجات createUIResource وتُعرض بشكل صحيح في مضيفاتك.
• تريد AppRenderer كمُصيِّر جاهز داخل عميل تتحكم فيه.

قائمة مختصرة للانتقال:

1. أضف _meta.ui.resourceUri إلى كل أداة لها واجهة.
2. قدّم ملف HTML من مورد ui:// بنوع MIME هو text/html;profile=mcp-app.
3. استبدل حمولات الواجهة المضمّنة في استجابات الأدوات بمؤشرات إلى الموارد.
4. انقل منطق الـ View إلى صنف App واقرأ النتائج في ontoolresult.
5. اختبر على مضيفين اثنين على الأقل قبل الإصدار.

كيفية استخدام Sonnet 5 على PicassoIA

الـ Views في معظمها HTML وCSS وطبقة رقيقة من TypeScript، وهذا بالضبط ما يتقنه نموذج البرمجة. Claude Sonnet 5 على Picasso IA مصمَّم لمهام البرمجة متعددة الخطوات واستخدام الأدوات، ويقرأ لقطات الشاشة والمخططات الأولية، ويستطيع كتابة مسودة أولى لخادم أو لواجهة View أو لغلاف مضيف انطلاقًا من طلب بسيط.

1. افتح صفحة النموذج. انتقل إلى صفحة Claude Sonnet 5 على Picasso IA.
2. املأ الحقل المطلوب. prompt هو المعامل الوحيد المطلوب. جرّب: "Write a TypeScript MCP server tool named show-chart that registers a ui:// resource, plus a View using the App class that renders a bar chart from the tool result."
3. اضبط مستوى الجهد. الافتراضي هو low، وهذا يوقف التفكير لأسرع إجابة. ارفعه إلى high أو max عندما تمس المهمة عدة ملفات، مثل الخادم والـ View وخطوة البناء معًا.
4. أضف أمرًا نظاميًا. ثبّت دورًا مرة واحدة، مثلًا: "You write MCP Apps code with @modelcontextprotocol/ext-apps and never inline secrets in HTML." ثم يُطبَّق على الجلسة كلها.
5. أرفق صورة إن كان لديك واحدة. يقبل المعامل الاختياري image مخططًا أوليًا أو لقطة شاشة، ويُصغَّر بواسطة max_image_resolution لتوفير الوقت والمال.
6. وَلّد وراجع. يمكن أن تصل المخرجات إلى 8,192 توكن افتراضيًا. انسخ الشيفرة، ثم اختبرها في مضيف.

💡 نصيحة: الصق المقتطفات من هذا المقال في أمرك النصي كمرجع. عندها يطابق النموذج أسماء الـ API الحقيقية بدلًا من تخمينها.

أنشئ مرئياتك الخاصة اليوم

كل تطبيق MCP ينتهي به الأمر إلى الحاجة إلى صور: صورة رئيسية لصفحة هبوط، ولقطات منتجات لمعرض View، ومقطع قصير لعرض توضيحي. يجمع Picasso IA النماذج الخاصة بكل ذلك في مكان واحد، فتستطيع اختبار أفكارك قبل ربط أي شيء بخادم.

• ابدأ بصور ثابتة من Seedream 5 Pro، وامنح الأمر النصي عدسة واتجاه إضاءة وملمسًا للحصول على نتيجة تشبه التصوير الفوتوغرافي.
• حوّل أفضل إطار إلى حركة باستخدام Seedance 2.0، الذي يجمع الفيديو مع صوت مدمج.
• حافظ على سير العمل البرمجي باستخدام Claude Sonnet 5، مع اتباع الخطوات أعلاه.

اختر أمرًا نصيًا واحدًا، وولّد صورة واحدة، وانظر إلى أي مدى تصل فكرة واحدة. ثم افتح مجموعة نماذج Picasso IA وجرّب نموذجًا ثانيًا على الأمر نفسه. المقارنة وحدها ستعلّمك ما يتفوق فيه كل نموذج.