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 {
    const response = await client.chat.completions.create({
      model: "gpt-4o",
      messages: [{ role: "user", content: message }]
    });

    return new Response(JSON.stringify({ reply: response.choices[0].message.content }), {
      status: 200,
      headers: { 'Content-Type': 'application/json' }
    });
  } catch (error) {
    return new Response(JSON.stringify({ error: 'Failed to fetch response from OpenAI' }), {
      status: 500,
      headers: { 'Content-Type': 'application/json' }
    });
  }
}

تعرف هذه الشفرة نقطة نهاية POST التي تقبل حمولة JSON تحتوي على رسالة المستخدم، وتتفاعل مع API الخاص بـ OpenAI، وتعيد رد الذكاء الاصطناعي. يضمن التعامل الصحيح مع الأخطاء إدارة أي مشاكل في استدعاء API بشكل سلس.

الخطوة ٢: بناء واجهة الدردشة

بعد ذلك، سنقوم بإنشاء واجهة دردشة بسيطة باستخدام مكونات React. ستتكون من حقل إدخال لرسالة المستخدم ومنطقة عرض للمحادثة.

// app/page.js
import { useState } from 'react';

export default function Chat() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  const sendMessage = async () => {
    if (!input) return;

    const newMessage = { role: 'user', content: input };
    setMessages(prev => [...prev, newMessage]);

    const response = await fetch('/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message: input }),
    });

    const data = await response.json();
    setMessages(prev => [...prev, { role: 'ai', content: data.reply }]);
    setInput('');
  };

  return (
    

      

        {messages.map((msg, index) => (
          

            {msg.content}
          
        ))}
      
       setInput(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
      />
      إرسال
    
  );
}

يدير هذا المكون حالة الدردشة، ويتعامل مع إدخال المستخدم، ويعرض الرسائل. تقوم وظيفة `sendMessage` بإرسال إدخال المستخدم إلى مسار API الخاص بنا وتحديث قائمة الرسائل برد الذكاء الاصطناعي.

الخطوة ٣: تصميم التطبيق

لتحسين تجربة المستخدم، سنقوم بتطبيق بعض الأنماط الأساسية باستخدام Tailwind CSS. سيجعل ذلك تطبيق الدردشة الخاص بنا جذابًا بصريًا وسهل الاستخدام.

// styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

.chat-container {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.messages {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.message {
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 5px;
}

.message.user {
  background-color: #e1ffc7;
  text-align: right;
}

.message.ai {
  background-color: #f1f0f0;
  text-align: left;
}

توفر هذه الأنماط تخطيطًا نظيفًا لواجهة الدردشة، مع أنماط مميزة لرسائل المستخدم والذكاء الاصطناعي لتمييزها بسهولة.

اختبار التنفيذ الخاص بك

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

// Test by opening the application in your browser and interacting with the chat interface.
npm run dev

بعد تشغيل التطبيق، افتح متصفحك وانتقل إلى http://localhost:3000. أدخل رسالة وتأكد من أنك تتلقى ردًا مولدًا بواسطة الذكاء الاصطناعي. يؤكد هذا التفاعل أن التكامل مع API الخاص بـ OpenAI يعمل كما هو متوقع.

ما الذي تبنيه بعد ذلك

• تحسين واجهة الدردشة بأنماط ورسوم متحركة أكثر تقدمًا لتحسين تفاعل المستخدم.
• تنفيذ مصادقة المستخدم لتخصيص تجربة الدردشة وتخزين سجل المحادثات.
• دمج نماذج أو خدمات ذكاء اصطناعي إضافية لتقديم قدرات متنوعة مثل تحليل المشاعر أو الترجمة اللغوية.