واجهة المستخدم التوليدية Claude، وهي الميزة التي أطلقتها Anthropic مؤخراً لعرض عناصر تفاعلية داخل محادثات الدردشة، خضعت لعملية تفكيك تقني على يد المطور Michael Livs، الذي أعقب ذلك ببناء تطبيق مفتوح المصدر يعمل في بيئات الطرفيات.
وثّق Livs التحقيق التقني الكامل في مدونته، إذ تناول طريقة تنفيذ Anthropic للميزة وآلية عمل بنية البث وكيفية إعادة إنتاج السلوك خارج بيئة المتصفح.
كيف تعمل واجهة المستخدم التوليدية Claude من الداخل
لا تعرض الميزة HTML كجزء من مخرجات markdown الخاصة بـ Claude. بدلاً من ذلك، يستدعي Claude أداة داخلية تُسمى show_widget، ويمرر HTML الخام كحمولة معامل. تقبل الأداة أربعة حقول: علامة منطقية (i_have_seen_read_me)، ومعرّف بصيغة snake_case، و1 إلى 4 رسائل تحميل، وجزء HTML الخاص بالعنصر.
قبل استدعاء show_widget، يجب على Claude أولاً استدعاء أداة read_me التي تحمّل إرشادات التصميم عند الطلب. تقبل الأداة معامل modules بقيم مثل interactive وchart وdiagram وmockup وart. يُعيد كل وحدة مجموعة فرعية مختلفة من نظام التصميم الداخلي لـ Anthropic، مما يُبقي موجّه النظام الأساسي خفيفاً ويحمّل القواعد المتخصصة عند الحاجة فقط.
توصّل Livs أيضاً إلى أن العناصر لا تُعرض داخل iframes. تعمل متغيرات CSS بشكل صحيح، وتكون دالة sendPrompt() الموجودة في الصفحة الأم متاحة لكود العنصر، كما أن الخلفية شفافة — وهي مؤشرات على حقن مباشر في DOM الصفحة الأم. يتمثل حد الأمان في سياسة أمان المحتوى التي تقصر مصادر السكريبت على قائمة CDN محدودة.
الفرق بين واجهة المستخدم التوليدية وميزة Artifacts في Claude
رسم Livs تمييزاً واضحاً بين أداة العرض الجديدة وميزة Artifacts الموجودة في Claude. تُعدّ Artifacts مخرجات دائمة تظهر في لوحة جانبية مع زر تنزيل، وتستخدم مجموعة ثابتة من المكتبات المجمّعة مسبقاً. في المقابل، تعرض أداة العرض التوليدية المحتوى مضمّناً في المحادثة، وهي مؤقتة، ويمكنها تحميل أي مكتبة من قائمة CDN المسموح بها في وقت التشغيل.
يختلف أيضاً أسلوب الاستدعاء؛ فالأوامر الموجهة نحو المخرجات مثل “ابنِ لي آلة حاسبة” تُنتج Artifacts، بينما تُنتج الأوامر التفسيرية مثل “أرني كيف يعمل الفائدة المركبة” عناصر مضمّنة. علاوة على ذلك، تتيح قائمة CDN المسموح بها تحميل مكتبات مثل Chart.js وD3 وThree.js عند الطلب.
بناء تطبيق للطرفيات باستخدام Glimpse وmorphdom
لإعادة إنتاج التجربة في بيئة الطرفية، استخدم Livs مكتبة Glimpse، وهي مكتبة macOS أصلية تفتح نافذة WKWebView في أقل من 50 ميلي ثانية عبر ملف Swift صغير مع غلاف Node.js. لا تتطلب المكتبة تثبيت Electron وتدعم الاتصال ثنائي الاتجاه بصيغة JSON بين WebView والعملية المضيفة.
تُسجّل الإضافة أداتين تعكسان نمط Claude: visualize_read_me لتحميل إرشادات التصميم بشكل كسول، وshow_widget لفتح نافذة أصلية بـ HTML المُولَّد. يُبنى التطبيق على pi، وهو وكيل برمجة قائم على الطرفية يعتمد على الذكاء الاصطناعي ويوحّد أحداث البث عبر مزودين من بينهم Anthropic وOpenAI وGoogle.
تطلّب البث السلس عدة تكرارات. أدى استبدال المستند بالكامل عند كل رمز إلى وميض الصفحة بالكامل. فشل إلحاق DOM البسيط لأن المتصفحات تُغلق تلقائياً العلامات غير المكتملة في HTML الجزئي، مما ينتج هياكل شجرية غير متوقعة. يستخدم الحل النهائي مكتبة morphdom لمقارنة DOM وتطبيق تصحيحات دنيا عند كل تحديث مع تحريك العقد الجديدة فقط بتأثير تلاشي CSS.
إرشادات التصميم المستخرجة تكشف النظام الداخلي لـ Anthropic
من خلال فحص طلبات الشبكة في أدوات المطور بالمتصفح، استخرج Livs النص الكامل لإرشادات التصميم الخاصة بـ Anthropic كما تُعيدها أداة read_me. تغطي الإرشادات بنية HTML المُحسَّنة للبث، وحظر التدرجات والظلال أثناء البث، ولوحة ألوان مكونة من تسعة تدرجات بسبعة مستويات لكل منها، وقواعد هندسة مخططات SVG، وأنماط Chart.js المحددة، ورموز مكونات واجهة المستخدم للنماذج الأولية.
استدعى Livs أداة read_me بجميع تركيبات الوحدات الخمس عبر جلسات متعددة، ثم كتب سكريبتاً لتحليل الاستجابات وتقسيمها عند حدود العناوين وإزالة الأقسام المشتركة المكررة والتحقق من أن إعادة دمج الأقسام ينتج مخرجات مطابقة للبايت. أسفر ذلك عن 10 أقسام فريدة تغطي الوحدات الخمس، مع تطابق تام في أربع من خمس وحدات وفارق مسافة بيضاء واحدة في الخامسة.
تبلغ الإضافة مفتوحة المصدر نحو 350 سطراً من TypeScript موزعة على ملفين، وهي متاحة على GitHub تحت مستودع pi-generative-ui. يعتمد المشروع على حزمة glimpseui ويحمّل morphdom من CDN في وقت التشغيل داخل WebView. فضلاً عن ذلك، تكتشف pi الإضافة تلقائياً عند بدء التشغيل دون الحاجة إلى أي إعداد إضافي.