إنشاء شات بوت RAG لموقع باستخدام React + Next.js

الخطوة 1: إعداد المشروع

npx create-next-app@latest my-rag-chat
cd my-rag-chat
npm install openai pinecone-client langchain axios

الخطوة 2: إعداد متغيرات البيئة .env.local

OPENAI_API_KEY=your_openai_api_key
PINECONE_API_KEY=your_pinecone_api_key
PINECONE_ENV=your_pinecone_env
PINECONE_INDEX=website-docs

الخطوة 3: إنشاء API Route للتعامل مع الشات بوت

/pages/api/chat.js

import { PineconeClient } from "@pinecone-database/pinecone";
import OpenAI from "openai";

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

const pinecone = new PineconeClient();
await pinecone.init({
  apiKey: process.env.PINECONE_API_KEY,
  environment: process.env.PINECONE_ENV,
});
const index = pinecone.Index(process.env.PINECONE_INDEX);

export default async function handler(req, res) {
  if (req.method !== "POST") return res.status(405).end();

  const { question } = req.body;

  // البحث عن أقرب مستندات
  const queryEmbeddingResponse = await openai.embeddings.create({
    input: question,
    model: "text-embedding-3-small",
  });

  const queryEmbedding = queryEmbeddingResponse.data[0].embedding;

  const searchResponse = await index.query({
    queryRequest: {
      vector: queryEmbedding,
      topK: 3,
      includeMetadata: true,
    },
  });

  const context = searchResponse.matches.map((m) => m.metadata.text).join("\n");

  // توليد الرد
  const completion = await openai.chat.completions.create({
    model: "gpt-3.5-turbo",
    messages: [
      { role: "system", content: "أنت مساعد ذكي للموقع." },
      { role: "user", content: `استخدم المعلومات التالية للإجابة على السؤال:\n${context}\n\nسؤال: ${question}` },
    ],
  });

  const answer = completion.choices[0].message.content;
  res.status(200).json({ answer });
}

الخطوة 4: إنشاء واجهة React للشات بوت

/components/ChatBot.js

import { useState } from "react";
import axios from "axios";

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

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

    const userMessage = { role: "user", content: input };
    setMessages([...messages, userMessage]);
    setInput("");

    const response = await axios.post("/api/chat", { question: input });
    const botMessage = { role: "bot", content: response.data.answer };

    setMessages((prev) => [...prev, botMessage]);
  };

  return (
    <div style={{ maxWidth: 600, margin: "0 auto", padding: 20 }}>
      <div style={{ border: "1px solid #ccc", padding: 10, height: 400, overflowY: "scroll" }}>
        {messages.map((msg, idx) => (
          <div key={idx} style={{ textAlign: msg.role === "user" ? "right" : "left", margin: "5px 0" }}>
            <span style={{ background: msg.role === "user" ? "#acf" : "#eee", padding: "5px 10px", borderRadius: 5 }}>
              {msg.content}
            </span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 10, display: "flex" }}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          style={{ flex: 1, padding: 5 }}
          placeholder="اكتب سؤالك هنا..."
        />
        <button onClick={sendMessage} style={{ marginLeft: 5 }}>إرسال</button>
      </div>
    </div>
  );
}

الخطوة 5: استدعاء ChatBot في الصفحة الرئيسية

/pages/index.js

import ChatBot from "../components/ChatBot";

export default function Home() {
  return (
    <div>
      <h1 style={{ textAlign: "center" }}>شات بوت الموقع</h1>
      <ChatBot />
    </div>
  );
}