Claudable - منشئ تطبيقات الويب مفتوح المصدر القائم على وكيل الذكاء الاصطناعي

نظرة عامة على المشروع

Claudable هو منشئ تطبيقات ويب قوي مبني على Next.js، يجمع بين قدرات وكيل الذكاء الاصطناعي المتقدمة لـ Claude Code (ويدعم أيضًا Cursor CLI) مع تجربة بناء تطبيقات بسيطة وبديهية. ما عليك سوى وصف فكرة تطبيقك - "أريد تطبيقًا لإدارة المهام مع وضع داكن" - وشاهد Claudable يولد الكود على الفور ويعرض معاينة حية للتطبيق العامل.

يمكّنك هذا المشروع مفتوح المصدر من بناء ونشر تطبيقات ويب احترافية بسهولة ومجانًا.

الميزات الأساسية

🤖 دعم قوي لوكيل الذكاء الاصطناعي

• Claude Code: وكيل ترميز الذكاء الاصطناعي المتقدم من Anthropic، يتميز بقدرة عالية على الاستدلال، تنفيذ محلي، وأنماط تشغيل متعددة (تفاعلي، تحرير تلقائي، تلقائي بالكامل).
• Cursor CLI: وكيل ترميز ذكي، مناسب لمهام الترميز المعقدة.
• دعم MCP الأصلي: الاستفادة الكاملة من قدرات وكلاء Claude Code و Cursor CLI.

💻 تجربة التطوير

• اللغة الطبيعية إلى كود: ما عليك سوى وصف ما تريد بناءه، وسيقوم Claudable بإنشاء كود Next.js جاهز للإنتاج.
• معاينة فورية: شاهد التغييرات على الفور من خلال إعادة التحميل السريع، وشاهد التغييرات في الوقت الفعلي بينما يقوم الذكاء الاصطناعي ببناء التطبيق.
• بدء تشغيل بدون إعدادات: لا حاجة لإعدادات معقدة لبيئة الاختبار المعزولة، مفاتيح API، أو قواعد البيانات - ابدأ البناء على الفور.
• توليد واجهة مستخدم جميلة: استخدم Tailwind CSS و shadcn/ui لتوليد واجهات مستخدم مصقولة.

🚀 النشر والتكامل

• نشر بنقرة واحدة: ادفع تطبيقك إلى Vercel بنقرة واحدة، بدون الحاجة إلى إعدادات.
• تكامل GitHub: التحكم التلقائي في الإصدار وإعداد النشر المستمر.
• قاعدة بيانات Supabase: ربط قاعدة بيانات PostgreSQL جاهزة للإنتاج بمشروعك مباشرةً.
• الكشف التلقائي عن الأخطاء: اكتشاف الأخطاء في تطبيقك وإصلاحها تلقائيًا.

💰 مزايا التكلفة

• مجاني تمامًا: لا توجد رسوم اشتراك إضافية بخلاف منشئ التطبيقات.
• مفتوح المصدر: ترخيص MIT، يمكن استخدامه للأغراض التجارية.
• لا يوجد احتكار للمورد: أنت تمتلك الكود الذي تم إنشاؤه، ويمكنك تعديله أو استضافته في أي مكان.

البنية التقنية

حزمة التقنيات الأمامية (Frontend Tech Stack)

• Next.js: إطار عمل React حديث.
• Tailwind CSS: إطار عمل CSS يعتمد على الأدوات المساعدة.
• shadcn/ui: مكتبة مكونات واجهة المستخدم الحديثة.
• TypeScript: JavaScript آمن من حيث الأنواع.

حزمة التقنيات الخلفية (Backend Tech Stack)

• Python: خادم API للواجهة الخلفية.
• SQLite: قاعدة بيانات للتطوير المحلي.
• PostgreSQL: قاعدة بيانات لبيئة الإنتاج (اختياري).

تكامل وكيل الذكاء الاصطناعي

• Claude Code: وكيل الترميز الرئيسي الموصى به للذكاء الاصطناعي.
• Cursor CLI: أداة ترميز ذكية بديلة.
• دعم MCP: تكامل أصلي لبروتوكول سياق النموذج (Model Context Protocol).

التثبيت والإعداد

متطلبات النظام

# المكونات الضرورية
- Node.js 18+
- Python 3.10+
- Claude Code أو Cursor CLI (مسجل الدخول)
- Git

التثبيت السريع

# استنساخ المستودع
git clone https://github.com/opactorai/Claudable.git
cd Claudable

# تثبيت جميع التبعيات (Node.js و Python)
npm install

# تشغيل خادم التطوير
npm run dev

عناوين الوصول إلى التطبيق

• الواجهة الأمامية: http://localhost:3000
• خادم API: http://localhost:8080
• وثائق API: http://localhost:8080/docs

ملاحظة: سيتم الكشف عن المنافذ تلقائيًا، وإذا كان المنفذ الافتراضي مشغولاً، فسيتم تخصيص المنفذ التالي المتاح.

الإعداد اليدوي (اختياري)

# إعداد الواجهة الأمامية
cd apps/web
npm install

# إعداد الواجهة الخلفية
cd ../api
python3 -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate
pip install -r requirements.txt

سير العمل

1. ربط وكيل الذكاء الاصطناعي

تأكد أولاً من تسجيل الدخول إلى Claude Code أو Cursor CLI:

# تسجيل الدخول إلى Claude Code
claude
> /login

# تسجيل الدخول إلى Cursor CLI
cursor-agent login

2. تشغيل Claudable

npm run dev

3. وصف متطلبات المشروع

صف التطبيق الذي تريد بناءه باللغة الطبيعية، على سبيل المثال:

• "إنشاء تطبيق لإدارة المهام مع مصادقة المستخدم"
• "إنشاء مدونة شخصية تدعم الوضع الداكن"
• "بناء موقع تجارة إلكترونية بسيط"

4. مشاهدة الذكاء الاصطناعي يولد الكود

سيقوم الذكاء الاصطناعي تلقائيًا بإنشاء بنية المشروع والكود، ويمكنك رؤية المعاينة في الوقت الفعلي.

5. النشر إلى بيئة الإنتاج

استخدم ميزة النشر المتكاملة في Vercel لنشر تطبيقك بنقرة واحدة.

إدارة قواعد البيانات

التطوير المحلي

• استخدام قاعدة بيانات SQLite، الموجودة في data/cc.db
• يتم تهيئتها تلقائيًا عند التشغيل الأول

الأوامر المساعدة

# نسخ احتياطي لقاعدة البيانات
npm run db:backup

# إعادة تعيين قاعدة البيانات
npm run db:reset

# تنظيف جميع التبعيات
npm run clean

تكامل الخدمات

تكامل GitHub

1. الحصول على الرمز المميز: GitHub Personal Access Tokens ← Generate new token (classic) ← Select repo scope
2. الاتصال: Settings ← Service Integrations ← GitHub ← Enter token ← Create or connect repository

نشر Vercel

1. الحصول على الرمز المميز: Vercel Account Settings ← Create Token
2. الاتصال: Settings ← Service Integrations ← Vercel ← Enter token ← Create new project for deployment

قاعدة بيانات Supabase

1. الحصول على بيانات الاعتماد: Supabase Dashboard ← Your Project ← Settings ← API
   • عنوان URL للمشروع: https://xxxxx.supabase.co
   • مفتاح مجهول (Anon Key): مفتاح العميل العام
   • مفتاح دور الخدمة (Service Role Key): مفتاح الخادم

استكشاف الأخطاء وإصلاحها

أخطاء الأذونات

# التحقق من المستخدم الحالي
whoami

# تغيير ملكية دليل المشروع
sudo chown -R $(whoami):$(whoami) ~/Claudable

مشاكل التبعيات

# تنظيف جميع التبعيات وإعادة المحاولة
npm run clean
npm install

ملاحظات مستخدمي WSL

تأكد من تشغيل Claude Code ضمن حساب المستخدم وليس حساب الجذر (root).

حالات الاستخدام

1. النماذج الأولية السريعة

• رواد الأعمال للتحقق من أفكار المنتجات.
• مدراء المنتجات لإنشاء نماذج عرض توضيحية.
• المصممون لإنشاء تصميمات تفاعلية.

2. تعلم تطوير الويب

• المبتدئون في البرمجة لمراقبة كيفية تحويل الذكاء الاصطناعي للمتطلبات إلى كود.
• فهم بنية تطبيقات الويب الحديثة وسير عمل التطوير.

3. تطوير الواجهة الأمامية المؤتمت

• مطورو الواجهة الأمامية لأتمتة مهام التطوير المتكررة.
• بناء إطار عمل المشروع ومكونات واجهة المستخدم بسرعة.

4. تطوير بدون/بحد أدنى من التعليمات البرمجية

• المصممون أو المسوقون لإنجاز تطبيقات ويب بسيطة بشكل مستقل.
• تقليل الاعتماد على المطورين المحترفين.

مزايا المشروع

فعالية التكلفة

• مجاني تمامًا: لا توجد رسوم اشتراك أو قيود على الاستخدام.
• لا توجد رسوم API إضافية: استخدام اشتراكات Claude أو Cursor الحالية مباشرةً.

سرعة التطوير

• تطوير في دقائق: تحويل الأفكار إلى تطبيقات عاملة في دقائق معدودة.
• جاهز للإنتاج: يولد كودًا نظيفًا وقابلاً للصيانة يتوافق مع أفضل ممارسات الصناعة.
• ملاحظات فورية: ميزة المعاينة في الوقت الفعلي تقصر دورة ملاحظات التطوير.

المرونة

• دعم وكلاء الذكاء الاصطناعي المتعددين: يدعم Claude Code و Cursor CLI.
• لا يوجد احتكار للمورد: امتلاك كامل للكود.
• قابل للتخصيص: يمكن تعديل وتوسيع الكود الذي تم إنشاؤه.

خطط التطوير المستقبلية

وفقًا لخارطة طريق المشروع، تشمل الميزات القادمة:

• وكلاء CLI جدد: دعم المزيد من أدوات ترميز الذكاء الاصطناعي.
• نقاط تفتيش المحادثة: حفظ واستعادة حالة المحادثة/قاعدة الكود.
• تكامل MCP المحسن: تكامل عميق أصلي لـ MCP.
• نظام الوكيل الفرعي: بنية نظام وكيل محسنة.

معلومات مفتوحة المصدر

• GitHub: https://github.com/opactorai/Claudable
• المطور: OPACTOR (https://opactor.ai)
• دعم المجتمع: مجتمع مفتوح المصدر نشط، تحديثات وتحسينات مستمرة.

ملخص

يمثل Claudable نموذجًا جديدًا لتطوير الويب، حيث يحول وصف اللغة الطبيعية مباشرةً إلى تطبيقات ويب قابلة للنشر من خلال وكلاء الذكاء الاصطناعي. إنه لا يقلل فقط من عوائق دخول تطوير الويب، بل يزيد أيضًا من كفاءة التطوير بشكل كبير، مما يجعله أداة لا غنى عنها في صندوق أدوات المطور الحديث.