Null-Ai

1. البنية الأساسية (لا يتطلب خادم خلفي Backend!)

سر هذا المشروع يكمن في أنه لا يحتاج إلى خادم Node.js ثقيل في الخلفية لتشغيل الكود المُولد.

يعتمد على StackBlitz WebContainers، والذي يقوم بإنشاء بيئة مصغرة من Node.js مباشرة داخل علامة تبويب المتصفح الخاصة بالمستخدم.

عندما يقوم الذكاء الاصطناعي بإنشاء الكود، يقوم الـ WebContainer بتحميله، وتشغيل npm install، وبدء تشغيل خادم تطوير Vite محلياً في ذاكرة المتصفح.

2. التقنيات المستخدمة (Tech Stack)

واجهة المستخدم (Frontend): مبنية باستخدام Next.js 15 و TypeScript و Tailwind CSS.

إدارة الحالة (State Management): تستخدم Zustand لإدارة نظام ملفات افتراضي (VFS). هذا النظام يتتبع جميع الملفات التي ينشئها الذكاء الاصطناعي دون التسبب في تعطل التطبيق أو بطئه.

محرر الأكواد: مدعوم بواسطة Monaco Editor (وهو نفس المحرك الذي يعمل به VS Code). لقد قمت بإعداده ديناميكياً بحيث يتم تحميله بأمان في Next.js لتجنب مشاكل استهلاك الذاكرة (SSR crashes).

عقل الذكاء الاصطناعي: يستخدم Vercel AI SDK للاتصال بنماذج مثل Gemini 1.5 Flash (أو DeepSeek). يستخدم الذكاء الاصطناعي ميزة "استدعاء الأدوات" (Tool Calling) لكتابة الملفات وتنفيذ الأوامر.

3. واجهة المستخدم

الشريط الجانبي (Left Sidebar): يحتوي على نافذة الدردشة "AI Copilot" حيث يكتب المستخدمون الأوامر، و"مستكشف الملفات" لرؤية الملفات التي تم إنشاؤها (مثل App.tsx).

مساحة العمل (Middle Workspace): مساحة تتيح للمستخدمين التبديل بسهولة بين قراءة الكود المصدري (Monaco) أو رؤية الموقع الفعلي المباشر.

المعاينة المباشرة (Live Preview): عبارة عن <iframe> يتصل بمنفذ الخادم المحلي الخاص بـ WebContainer، ويعرض تطبيق React الذي تم تصميمه بواسطة الذكاء الاصطناعي في الوقت الفعلي.