Скачать или смотреть n8n بالعربي | lovable + n8n | شرح عمل تطبيق علي الويب بالذكاء الإصطناعي

في الفيديو ده هتشوف إزاي تبني تطبيق ويب مدعوم بالذكاء الاصطناعي من غير ما تكتب سطر كود واحد، عن طريق ربط Lovable مع n8n باستخدام ميزة MCP ✨

خطوة بخطوة من أول فكرة التطبيق لحد ما بقى شغال أونلاين، وشرح كل التفاصيل اللي محتاجها:

في الفيديو هتتعلم:

إزاي تحدث وتجهّز n8n عشان يفعّل ميزة MCP ويشتغل كـ AI Backend

بناء Workflow في n8n يقوم بدور الـ AI Agent للتطبيق (مع شرح الفكرة العامة للتطبيق اللي بنبنيه)

System Prompt المستخدم جوا الـ Workflow وليه مكتوب بالشكل ده

إعدادات كل Node في n8n واحدة واحدة: المدخلات، المخرجات، والـ AI calls

إزاي توصل Lovable بالـ MCP Server وتخليه يتكلم مع الـ Backend

إعدادات Lovable: شكل الصفحة، الزرار، الواجهة، وطريقة استدعاء الـ MCP من الفرونت إند

تجربة حية للتطبيق بعد ما الفرونت إند (Lovable) يتصل بالـ Backend (n8n) عن طريق MCP ويديلك نتيجة في لحظات

الفيديو مناسب لأي حد:

مطوّر حابب يدخل عالم AI Agents + Automation

أو حد عايز يفهم إزاي يركّب أدوات الذكاء الاصطناعي مع بعض ويبني بيها منتج حقيقي

لو مهتم تبني تطبيقات ويب بالذكاء الاصطناعي، وتفهم إزاي الفرونت إند يتكلم مع الباك إند عن طريق MCP، الفيديو ده معمول ليك 👇

ماتنساش تعمل Like و اشتراك في القناة وتسيبلي سؤالك أو فكرتك في الكومنتات عشان نشتغل عليها في فيديوهات جاية 🚀

✨ الروابط

👇n8n Website
https://n8n.io/

👇Download n8n Workflow
https://github.com/khallad2/n8n-/blob...

👇n8n AI Agent System Prompt
Your are a master of riddles and you are smart.
everytime generate an easy riddle to be solved in 1 minute, and generate the answer for the riddle

👇٬Lovable Website
https://lovable.dev/

👇٬Lovable Prompt
Build a single-page, futuristic, gamified riddle web app. Use the connected n8n MCP server and call the exposed workflow RiddleGenerator to fetch a riddle (question + answer). Show only the question with neon sci-fi UI and a visible 60-second countdown, then automatically reveal the answer after 1 minute and let users request a new riddle.

فصول الفيديو
00:00 - مقدمة: ابني تطبيق ويب كامل في 15 دقيقة
00:01:44 - فهم معمارية التطبيق: الفرق بين الـ Frontend والـ Backend والـ MCP
00:05:16 - خطوات تحديث n8n لتفعيل ميزة MCP
00:06:50 - تفعيل إعدادات الوصول (MCP Access) داخل n8n
00:07:16 - طريقة ربط أداة Lovable مع سيرفر n8n
00:08:40 - تجهيز الـ Workflow وتفعيل الـ MCP عليه
00:09:32 - كتابة الـ Prompt في Lovable لبناء واجهة المستخدم
00:11:18 - شرح تفصيلي لمكونات الـ Workflow Nodes في n8n
00:13:06 - تجربة عملية للتطبيق النهائي
00:13:58 - كيفية اكتشاف الأخطاء وتصحيحها (Debugging)
00:15:08 - الخاتمة والخطوات القادمة