ابني Search Box ذكي بالذكاء الصناعي في Next.js

لو فاكر إنك ممكن تبني SaaS محترم ببحث SQL تقليدي زي LIKE %keyword%… يبقى لازم نراجع الكلام 😅
الطريقة دي بتدور بالحروف مش بالمعنى، فلو المستخدم كتب “تصميم لوجو” مش هتظهرله نتائج فيها “Logo Design” - وده كارثة لتجربة المستخدم!

وهنا بييجي المنقذ 🦸‍♂️: البحث الدلالي (Semantic Search) باستخدام الذكاء الصناعي.

🤖 الفكرة ببساطة​

الفكرة إننا بنحوّل النصوص لأرقام (Vectors) باستخدام Embeddings ونخزّنها في Vector Database زي Pinecone أو Weaviate.
ولما المستخدم يكتب Query، بنحوّلها هي كمان لرقم ونقارن بالـ معنى مش بالكلمة.

يعني:

• لو كتب “تصميم لوجو” ⇒ هتظهر له نتائج فيها “Logo Design”.
• لو كتب “رحلة عمل” ⇒ يجيبله “Business Trip”.

عبقرية، صح؟ 😍

---

⚙️ التطبيق العملي في Next.js​

1️⃣ تخزين المستندات كـ Embeddings​

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

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
const pc = new Pinecone({ apiKey: process.env.PINECONE_API_KEY });
const index = pc.Index("my-saas-index");

export async function storeDocument(id, text) {
  const embedding = await openai.embeddings.create({
    model: "text-embedding-3-small",
    input: text,
  });
  await index.upsert([
    {
      id,
      values: embedding.data[0].embedding,
      metadata: { text },
    },
  ]);
}

---

2️⃣ إنشاء API Route للبحث​

import { NextResponse } from "next/server";

export async function POST(req) {
  const { query } = await req.json();
  const embedding = await openai.embeddings.create({
    model: "text-embedding-3-small",
    input: query,
  });
  const result = await index.query({
    vector: embedding.data[0].embedding,
    topK: 5,
    includeMetadata: true,
  });

  return NextResponse.json({
    results: result.matches.map((m) => m.metadata?.text),
  });
}

---

3️⃣ واجهة المستخدم (Search Box)​

"use client";
import { useState } from "react";

export default function SearchBox() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

  const handleSearch = async () => {
    const res = await fetch("/api/search", {
      method: "POST",
      body: JSON.stringify({ query }),
    });
    const data = await res.json();
    setResults(data.results);
  };

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <button onClick={handleSearch}>بحث</button>
      <ul>{results.map((r, i) => <li key={i}>{r}</li>)}</ul>
    </div>
  );
}

---

🧩 منطق الـ AI-Powered Search باختصار​

1. المستخدم يكتب Query (كلمة أو جملة).
2. الـ Query تتحول إلى Embedding باستخدام نموذج الذكاء الصناعي.
3. النظام يقارنها مع Embeddings المخزّنة في قاعدة البيانات.
4. النتيجة؟ 🔍
   نتائج ذكية تفهم المعنى مش مجرد الحروف.

---

🚀 النتيجة النهائية​

مبروك! 🎉
دلوقتي عندك Search Box ذكي في SaaS بـ Next.js + OpenAI + Pinecone
وده بيدّي منتجك لمسة احترافية ✨ ويخلي المستخدمين ينبهروا من الذكاء في تجربة البحث 🤯
لو عندك تجربة أو سؤال، اكتبها في الكومنتس 💬💜