Vercel AI SDK v5 يتيح لمطوري React نقل استدعاءات نماذج اللغات الكبيرة (LLM) إلى الخادم، مما يحافظ على سرية مفاتيح API ويقلل من زمن الاستجابة الناتج عن تدفق أجزاء النص في المتصفح. كما تفصل البنية الجديدة القائمة على النقل (transport-based architecture) معالجة الحالة، بحيث يظل كود واجهة المستخدم (UI) خفيفاً بينما يتولى SDK إدارة التدفق، والسجل، واستدعاءات الأدوات.

لماذا كان النهج القديم يفسد النموذج

كانت معظم روبوتات الدردشة المبنية باستخدام React قبل الإصدار v5 تقوم بتدفق مخرجات النموذج مباشرة إلى العميل (client). وقد أجبر ذلك المطورين على تضمين المفتاح السري لـ LLM في كود الواجهة الأمامية (front-end)، مما يجعله مكشوفاً في فاحص الشبكة (network inspector) بالمتصفح. كما استخدمت الفرق useState لتخزين كل رمز (token) وارد، مما يسبب إعادة صيرورة (re-render) مع كل جزء صغير. أدى ذلك إلى اهتزاز واجهة المستخدم وتحول الكود إلى فوضى متشابكة من التراجعات (callbacks).

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

ما الذي يغيره الإصدار v5 في الجوهر

  • بنية قائمة على النقل (Transport-Based Architecture) – يعامل SDK الآن الاتصال بـ LLM كطبقة نقل نمطية (modular transport layer). تنطلق الاستدعاءات من مسار API على الخادم، لذا لا يغادر المفتاح السري الجزء الخلفي (backend) أبداً. تقوم طبقة النقل بتجريد بروتوكول التدفق، مما يوفر تدفقاً نظيفاً ومحدداً لأنواع الرسائل (typed stream) إلى الواجهة الأمامية.

  • استدعاءات أدوات محددة الأنواع (Typed Tool Invocations) – عندما يقرر النموذج استدعاء أداة (مثل البحث عن الطقس أو جلب التقويم)، يقوم SDK بتغليف الطلب في حمولة محددة النوع (typed payload). تقرأ الواجهة الأمامية شكل الحمولة مباشرة، مما يلغي الحاجة للتحليل اليدوي (ad-hoc parsing) ويقلل أخطاء وقت التشغيل (runtime errors).

  • إدارة حالة منفصلة (Decoupled State Management) – لم يعد خطاف useChat يفرض مخزناً واحداً للحالة. بل يوفر استدعاءات (callbacks) وأدوات مساعدة يمكن لأي مكتبة حالة — مثل Zustand أو Redux أو React context العادي — استهلاكها. تظل مكونات واجهة المستخدم مركزة على العرض بينما يقوم SDK بالمهام الشاقة.

سير عمل عملي

  1. منطق LLM في جانب الخادم (Server-side LLM logic) – في مسار API، قم باستدعاء streamText (أو المساعد المكافئ للتدفق). يقوم SDK بتدفق مخرجات النموذج إلى العميل عبر اتصال آمن، مما يبقي مفتاح API بعيداً عن المتصفح.
  2. واجهة المستخدم في جانب العميل (Client-side UI) – استورد useChat في مكون React. يعيد الخطاف قائمة الرسائل الحالية، ودالة لإرسال مدخلات المستخدم الجديدة، وأعلام الحالة (status flags). ولأن الحالة تعيش في مكان آخر، يمكنك توصيل أي مدير حالة تستخدمه بالفعل.
  3. معالجة الأدوات (Tool handling) – عندما يصدر النموذج استدعاء أداة، يقوم SDK بتسليم كائن مهيكل (structured object) إلى العميل. يمكنك عرض أداة طقس، أو منتقي تقويم، أو أي عنصر واجهة مستخدم مخصص دون كتابة كود مزامنة يدوي.

النتيجة هي فصل نظيف: الخادم يمتلك جميع تفاعلات LLM، والعميل يمتلك العرض فقط. لا مزيد من تحليل التدفق الخام، ولا مزيد من تسريب المفاتيح العرضي، ولا مزيد من اهتزاز واجهة المستخدم الناتج عن إعادة الصيرورة لكل رمز.

من المستفيد، ومن قد يتردد

ما الذي يجب مراقبته لاحقاً

الخلاصة

يعيد Vercel AI SDK v5 تشكيل تطوير روبوتات الدردشة في React عبر نقل استدعاءات LLM إلى الخادم، وتقديم بيانات أدوات محددة الأنواع، وتحرير الواجهة الأمامية من إدارة الحالة منخفضة المستوى. يعالج هذا التحول أكبر مشكلتين — كشف الأسرار واهتزاز واجهة المستخدم — مع السماح للمطورين بالاحتفاظ بالتحكم في مكدس الحالة (state stack) الخاص بهم.