Magdy Atef Zahran

🧠 ازاي تبني Search Box ذكي بالـ AI في SaaS بـ Next.js؟

عشان نكون واضحين… الـ Search التقليدي (SQL LIKE %keyword%) مينفعش في SaaS حقيقي:

بيشتغل بالحروف مش بالمعنى
المستخدم يكتب: “تصميم لوجو” = مش هيلاقي Document مكتوب فيه “Logo Design”.

الحل = AI Semantic Search

الفكرة ببساطة: بنحول النصوص لأرقام (Vectors) باستخدام Embeddings ونخزنها في Vector DB زي Pinecone/Weaviate ولما المستخدم يعمل Search بنحول Query لـ Embedding ونقارن بالمعنى مش بالكلمة

والنتيجة لو بحث عن “تصميم لوجو” هيجيله “Logo Design” ولو بحث عن “رحلة عمل” هيجيله “Business Trip”

طيب نطبق الكلام ده ازاي في Next.js؟ 👨‍💻

1️⃣ نخزن الـ Documents كـ 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: string, text: string) { 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: Request) { 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 في الـ UI

"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 في SaaS:

المستخدم يدخل أي Query (كلمة أو جملة).
الـ Query دي بتتحول لـ Embedding (Vector رقمي) باستخدام الـ AI Model.
الـ Embedding الجديد بيتقارن مع الـ Embeddings المخزنة في الـ Vector Database (زي Pinecone أو Weaviate)
والنظام بيرجع أقرب النتائج بالمعنى مش بالحروف (Semantic Results)

📌 نقاط احترافية لازم تعرفها:

AI Model Example
- text-embedding-3-small (خفيف ورخيص).
- او text-embedding-3-large (أدق وأغلى)
تخزين الـ Documents
- لو مشروع صغير خزن كل Document كـ Embedding واحد
- ولو مشروع كبير (زي PDF أو Article طويلة)؟ قسمها لـ Chunks وخزن كل جزء كـ Embedding منفصل الدقة هتزيد جدا.
التعامل مع النتائج
- مترجعش بيانات بس اعرض كمان Similarity Score أو Rank علشان المستخدم يحس إن الـ Search ذكي
Hint للـ Production
- اعمل Indexing كويس للبيانات
- واهتم بإدارة الـ API Keys والأمان