Next.js ١٤ و GPT-4o: بناء تطبيق دردشة

ما الذي سنبنيه

في هذا الدرس، سنقوم ببناء تطبيق دردشة باستخدام Next.js ١٤ ودمجه مع نموذج GPT-4o من OpenAI. سيمكن التطبيق المستخدمين من إجراء محادثات في الوقت الحقيقي مع الذكاء الاصطناعي، مستفيدين من القدرات المتقدمة لنموذج GPT-4o في توليد ردود شبيهة بالبشر.

سيتميز المشروع النهائي بواجهة مستخدم سهلة الاستخدام حيث يمكن للمستخدمين إرسال الرسائل وتلقي الردود المدعومة من GPT-4o. سيظهر هذا التطبيق كيفية استخدام ميزات App Router في Next.js وميزات React المتزامنة لبناء تطبيقات مستجيبة وقابلة للتوسع.

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

سنبدأ بإنشاء مشروع Next.js جديد وتثبيت التبعيات اللازمة لتطبيقنا، بما في ذلك SDK الخاص بـ OpenAI للوصول إلى GPT-4o.

npx create-next-app@latest my-chat-app
cd my-chat-app
npm install @openai/openai
npm install tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

بعد ذلك، سنقوم بتكوين متغيرات البيئة الخاصة بنا. هذه ضرورية لتخزين المعلومات الحساسة مثل مفتاح API الخاص بـ OpenAI.

# .env.local
OPENAI_API_KEY=your-openai-api-key

تأكد من تضمين ملف `.env.local` في `.gitignore` الخاص بك لمنع تعرض المعلومات الحساسة في نظام التحكم في الإصدارات.

الخطوة ١: إعداد مسار API

للتفاعل مع API الخاص بـ OpenAI، سنقوم بإعداد مسار API في Next.js. سيتولى هذا المسار معالجة الطلبات من الواجهة الأمامية لدينا والتواصل مع API الخاص بـ OpenAI.

// app/api/chat/route.js
import { OpenAI } from 'openai';

export async function POST(request) {
  const { message } = await request.json();
  const client = new OpenAI(process.env.OPENAI_API_KEY);

  try {
...
            

                

                

                    
تابع القراءة
                    
سجل دخولك مجاناً لقراءة المقال كاملاً والوصول إلى أدوات الذكاء الاصطناعي.
                    تسجيل الدخول / إنشاء حساب