إزاي تضيف AI لموقعك في Next.js باستخدام OpenAI و LangChain؟

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

طب ازاي تعمله بطريقة احترافية وبأقل مجهود؟ ده اللي هنشرحه النهاردة خطوه بخطوه بكل عملي ان اشاء الله

أولًا: يعني إيه دمج AI في Next.js؟

ببساطة انت بتخلي الموقع يتفاعل بذكاء مع المستخدمين بدل ما يكون مجرد موقع ثابت. وبنعمل كدا باستخدام نماذج OpenAI وتحليل البيانات باستخدام LangChain، وده بيساعدك تعمل:

• شات بوت ذكي

  يرد على الناس بأسلوب طبيعي مش مجرد إجابات محفوظة.

• تحليل النصوص

  زي تلخيص المقالات أو استخراج المعلومات المهمة من أي محتوى.

• بحث متطور

  يقدر يجيب المعلومات من مصادر مختلفة ويربطها ببعض عشان يوفر إجابات دقيقة وسريعة.. وغيرهم.

طيب إزاي نطبقه في Next.js؟

هنمشي خطوة بخطوة مع OpenAI API و LangChain:

1️⃣ تثبيت المكتبات اللي هنستخدمها:

npm install openai langchain

2️⃣ إعداد API الاتصال بـ OpenAI:

📂 utils/openai.js

import { OpenAI } from “openai”;</p><br /><br /> <p>const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });</p><br /><br /> <p>export async function getAIResponse(prompt) {<br /><br /><br /> const response = await openai.completions.create({<br /><br /><br /> model: “gpt-4”,<br /><br /><br /> prompt,<br /><br /><br /> max_tokens: 100,<br /><br /><br /> });<br /><br /><br /> return response.choices[0].text;<br /><br /><br /> }

شرح سريع للي عملناه هنا:

• استوردنا مكتبة OpenAI عشان نقدر نتعامل مع API بسهولة.
• نشأنا Object openai باستخدام apiKey اللي متخزن في env عشان نحمي البيانات.
• جهزنا Function getAIResponse اللي بتاخد prompt وتبعت Request لنموذج GPT-4.
• حددنا max_tokens بـ 100 عشان نتحكم في طول الـ Response، وبنرجع أول Choice من النموذج.

3️⃣ إنشاء API Route للتعامل مع الـ AI في Next.js:

📂 pages/api/ai.js

import { getAIResponse } from “@/utils/openai”;</p><br /><br /> <p>export default async function handler(req, res) {<br /><br /><br /> if (req.method !== “POST”) return res.status(405).end();</p><br /><br /> <p> const { prompt } = req.body;<br /><br /><br /> const aiResponse = await getAIResponse(prompt);</p><br /><br /> <p> res.status(200).json({ response: aiResponse });<br /><br /><br /> }<br /><br /><br />

شرح سريع للي عملناه هنا:

• أنشأنا API Route في نيكست عشان يستقبل طلبات من الـ Frontend ويبعتها لـ OpenAI عشان يجيب الرد
• اتأكدنا إن الطلب يكون POST بس عشان نمنع أي طلبات غير مرغوبة.
• واستخرجنا prompt من req.body عشان نبعته لـ AI.
• استدعينا Function getAIResponse اللي بتجيب الرد من OpenAI.
• رجعنا الرد في JSON Response عشان يبقى سهل التعامل معاه في الـ Frontend.

4️⃣ إضافة LangChain لتحليل البيانات بشكل متقدم:

📂 utils/langchain.js

import { OpenAI } from “langchain/llms/openai”;</p><br /><br /> <p>const model = new OpenAI({ openAIApiKey: process.env.OPENAI_API_KEY });</p><br /><br /> <p>export async function analyzeText(text) {<br /><br /><br /> return await model.call(text);<br /><br /><br /> }

شرح سريع للي عملناه هنا:

• استوردنا OpenAI من مكتبة LangChain عشان نستخدم إمكانياتها في تحليل النصوص.
• أنشأنا Object model بتمرير apiKey اللي متخزن في env لحماية البيانات.
• جهّزنا Function analyzeText اللي بتاخد text كـ parameter، وبتستخدم model.call() عشان تبعت النص للـ AI وتاخد منه تحليل ذكي بشكل تلقائي.

5️⃣ دمج الذكاء الاصطناعي في ال Frontend:

📂 pages/index.js

import { useState } from “react”;</p><br /><br /> <p>export default function Home() {<br /><br /><br /> const [input, setInput] = useState(“”);<br /><br /><br /> const [response, setResponse] = useState(“”);</p><br /><br /> <p> const handleSubmit = async (e) => {<br /><br /><br /> e.preventDefault();<br /><br /><br /> const res = await fetch(“/api/ai”, {<br /><br /><br /> method: “POST”,<br /><br /><br /> headers: { “Content-Type”: “application/json” },<br /><br /><br /> body: JSON.stringify({ prompt: input }),<br /><br /><br /> });<br /><br /><br /> const data = await res.json();<br /><br /><br /> setResponse(data.response);<br /><br /><br /> };</p><br /><br /> <p> return (</p><br /><br /> <div><br /><br /> <h1>🤖 AI Chat in Next.js</h1><br /><br /> <p> setInput(e.target.value)} placeholder=”اكتب أي سؤال هنا…” /><br /><br /><br /> <button type=”submit”>اسأل الذكاء الاصطناعي</button></p><br /><br /> <p>🔍 {response}</p><br /><br /> </div><br /><br /> <p> );<br /><br /><br /> }

شرح سريع للي عملناه هنا:

• استخدمنا useState عشان نعمل state لكل من input (النص اللي المستخدم هيكتبه) و response (الإجابة اللي هنستقبلها من الذكاء الاصطناعي).
• جهزنا Function handleSubmit اللي بتمنع refresh عند الإرسال، وبتبعت POST request لـ API route مع prompt المستخدم.
• استقبلنا response من API وعرضناه على الصفحة تحت الفورم.
• كده التطبيق بقى قادر على استقبال استفسارات المستخدمين وإرسالها للذكاء الاصطناعي والرد عليهم بشكل مباشر… الف مبروك 😃

واخيرا بقا لو ناوي تستخدم AI في موقعك خد بالك من الحاجات دي:

• استخدم الكاشينج – عشان تقلل عدد استدعاءات الـ API، توفر في التكاليف، وتخلي التطبيق أسرع.
• ظبط الـ prompt صح – كل ما كان واضح ومحدد، كل ما كانت الاستجابات أدق وأحسن. جرّب، حسّن، وعدّل لحد ما توصل لأفضل نتيجة.
• راقب التكاليف باستمرار – الـ OpenAI API مش ببلاش، ولو عندك عدد استدعاءات كبير ممكن الفاتورة تجيبك الأرض😃

وبكده نكون خلصنا شرحنا عن إزاي تضيف AI لموقعك في Next.js باستخدام OpenAI و LangChain, لوعندك سؤال أو استفسار، اكتب في الكومنتات.