ما وراء الـ Prompt: هندسة مسارات عمل واجهات المستخدم التوليدية (Generative UI) باستخدام Expo و Vercel AI SDK

طوال الأشهر القليلة الماضية، كنت مهووسًا بمشكلة واحدة: فخ فقاعة الدردشة (The Chat Bubble Trap).

لقد رأينا جميعًا ذلك. تدمج LLM في تطبيق الجوال الخاص بك، وفجأة يبدو كل شيء وكأنه نسخة من Slack. لكن كمهندسي برمجيات، نعلم أن النص هو مجرد عنصر بدائي (primitive). لا يريد المستخدمون قراءة فقرة حول ميزانيتهم؛ بل يريدون رؤية مخطط بياني (chart). لا يريدون قراءة تعليمات حول كيفية حجز رحلة طيران؛ بل يريدون أداة حجز (widget) مملوءة مسبقًا بناءً على نيتهم.

في مشاريعي الأخيرة، كنت أدفع حدود الممكن باستخدام Expo و Vercel AI SDK، منتقلاً من Generative Text إلى Generative UI. إليك كيف أقوم بهندسة مسارات العمل هذه لإنشاء تجارب جوال قائمة على النوايا حقاً.

لحظة الإلهام: واجهة المستخدم كأداة (UI as a Tool)

جاء الاختراق عندما توقفت عن التفكير في LLM كمولد رسائل وبدأت في معاملته كـ منظم لحالة النظام (state-machine orchestrator).

باستخدام Vercel AI SDK (تحديداً ai/rsc أو نمط الأدوات الجديد generateText tools pattern)، يمكننا تعريف "أدوات" ليست فقط لجلب البيانات، بل للإشارة إلى تغييرات في واجهة المستخدم. في بيئة Expo، يعني هذا أن الخادم يبث إشارة (signal) تطلق مكون React Native محددًا وعالي الدقة على جانب العميل (client).

الهندسة المعمارية (The Architecture)

إليك مجموعة التقنيات (stack) التي أثبتت نجاحها معي:

1. Expo (React Native): لبيئة تشغيل متعددة المنصات.
2. Vercel AI SDK: للتعامل مع بروتوكول البث (streaming) ومنطق استدعاء الأدوات (tool-calling).
3. Next.js Route Handlers: لتكون بمثابة بوابة الذكاء الاصطناعي (AI gateway).

1. تعريف الأداة في الـ Backend

بدلاً من مجرد إرجاع نص، أقوم بتعريف أداة يمكن للنموذج استدعاؤها عندما يكتشف نية محددة للمستخدم (مثلاً: "أرني مصاريفي الأخيرة").

// app/api/chat/route.ts
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model: openai('gpt-4o'),
    messages,
    tools: {
      showSpendingChart: {
        description: 'Displays a visual chart of the user spending history.',
        parameters: z.object({
          data: z.array(z.object({
            category: z.string(),
            amount: z.number(),
          })),
          timeframe: z.string(),
        }),
      },
    },
  });

  return result.toDataStreamResponse();
}

2. استهلاك البث (Stream) في Expo

في جانب الجوال، يعد hook الـ useChat من @ai-sdk/react قويًا بشكل مدهش في بيئة Expo. المفتاح هو كيف نتعامل مع toolInvocations لتقديم المكون الصحيح.

// components/ChatScreen.tsx
import { useChat } from '@ai-sdk/react';
import { View, Text } from 'react-native';
import { SpendingChart } from './ui/SpendingChart';

export const ChatScreen = () => {
  const { messages } = useChat({
    api: 'https://your-backend.com/api/chat',
  });

  return (
    <View>
      {messages.map(m => (
        <View key={m.id}>
          <Text>{m.content}</Text>
          {m.toolInvocations?.map((toolInvocation) => {
             const { toolName, toolCallId, state, args } = toolInvocation;
             
             if (toolName === 'showSpendingChart' && state === 'result') {
               return <SpendingChart key={toolCallId} data={args.data} />;
             }
             return null;
          })}
        </View>
      ))}
    </View>
  );
};

جانب "الهندسة": دروس من أرض الواقع

1. صداع الـ Hydration

في React Native، لا نملك ميزة بعض خصائص البث المبنية على الـ DOM. وجدت أن إدارة حالة "التحميل" لاستدعاء الأداة أمر بالغ الأهمية. إذا قرر LLM استدعاء أداة، فهناك فجوة بين استدعاء الأداة وعودة البيانات. أقوم الآن دائمًا بتنفيذ حالة Skeleton داخل حلقة toolInvocation لضمان عدم حدوث قفزات (layout shift) في واجهة المستخدم.

2. زمن الاستجابة مقابل الدقة (Latency vs. Fidelity)

إنتاج ملف JSON ضخم لمخطط بياني يمكن أن يكون بطيئًا. بدأت في التجربة مع عمليات التوليد متعددة الخطوات (multi-step generations). الخطوة الأولى تولد تأكيدًا نصيًا ("بالتأكيد، دعني أحضر لك ذلك...") والخطوة الثانية (بالتوازي أو بالتتابع) تجلب بيانات واجهة المستخدم الثقيلة. هذا يحافظ على سلاسة واستجابة الواجهة.

3. المخططات المشتركة (Shared Schemas)

كانت إحدى أكبر نقاط الألم هي الحفاظ على تزامن مخططات Zod في Next.js backend مع واجهات TypeScript في تطبيق Expo. أوصي بشدة بإعداد Monorepo (Turborepo) هنا. مشاركة حزمة types بين تطبيق Expo وبوابة الذكاء الاصطناعي هي الطريقة الوحيدة للحفاظ على العقلانية مع نمو مكتبة واجهة المستخدم الخاصة بك.

لماذا هذا مهم

نحن ننتقل نحو عصر واجهات المستخدم التي تُبنى في وقت الاحتياج (Just-in-Time UI). بدلاً من بناء 50 شاشة مختلفة لكل حالة استثنائية محتملة، نقوم ببناء مكتبة من المكونات عالية الجودة ونترك للذكاء الاصطناعي مهمة تجميع مسار العمل بناءً على سياق المستخدم المحدد.

عندما تجمع بين قدرة Expo على تقديم تجارب Native رائعة مع قوة البث في Vercel AI SDK، فأنت لا تبني مجرد chatbot. بل تبني واجهة ديناميكية تتكيف في الوقت الفعلي.

هذا هو المستقبل الذي أراهن عليه. توقف عن الـ prompting، وابدأ بالهندسة.