إضافة chatbot للعميل عبر OpenRouter دون كشف مفتاح API

يطلب العملاء بشكل متزايد "chatbot ذكاء اصطناعي صغير على الموقع." تبدو المتطلبات بسيطة: الإجابة عن الأسئلة الشائعة، جمع العملاء المحتملين، ربما مساعدة الزوار في إيجاد الخدمة المناسبة. الفخ هو وضع مفتاح API في المتصفح أو الدفع مقابل widget SaaS لا يمكنك تخصيصه.

إليك كيف أُسلّم chatbots للعملاء باستخدام مسارات API في Next.js + OpenRouter، نفس الحزمة التي تُشغّل هذا الـ portfolio.

بنية تحافظ على أمان المفاتيح

لا تستدعِ OpenRouter أبداً من المتصفح. التدفق هو:

1. يكتب الزائر في widget الدردشة (مكوّن جانب العميل)
2. تذهب الرسالة إلى مسار /api/chat (الخادم)
3. يضيف الخادم prompt نظام بسياق عملك
4. يستدعي الخادم OpenRouter بالمفتاح السري
5. يعود الرد إلى العميل

لا يرى الزائر المفتاح أبداً. تتحكم في النموذج ودرجة الحرارة والحد الأقصى للرموز من جانب الخادم.

ما يدخل في prompt النظام

اجعله واقعياً ومحدوداً:

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

حدّث الـ prompt عند تغيّر الخدمات. عامله كمحتوى تحريري، لا كإعداد يُضبط مرة واحدة.

اختيار النموذج بميزانية محدودة

لمواقع الـ portfolio والأعمال الصغيرة، يكفي نموذج سريع ورخيص لدردشة بأسلوب الأسئلة الشائعة. أستخدم OpenRouter لتبديل النماذج دون إعادة كتابة كود التكامل. اختبر بأسئلة زوار حقيقية من العملاء قبل الإطلاق.

ما يحصل عليه العملاء فعلاً

• widget دردشة بألوانهم يتناسق مع موقعهم
• واتساب كمسار موازٍ (لا بديل)
• تحديد معدل على مسار API لمنع سوء الاستخدام
• تسجيل اختياري للمحادثات لتحسين الأسئلة الشائعة

أخطاء شائعة

1. لا بديل. أظهر دائماً البريد الإلكتروني وواتساب عند فشل API.

2. ردود طويلة جداً. حدّد الرموز لتبقى الإجابات قابلة للمسح السريع.

3. لا إفصاح. أخبر الزوار أنهم يتحدثون مع مساعد ذكاء اصطناعي، لا معك مباشرة.

4. تدريب البوت على خيال. إذا ادّعى prompt النظام قدرات لا تقدّمها، ستحصل على مكالمات مبيعات محرجة.

تريد واحداً على موقعك؟ شاهد كيف يعمل هنا (الدردشة أسفل اليسار)، اطّلع على أعمال التطوير، أو احجز مكالمة مجانية.