واجهة المستخدم التوليدية: عندما ترسم الواجهة نفسها

الويب الثابت ميت

منذ اختراع HTML، كان النموذج:

1. يقوم المطور بتصميم تخطيط (الرأس، المحتوى، التذييل).
2. المطور يكتب التعليمات البرمجية.
3. صفحة زيارات المستخدم.
4. يرى المستخدم بالضبط ما صممه المطور.

هذه واجهة المستخدم الثابتة. ومن الناحية المثالية، فهو يناسب 80% من المستخدمين. أما الـ 20% الأخرى فيتعاملون معها فقط. إذا سأل المستخدم “أرني رحلات الطيران إلى باريس”، نعرض قائمة. إذا سأل المستخدم “مقارنة الطقس في باريس ولندن”، نعرض إجابة نصية. لماذا؟ لأننا لم نصمم “أداة مقارنة الطقس”. لقد صممنا فقط “أداة قائمة الرحلات الجوية”. نحن مقيدون بما توقعنا أن المستخدم يريده.

** واجهة المستخدم التوليدية ** تكسر هذا الحد. يقرر الذكاء الاصطناعي في وقت التشغيل المكونات التي سيتم عرضها. المستخدم: “قارن الطقس”. الذكاء الاصطناعي: يقرر عرض مكونين <WeatherCard /> جنبًا إلى جنب. المستخدم: “احجز رحلة.” الذكاء الاصطناعي: يقرر تقديم <FlightBookingForm />. تتكيف الواجهة مع النية.

لماذا يناقش Maison Code هذا الأمر

في Maison Code، نحن مهووسون بمستقبل “Zero UI”. نحن نؤمن بأن الرفاهية المطلقة هي الواجهة التي تتوقع احتياجاتك. بالنسبة لعملائنا المتميزين، فإن لوحة التحكم الثابتة ليست كافية. إذا طلب أحد عملاء VIP “خط سير رحلة نهاية الأسبوع في كيتو”، فلا ينبغي أن يحصل على كتلة نصية. يجب أن يحصلوا على خريطة، وقائمة بحجوزات الفنادق، وأداة الطقس، التي يتم إنشاؤها على الفور. نحن نطبق Vercel AI SDK وReact Server Components (RSC) لبناء هذه التجارب التكيفية. نتحدث عنه لأن هذا هو أكبر تحول في هندسة الواجهة الأمامية منذ React نفسها.

التقنية: Vercel AI SDK (RSC)

يتيح Vercel AI SDK (على وجه التحديد الوضع allow-rsc) لـ LLM دفق React Components كجزء من الاستجابة.

كيف يعمل (التدفق)

1. استعلام المستخدم: “أرني سعر سهم Apple.”
2. إجراء الخادم: يرسل المطالبة إلى GPT-4.
3. استدعاء الوظائف: نحن نقدم أدوات لـ GPT-4.

   الأدوات: {
     شو_ستوك: {
       الوصف: "إظهار مخطط مؤشر الأسهم"،
       المعلمات: z.object({ الرمز: z.string() })
     }
   }

4. قرار LLM: نص GPT-4 “اتصل بـ show_stock بالرمز AAPL”.
5. تنفيذ الخادم: ينفذ الخادم الوظيفة. ولكن بدلاً من إرجاع JSON، فإنه يُرجع React Component.

   // الخادم/actions.tsx
   وظيفة غير متزامنة show_stock({ الرمز }) {
     بيانات ثابتة = انتظار fetchStock(symbol);
     إرجاع <StockChart data={data} color="green" />;
   }

6. البث: تقوم واجهة المستخدم ببث <StockChart /> إلى العميل. العميل يجعلها على الفور.

مثال على الكود: بناء محادثة توليدية

// التطبيق/action.tsx
استيراد { createAI، getMutableAState، render } من "ai/rsc"؛
استيراد {ض} من "zod"؛

const ai = createAI({
  الإجراءات: {
    SubmitUserMessage: غير متزامن (المحتوى: سلسلة) => {
      "استخدام الخادم";
      const aiState = getMutableAIState();
      
      const ui = انتظار التقديم({
        الموديل: "جي بي تي-4-تيربو"،
        المزود: openai,
        الرسائل: [{ الدور: "المستخدم"، المحتوى }]،
        الأدوات: {
          get_crypto_price: {
            الوصف: "احصل على سعر العملة المشفرة"،
            المعلمات: z.object({ العملة: z.string() })،
            تقديم: وظيفة غير متزامنة * ({ عملة }) {
              العائد <الدوار />؛ // حالة التحميل الفوري
              السعر الثابت = انتظار fetchPrice(coin);
              إرجاع <CryptoCard Coin={coin} السعر={price} />; // واجهة المستخدم النهائية
            }
          }
        }
      });
      
      العودة {المعرف: Date.now ()، العرض: واجهة المستخدم }؛
    }
  }
});

لاحظ العائد <Spinner />. هذا مذهل. يتعرف الذكاء الاصطناعي على النية (“أحصل على السعر”) ويعرض واجهة المستخدم قبل أن تصبح البيانات جاهزة. ثم يستبدل الدوار بالبطاقة. هذه واجهة مستخدم البث.

حالات الاستخدام للتجارة الإلكترونية

1. مقارنة المنتج: المستخدم: “أيهما أفضل للجري، Air Max أم Pegasus؟” الذكاء الاصطناعي: يُنشئ <ComparisonTable Products={[A, B]} /> لتسليط الضوء على الوزن والوسادة.
2. دليل المقاسات: المستخدم: “طولي 6 أقدام، ما هو حجمي؟” الذكاء الاصطناعي: يعرض <SizeChart Highlight="L" /> مخصصًا.
3. أداة إنشاء الحزم: المستخدم: “أحتاج إلى ملابس لحفل.” AI: يعرض <LookBook items={[Suit, Tie, Shoes]} /> باستخدام زر “إضافة الكل إلى سلة التسوق”.

تحدي التصميم

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

وجهة نظر المتشككين

“هذا مبالغة في الهندسة. فقط أرني النص.” نقطة مضادة: يصعب تحليل النص. إن قراءة عبارة “Apple ارتفعت بنسبة 5% إلى 150 دولارًا” أصعب من قراءة الرسم البياني الأخضر. يعالج الدماغ الصور أسرع بـ 60.000 مرة من النص. واجهة المستخدم التوليدية تدور حول كثافة المعلومات. فهو يسمح لنا بنقل البيانات المعقدة (الجداول والرسوم البيانية) في واجهة المحادثة دون إرباك المستخدم.

الأسئلة الشائعة

س: هل هو بطيء؟ ج: نعم، GPT-4 بطيء. ولهذا السبب نستخدم البث. يظهر النص/الدوار على الفور. يتم تحميل مكون واجهة المستخدم الثقيل بعد ثانية واحدة. إنه يشعر بالاستجابة.

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

الخلاصة

نحن ننتقل من “أشر وانقر” إلى “الوصف والاستلام”. واجهة المستخدم التوليدية هي الجسر. فهو يجمع بين مرونة الدردشة وسهولة استخدام واجهة المستخدم الرسومية. إنه مستقبل التفاعل البرمجي.

هل أنت مستعد لبناء المستقبل؟

إذا كنت تريد دمج واجهة المستخدم التوليدية في تطبيقك باستخدام Vercel AI SDK، Maison Code هو الشريك الخبير الذي تحتاجه. نحن نبني واجهات ذكية تتكيف مع مستخدميك.

اتصل بنا لتعيين مهندس ذكاء اصطناعي.

---

---

واجهة المستخدم التي ترسم نفسها؟

نحن نبني تجارب واجهة مستخدم توليدية باستخدام Vercel AI SDK ومكونات React Server. قم بتعيين مهندسينا المعماريين.