دراسة الحالةDocker VPS + Vercel - Production
مساعد البورتفوليو الذكي | n8n Chatbot Agent
مساعد AI إنتاجي متصل بالبورتفوليو عبر Next.js وn8n webhooks. يستقبل أسئلة الزوار، يتحقق من الطلبات، يمرر الرسائل إلى AI Agent بذاكرة محادثة، يعيد الرد للواجهة بصيغة JSON، ويرسل تنبيه WhatsApp عند حدوث تفاعل مهم.
التقنيات الأساسية
- n8n
- OpenAI
- Next.js API
- Webhooks
- WhatsApp Alerts
الأداء
- Webhook response mode يعيد الرد مباشرة للواجهة.
- Prompt مختصر لتقليل زمن الاستجابة.
- Fallback يمنع ظهور تجربة مكسورة عند تعطل الأتمتة.
- JSON response خفيف وسهل الدمج.
الأمان
- Header-based secret validation.
- عدم عرض مفاتيح أو webhook secrets في الكود العام.
- تواصل server-to-server بين Next.js وn8n.
- إدارة credentials داخل n8n بعيدا عن البورتفوليو.
الميزات الرئيسية
Webhook إنتاجي لاستقبال رسائل الشات من الموقع.
تحقق آمن من الطلبات قبل تشغيل AI Agent.
OpenAI Chat Model لتوليد الردود.
Window Buffer Memory لحفظ سياق المحادثة القصير.
دعم الرد بالعربية أو الإنجليزية حسب لغة الزائر.
إرجاع JSON من n8n إلى Next.js frontend.
تنبيهات WhatsApp عند تفاعل الزوار مع البوت.
Fallback محلي داخل Next.js API في حالة توقف n8n.
System prompt مبني على بيانات البورتفوليو والخبرة.
بنية المشروع
Portfolio Frontend ├── AIChat component يرسل رسائل الزوار ├── /api/chat يتصل بـ n8n ويحتوي fallback n8n Workflow ├── Webhook يستقبل الطلب ├── Check Secret يتحقق من الهيدر ├── AI Agent يعالج الرسالة ├── OpenAI Chat Model يولد الرد ├── Window Buffer Memory يحفظ السياق ├── Respond to Webhook يعيد JSON └── WhatsApp Notification ينبه صاحب الموقع
استراتيجيات التطوير
- فصل واجهة الشات عن منطق الأتمتة باستخدام secure webhook contract.
- استخدام n8n كطبقة orchestration قابلة للتعديل بدون إعادة نشر الواجهة.
- إضافة secret/header validation قبل تشغيل البوت.
- تحويل المحادثات إلى lead awareness عبر إشعارات WhatsApp.
- إخفاء المفاتيح والأسرار خارج بيانات البورتفوليو العامة.
واجهة المستخدم
