أمثلة MCP Apps: واجهات تفاعلية في Claude وChatGPT مع عروض توضيحية حقيقية

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

ما هي MCP Apps فعلًا

MCP Apps هي أول إضافة رسمية إلى بروتوكول سياق النموذج (Model Context Protocol). أُعلن عنها في 26 يناير 2026، وتتيح للأداة أن تُرجع واجهة تفاعلية تُعرض مباشرةً في نافذة الدردشة، لا نصًا أو JSON فقط. المخططات والنماذج ولوحات المعلومات والمشاهد ثلاثية الأبعاد كلها تعيش داخل المحادثة، بجانب إجابة النموذج.

من الردود النصية إلى الواجهات الحية

أداة MCP العادية دالة. يستدعيها النموذج، ويحصل على بيانات، ثم يصف النتيجة نثرًا. ينجح ذلك ما دامت البيانات بسيطة، فإذا كانت جدولًا من 40 صفًا أو مسارًا عبر مدينة، يصبح النثر واجهة سيئة.

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

لم تأتِ الفكرة من فراغ. فهي تستند إلى جهدين مجتمعيين: مشروع MCP-UI بقيادة Ido Salomon وLiad Yosef، وإطار Apps SDK من OpenAI. عملت Anthropic وOpenAI على مواصفة مشتركة واحدة بدلًا من إطلاق مواصفتين متنافستين، ولهذا يمكن لتطبيق واحد أن يستهدف المساعدين الاثنين.

موقع Claude وChatGPT

Claude وChatGPT هما المضيفان الكبيران، لكنهما ليسا وحدهما. يسرد مستودع ext-apps أيضًا VS Code وGoose وPostman وMCPJam ومفتش mcp-use وAlpic Playground بوصفها عملاء تعرض هذه التطبيقات.

💡 دعم المضيفين يختلف. MCP Apps مواصفة، ويقرر كل عميل مدى تطبيقه لها. اختبر تطبيقك في كل مضيف يهمك قبل أن تعد المستخدمين بشيء.

تطبيقات المثال الرسمية

يحتوي مستودع modelcontextprotocol/ext-apps على نحو 18 تطبيقًا مثالًا، وتُنشر خوادم الأمثلة كحزم @modelcontextprotocol/server-<name>، لذا يمكنك تجربة أحدها دون كتابة سطر شيفرة. إليك القائمة في لمحة.

الخرائط والمشاهد ثلاثية الأبعاد

يعرض مثال Map كرة أرضية ثلاثية الأبعاد باستخدام CesiumJS. اطلب من المساعد عرض مدينة، فتطير الكرة الأرضية إليها. يمكنك سحبها وتكبيرها وإمالتها كأي تطبيق خرائط، لأنها واجهة حية وليست لقطة شاشة. تتحدث الواجهة مع المضيف عبر القناة نفسها التي تستخدمها كل الأشياء الأخرى، لذا قد يؤثر ما يفعله المستخدم على الخريطة في ما سيقوله النموذج لاحقًا.

يدفع Three.js وShaderToy الفكرة نفسها نحو الرسوميات. الأول يعرض مشاهد ثلاثية الأبعاد تفاعلية، والثاني يشغّل شيدرات GLSL مباشرةً. لا يحتاج أي منهما إلى رحلة ذهاب وإياب إلى الخادم مع كل إطار، وهذا يثبت أن العرض المكثف على GPU يعمل بكفاءة داخل البيئة المعزولة. إذا كانت أداتك تُرجع هندسة أو تضاريس أو أي شيء مكاني، فهذان المثالان هما الأولى بالنسخ.

لوحات المعلومات والمخططات

التحليلات هي المجال الذي يحقق فيه الواجهة التفاعلية أسرع عائد. يعرض Cohort Heatmap الاحتفاظ بالمستخدمين عبر المجموعات. ويرسم Customer Segmentation مخططات انتشار وفقاعات مع عناقيد يمكنك فحصها. ويبث System Monitor مقاييس نظام التشغيل مع تغيّرها، ويرسم عرض مخطط روابط الويكي مخططًا يمكنك تتبعه عقدة بعد عقدة.

كل واحد منها يستبدل إجابة طويلة وصعبة القراءة بشيء يمكنك مسحه في ثانيتين. يُعد System Monitor المثال الذي يجب دراسته إذا كانت بياناتك تتغير أثناء نظر المستخدم إليها، لأنه يوضح كيف يمكن للعرض أن يستمر في التحديث بعد وصول النتيجة الأولى.

المنزلقات وأدوات التخطيط

يجمع Budget Allocator بين المنزلقات والمخططات، فيمكنك نقل الأموال بين الفئات ومراقبة الإجماليات وهي تتغير فورًا. ويفعل Scenario Modeler الشيء نفسه مع توقعات SaaS: غيّر افتراضات النمو والتكلفة، فيعاد رسم منحنى الإيرادات. هذان المثالان من أفضل الأمثلة التعليمية في المستودع، لأن النمط بسيط: يحرّك المستخدم عنصر تحكم، ويعيد التطبيق الحساب، ويُحدَّث المخطط.

💡 نصيحة: إذا كان الحساب بسيطًا وخفيفًا، فنفّذه داخل العرض. احتفظ باستدعاءات الأدوات للبيانات الموجودة على خادمك.

المستندات والموسيقى والوسائط

يقدّم PDF Server المستند على دفعات، فلا يُضطر الملف الكبير إلى الوصول دفعة واحدة. ويحوّل Sheet Music نوتات ABC إلى مقطوعة قابلة للقراءة. ويبث Video Resource فيديو ثنائيًا عبر MCP، ويتولى Transcript تحويل الكلام إلى نص، ويقرأ Say Demo النص بصوت مسموع، ويولّد تطبيق QR Code رمزًا قابلًا للمسح في استدعاء واحد. كل منها صغير، ويُظهر نوعًا مختلفًا من الحمولات يمكن للتطبيق التعامل معه.

منتجات تعمل اليوم بالفعل

شركاء الإطلاق

ذكر الإعلان عشرة شركاء إطلاق: Amplitude وAsana وBox وCanva وClay وFigma وHex وmonday.com وSlack وSalesforce. وتضمنت حالات الاستخدام التي وصفت حول الإطلاق التصميم التعاوني، ولوحات استكشاف البيانات، وتنسيق المشاريع، والاستجابة للحوادث. بعبارة أخرى، هي الأنماط نفسها التي رأيتها للتو في العروض، مطبقة على أدوات يدفع الناس ثمنها أصلًا.

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

ما الذي يراه المستخدمون فعلًا

في الدردشة، يظهر تطبيق MCP App على شكل لوحة داخل المحادثة. يمكن للمستخدم التفاعل معها مباشرة، ويبقى النموذج جزءًا من التبادل. في الخلفية، يطلب المضيف موافقة المستخدم قبل تشغيل الأدوات، وكل رسالة بين العرض والمضيف هي رسالة JSON-RPC يمكن تسجيلها ومراجعتها.

يميل الفرق إلى تبني هذا أسرع في أعمال المراجعة. يطرح شخص سؤالًا في الدردشة، فتظهر اللوحة، ويستطيع الجميع حول الطاولة الإشارة إلى المخطط نفسه بدلًا من قراءة الفقرة نفسها.

كيف يعمل تطبيق واحد من الداخل

يتكون كل تطبيق MCP من ثلاثة أجزاء: أداة ومورد وعرض.

الأداة والمورد والعرض

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

import {
  registerAppResource,
  registerAppTool,
  RESOURCE_MIME_TYPE,
} from "@modelcontextprotocol/ext-apps/server";

registerAppTool(
  server,
  "get-time",
  {
    title: "Get Time",
    description: "Returns the current server time.",
    inputSchema: {},
    _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 }] };
  },
);

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

لاحظ أن الأداة ما زالت تُرجع محتوى نصيًا عاديًا. فالمضيف الذي لا يدعم MCP Apps يحصل على إجابة مفيدة، والمضيف الذي يدعمها يحصل على الواجهة فوقها.

استدعاء الأدوات من الواجهة

داخل iframe، تتولى الفئة App من @modelcontextprotocol/ext-apps الحوار مع المضيف. تستلم نتيجة الأداة، ويمكنها استدعاء أدوات خادم خاصة بها:

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

const app = new App({ name: "Get Time App", version: "1.0.0" });

app.ontoolresult = (result) => {
  const time = result.content?.find((c) => c.type === "text")?.text;
  serverTimeEl.textContent = time ?? "[ERROR]";
};

getTimeBtn.addEventListener("click", async () => {
  const result = await app.callServerTool({ name: "get-time", arguments: {} });
});

app.connect();

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

إذا كنت تبني باستخدام React، تأتي الحزمة بخطافات في @modelcontextprotocol/ext-apps/react، منها useApp وuseHostStyles. وخلف الكواليس يتحدث الطرفان عبر PostMessageTransport، وهي قناة رسائل iframe مغلّفة لتعمل مع MCP.

لماذا تهم البيئة المعزولة

يشغّل تطبيق دردشة يعرض شيفرة واجهة من خادم طرف ثالث شيفرةً لغيره بجانب محادثتك. يفترض التصميم كله أن هذه الشيفرة غير موثوقة، وهذا أمر جيد.

أربع طبقات حماية

• إطارات iframe المعزولة (Sandboxed iframes) تقيّد الأذونات والوصول إلى الشبكة، فلا يستطيع العرض فعل سوى ما يسمح به المضيف.
• القوالب المعلنة مسبقًا تعني أن المضيف يعرف أي واجهة ستستخدمها الأداة قبل تشغيلها، ما يجعل حقن محتوى مفاجئ أصعب بكثير.
• رسائل JSON-RPC القابلة للتدقيق تحوّل كل تبادل بين العرض والمضيف إلى سجل يمكنك فحصه.
• موافقة المستخدم مطلوبة قبل تشغيل الأدوات، فلا يمكن للوحة أن تتصرف نيابةً عنك بصمت.

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

ابنِ تطبيقك الخاص في بضع ساعات

اختر قالب بداية

يتضمن المستودع تطبيقات بداية أساسية بلغات React وVue وSvelte وPreact وSolid وJavaScript الخام. اختر القالب الذي يطابق مجموعة أدوات الواجهة الأمامية التي يستخدمها فريقك، وانسخه، واستبدل أداة المثال بأداتك. يبقى جزء الخادم كما هو مهما كان القالب الذي تختاره.

دع مهارات الوكلاء تتولى الإعداد

يتضمن المستودع أيضًا أربع مهارات للوكلاء تؤتمت الأجزاء الروتينية:

• create-mcp-app يُنشئ تطبيق MCP جديدًا من الصفر.
• migrate-oai-app يحوّل تطبيق OpenAI موجودًا إلى المعيار المشترك.
• add-app-to-server يضيف واجهة إلى أدوات على خادم تشغّله بالفعل.
• convert-web-app يحوّل تطبيق ويب موجودًا إلى تطبيق هجين للويب وMCP.

أخطاء تصميم يجب تجنبها

1. عروض ثابتة في الشيفرة. لوحة الدردشة ضيقة، وعلى الهاتف تكون أضيق. ابنِ للحجم الأصغر أولًا.
2. تجاهل سمة المضيف. استخدم useHostStyles أو ما يعادله حتى تتطابق لوحتك مع الوضع الفاتح والداكن في المضيف.
3. استدعاءات أدوات لحسابات بسيطة. كل استدعاء يمر عبر المضيف، لذا أبقِ الحسابات التافهة داخل العرض.
4. غياب بديل نصي. أرجع محتوى نصيًا مفيدًا من كل أداة، كما يفعل خادم البداية، لأن ليس كل مضيف يعرض الواجهة.

استخدم Claude Sonnet 5 على PicassoIA

كتابة الخادم وحزمة HTML وشيفرة الربط عمل كتابة في معظمه، وClaude Sonnet 5 على PicassoIA مصمم لهذا تحديدًا. يتعامل مع مهام البرمجة متعددة الخطوات واستخدام الأدوات، ويقرأ الصور، لذا يمكن إرسال رسم تخطيطي سلكي مباشرةً مع الطلب.

1. افتح صفحة النموذج. اذهب إلى Claude Sonnet 5 وابحث عن مربع الأمر النصي.
2. اكتب الأمر النصي. صف الأداة ومخطط مدخلاتها وما يجب أن يعرضه العرض. مثال: "اكتب تطبيق MCP بأداة واحدة هي show-budget، وعرض React بثلاثة منزلقات تعيد رسم مخطط أعمدة. استخدم @modelcontextprotocol/ext-apps."
3. اضبط مستوى الجهد. يتراوح إعداد effort من منخفض إلى أقصى. المنخفض هو الافتراضي، ويوقف التفكير ويجيب بأسرع وقت. انتقل إلى مرتفع أو أقصى عندما يلمس التطبيق عدة ملفات.
4. أرفق رسمًا سلكيًا. استخدم حقل image لرسم تخطيطي للوحة. يصغّر إعداد max_image_resolution الصورة قبل الإرسال، وهذا يوفر الوقت والتكلفة.
5. أضف موجّه نظام. ثبّت مجموعة الأدوات مرة واحدة، مثل "TypeScript وReact، أرجع الملفات الكاملة فقط"، وأعد استخدامه في المشروع كله.
6. قسّم الطلبات الكبيرة. يصل الرد الواحد إلى حد أقصى قدره 8,192 توكن، لذا اطلب ملف الخادم أولًا ثم ملف العرض.

إذا أردت رأيًا ثانيًا في الأمر النصي نفسه، فإن GPT 5.6 Sol متاح أيضًا على المنصة ومصمم للمهام البرمجية المعقدة.

💡 تحقّق من المخرجات مقابل دليل البدء السريع. قد تخمّن النماذج أسماء API قديمة أحيانًا. قارن الاستيرادات واستدعاء registerAppTool مع المقاطع الموجودة أعلاه قبل تشغيل أي شيء.

جرّبه على PicassoIA

كل واجهة جيدة تبدأ صورة في ذهنك. قبل أن تكتب سطرًا واحدًا من الشيفرة، أنشئ النماذج الأولية والصور الرئيسية ومشاهد العرض لتطبيقك على PicassoIA. يصنع Seedream 4.5 لقطات 4K حادة من وصف قصير، وFlux 2 Pro خيار قوي للمشاهد بأسلوب الصور الفوتوغرافية، وGPT Image 2 يتبع الأوامر الطويلة بدقة، وP Image يعيد الصور في نحو ثانية واحدة عندما تريد التكرار بسرعة.

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

اختر نموذجًا، واكتب أول أمر نصي لك، وشاهد ما يمكنك إنشاءه. الكتالوج الكامل موجود على picassoia.com/en/all-models.