Beyond Components: Designing Generative UI for MCP Apps — Ruben Casas, Postman

يروي المتحدث تجربته الشخصية في نوفمبر من عام 2022، عندما كان يعتمد على نموذج ChatGPT لإنشاء المكونات البرمجية لواجهات المستخدم. كانت طريقته تتلخص في الذهاب إلى موقع ChatGPT وكتابة موجه يطلب فيه إنشاء مكون برمجى معين، ومن ثم يقوم بنسخ الكود البرمجي الناتج ولصقه في مشروعه. وإذا واجهته أي مشكلات أو أخطاء، يعاود كتابة موجه جديد يطلب فيه تصحيح الخطأ وإرسال الكود داخل كتل برمجية مخصصة، ثم يقوم بالنسخ واللصق مجدداً وتكرار هذه العملية المعقدة. يطلق المتحدث على هذا الأسلوب اسم 'برمجة الرجل الفقير'، وعلى الرغم من بدائيتها وصعوبتها، إلا أنها كانت تجربة مثيرة للغاية في تلك البدايات لأنها برهنت على قدرة النماذج اللغوية على كتابة واجهات مستخدم ملموسة وفعالة.

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

شارك المتحدث تجربة شخصية مذهلة مر بها مؤخراً عندما قرر اختبار أحد النماذج المتقدمة جداً مثل نموذج GPT-5.2 ونموذج Claude Opus 4.5 لإعادة كتابة مدونته الشخصية. لم يبذل المتحدث جهداً كبيراً في التوجيه، بل كتب طلباً بسيطاً للغاية ومختصراً يتكون من جملة واحدة: 'أعد كتابة مدونتي'. كانت النتيجة مبهرة وغير متوقعة؛ إذ لم يكتفِ النموذج بإعادة تصميم وتطوير المدونة بأسلوب رائع فحسب، بل ابتكر من تلقاء نفسه ميزات تفاعلية معقدة لم يطلبها المتحدث إطلاقاً، حيث أضاف صندوق بحث تفاعلي غاية في الأناقة يتميز بحركات ضبابية ناعمة، بالإضافة إلى تضمين معايير تيسير الوصول لذوي الاحتياجات الخاصة بشكل جاهز ومباشر. هذه التجربة جعلت المتحدث يدرك ويتصالح مع حقيقة أن الذكاء الاصطناعي بات قادراً على كتابة أكواد واجهات أمامية أفضل منه بكثير وبدون أي كبرياء مهني.

إبراز القفزة التقنية الهائلة للنماذج اللغوية الحديثة وقدرتها العالية على فهم سياق التصميم والابتكار الذاتي للميزات دون طلب صريح، مما يثبت تفوق الذكاء الاصطناعي التوليدي في جوانب التصميم والبرمجة الحديثة.

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

تقديم مثال عملي وواضح على نهج واجهات المستخدم الثابتة والمنسقة بواسطة الذكاء الاصطناعي، حيث يعمل النموذج كمنسق وموجه ذكي للبيانات الخام وتحويلها لمكونات عرض ثابتة ومحددة مسبقاً.

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

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

يروي المتحدث تجربة عملية مبتكرة قام بتصميمها بنفسه أثناء عمله في شركة Postman، حيث قام ببناء وكيل ذكي مخصص للطقس لاستكشاف قدرات التوليد اللحظي لواجهات المستخدم. يقوم هذا الوكيل عند تفعيله بالذهاب فوراً واستدعاء واجهة برمجة تطبيقات الطقس لجلب البيانات الحية، وفي نفس الوقت يقوم بتأليف نكتة طريفة ومبتكرة تلائم حالة الطقس الحالية، ثم يولد أكواد HTML و CSS و JavaScript متكاملة وتفاعلية في استدعاء برمجى واحد ومباشر. النتيجة كانت ظهور واجهة مستخدم تفاعلية فريدة وممتعة للغاية تم تصميمها وإنشاؤها بالكامل على الطاير وبشكل فوري من قِبل الوكيل الذكي، دون الاعتماد على أي قوالب مسبقة الصنع أو مكونات برمجية مخزنة مسبقاً في النظام.

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

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

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

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

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

واجهة المستخدم التوليدية (Generative UI)

مفهوم متقدم في تطوير الويب والذكاء الاصطناعي حيث لا يتم بناء واجهات المستخدم مسبقاً بواسطة المبرمجين، بل يقوم نموذج الذكاء الاصطناعي بتوليد الواجهة (HTML، CSS، وJavaScript) بشكل حي وديناميكي في وقت التشغيل (Runtime) بناءً على سياق واحتياج المستخدم اللحظي. مثال على ذلك: قيام مساعد ذكي بتوليد واجهة مخصصة لعرض الطقس تحتوي على رسوم متحركة وميزات وصول ذوي الاحتياجات الخاصة دون وجود كود مسبق لهذه الواجهة.

بروتوكول سياق النموذج وتطبيقاته (Model Context Protocol - MCP Apps)

بروتوكول مفتوح ومعيار تقني يتيح لبيئات الذكاء الاصطناعي والعملاء (مثل Claude أو ChatGPT) الاتصال بمصادر البيانات الخارجية والأدوات وواجهات المستخدم بشكل آمن ومنظم. يعمل كآلية توصيل آمنة لواجهات المستخدم التوليدية من خلال عزلها في بيئة وهمية ثنائية (Double iFrame Sandbox) لضمان عدم تشغيل أكواد خبيثة. مثال: استخدام تطبيق Excalidraw كميزة مدمجة داخل مساعد الذكاء الاصطناعي للرسم التفاعلي المشترك.

واجهة المستخدم التعريفية (Declarative UI)

مرحلة وسيطة بين الواجهات الثابتة والتوليدية الكاملة، حيث يعتمد المطورون على بناء نظام تصميم ومكونات ثابتة مسبقاً، بينما يقوم نموذج الذكاء الاصطناعي بتوليد ملف توصيفي فقط بصيغة JSON أو YAML يحدد كيفية ترتيب هذه المكونات وبياناتها وتفاعلها، وتقوم أداة رندر على جهة العميل بتحويل هذا التوصيف إلى واجهة حقيقية. مثال: استخدام أداة JSON Render المطورة من Vercel لتشكيل واجهات مرنة دون استهلاك كم كبير من التوكينات (Tokens).

الواجهة المدفوعة بالخادم (Server-driven UI)

نمط معماري لتصميم واجهات المستخدم يتم فيه اتخاذ قرار شكل وتخطيط الواجهة وطبيعة المكونات المعروضة من جهة الخادم بدلاً من كتابتها بشكل صلب داخل تطبيق العميل. يُستخدم هذا النمط لتحقيق تخصيص هائل وفوري لتجربة المستخدم. مثال: الصفحة الرئيسية لشبكة Netflix التي تختلف عناصرها وتصميمها كلياً من مستخدم لآخر بناءً على توصيات الخادم.

المكونات التوليدية (Generative Components)

وحدات برمجية تفاعلية يتم صياغة منطق عملها وتصميمها بالكامل بواسطة نماذج لغوية كبرى (LLMs) عند الطلب، مما يتيح تجاوز قيود نظم التصميم المغلقة ومكوناتها الثابتة. مثال: قيام المساعد الذكي بكتابة كود حقل بحث تفاعلي مع تأثير بصري ضبابي (Blur Animation) وميزات تيسير الوصول بمجرد طلب المستخدم البحث في المدونة.

التعاون بين الإنسان والوكيل (Human-Agent Collaboration / Shared Artifacts)

نمط تفاعلي يتجاوز مجرد إرسال الأوامر النصية واستقبال الإجابات (Chat)، حيث يتشارك الإنسان ووكيل الذكاء الاصطناعي مساحة عمل مرئية موحدة (مثل لوحة رسم بياني) يمكن لكلا الطرفين التعديل عليها، والنقر، وتحريك العناصر، والتراجع عن الخطوات بشكل تفاعلي متزامن.

"And now it can write better front-end code than me. And you know, I don't mind. No ego. It's just reality."

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

"Interacting with this new computer is like talking to the terminal. You have direct access to this operating system. And the GUI has not been invented yet."

اقتباساً من الخبير أندريه كارباتي، يوضح المتحدث أننا نشهد ولادة فئة جديدة تماماً من الحواسيب (الذكاء الاصطناعي الفائق)، لكننا لا نزال نتفاعل معها بطريقة بدائية تشبه استخدام الشاشات السوداء وسطور الأوامر النصية في فترة السبعينيات. الفكرة العميقة هنا هي أن الواجهة الرسومية الأصلية والمناسبة للذكاء الاصطناعي لم تُبتكر بعد، والدردشة الحالية ليست سوى مرحلة انتقالية.

"When TV came out, the first TV shows were radio shows with cameras because they could not imagine what you could do with this new technology."

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