ابني 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​

تخزين المستندات كـ 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 },
    },
  ]);
}

---

إنشاء 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),
  });
}

---

واجهة المستخدم (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
وده بيدّي منتجك لمسة احترافية ويخلي المستخدمين ينبهروا من الذكاء في تجربة البحث
لو عندك تجربة أو سؤال، اكتبها في الكومنتس