أنشئ تطبيق دردشة ويب باستخدام Next.js

​

المشروع النموذجي

• GitHub: examples/web-chat-nextjs
• مسار المشروع داخل المستودع: examples/web-chat-nextjs

​

ما يفعله التطبيق

• • يجلب النماذج المتاحة باستخدام GET /v1/models
• • يرسل رسائل الدردشة باستخدام POST /v1/responses
• يحتفظ بمفتاح API على الخادم
• يوفر نقطة بداية بسيطة لمنتج حقيقي دون تعقيدات OAuth

​

الملفات الرئيسية

• app/api/models/route.ts
• app/api/responses/route.ts
• app/components/ChatClient.tsx
• lib/gateway.ts

​

لماذا بُني المثال بهذه الطريقة

​

1. المتصفح لا يستدعي Phaseo مباشرة

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

​

2. اكتشاف النماذج منفصل عن إنشاء الردود

• مسار لعرض قائمة النماذج
• مسار لتنفيذ طلب الدردشة

​

3. لا تدير الواجهة سوى حالة التفاعل

• حالة الإدخال
• حالة التحميل
• عرض الأخطاء
• الرسائل المعروضة

​

المتطلبات المسبقة

• • Node.js ومدير حزم مدعوم
• مفتاح Phaseo API

​

تشغيل المثال

cd examples/web-chat-nextjs
npm install
cp .env.example .env.local

cd examples/web-chat-nextjs
pnpm install
cp .env.example .env.local

cd examples/web-chat-nextjs
yarn install
cp .env.example .env.local

cd examples/web-chat-nextjs
bun install
cp .env.example .env.local

• PHASEO_API_KEY
• NEXT_PUBLIC_GATEWAY_URL

npm run dev

pnpm dev

yarn dev

bun run dev

​

التحقق من التطبيق

• يجلب محدد النماذج البيانات من مسار الخادم。
• يؤدي إرسال رسالة إلى ظهور رد واحد من المساعد。
• لا تكشف لوحة الشبكة في المتصفح عن PHASEO_API_KEY.
• يظهر خطأ مفيد في الواجهة عند فشل طلب Gateway。

​

تخصيص التطبيق

• غيّر النموذج الافتراضي إلى النموذج الذي اخترته للإنتاج
• أضف البث إذا كانت تجربة الاستخدام تحتاج إلى عرض الرموز واحدًا تلو الآخر
• أضف المصادقة لاحقًا إذا أصبح التطبيق متعدد المستخدمين
• استبدل التنفيذ الداخلي لمسار الخادم بـ TypeScript SDK لاحقًا إذا أردت عميلًا بمستوى تجريد أعلى

​

متى تختار نقطة بداية أخرى

• استخدم البدء السريع لـ Node إذا كنت تريد سكربتًا أو اختبارًا للواجهة الخلفية بدلًا من واجهة
• استخدم البدء السريع لـ Python إذا كان أول تكامل في عامل أو CLI أو خدمة خلفية

​

أدلة ذات صلة

• مطالبات بدء تطبيق صغير
• الأمثلة
• البدء السريع