بناء وكلاء ذكاء اصطناعي ذوي ذاكرة دائمة باستخدام Mem0 و Vercel AI SDK

npx create-next-app@latest mem0-agent --typescript --tailwind --app
cd mem0-agent

npm install ai @mem0/vercel-ai-provider mem0ai
npm install @ai-sdk/openai

MEM0_API_KEY=m0-مفتاحك-هنا
OPENAI_API_KEY=sk-مفتاحك-هنا

import { createMem0 } from "@mem0/vercel-ai-provider";
 
export const mem0 = createMem0({
  provider: "openai",
  mem0ApiKey: process.env.MEM0_API_KEY!,
  apiKey: process.env.OPENAI_API_KEY!,
});

import { streamText } from "ai";
import { mem0 } from "@/lib/mem0";
import { NextRequest } from "next/server";
 
export async function POST(request: NextRequest) {
  const { messages, userId } = await request.json();
 
  const result = streamText({
    model: mem0("gpt-4o", { user_id: userId }),
    system: `أنت مساعد شخصي مفيد. كن موجزاً ومُخصَّصاً.
استخدم ما تعرفه عن المستخدم لتخصيص ردودك.`,
    messages,
  });
 
  return result.toDataStreamResponse();
}

import MemoryClient from "mem0ai";
 
export const memoryClient = new MemoryClient({
  apiKey: process.env.MEM0_API_KEY!,
});
 
export async function addMemories(
  messages: Array<{ role: string; content: string }>,
  userId: string
) {
  return memoryClient.add(messages, { userId });
}
 
export async function searchMemories(query: string, userId: string) {
  return memoryClient.search(query, {
    filters: { userId },
    limit: 10,
  });
}
 
export async function getAllMemories(userId: string) {
  return memoryClient.getAll({ filters: { userId } });
}
 
export async function deleteMemory(memoryId: string) {
  return memoryClient.delete(memoryId);
}

import { NextRequest, NextResponse } from "next/server";
import {
  searchMemories,
  getAllMemories,
  deleteMemory,
} from "@/lib/memory-client";
 
export async function GET(request: NextRequest) {
  const userId = request.nextUrl.searchParams.get("userId");
  const query = request.nextUrl.searchParams.get("query");
 
  if (!userId) {
    return NextResponse.json({ error: "userId مطلوب" }, { status: 400 });
  }
 
  const memories = query
    ? await searchMemories(query, userId)
    : await getAllMemories(userId);
 
  return NextResponse.json({ memories });
}
 
export async function DELETE(request: NextRequest) {
  const { memoryId } = await request.json();
  await deleteMemory(memoryId);
  return NextResponse.json({ success: true });
}

"use client";
 
import { useChat } from "ai/react";
import { useState } from "react";
 
interface ChatProps {
  userId: string;
}
 
export default function Chat({ userId }: ChatProps) {
  const [input, setInput] = useState("");
 
  const { messages, append, isLoading } = useChat({
    api: "/api/chat",
    body: { userId },
  });
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim()) return;
    append({ role: "user", content: input });
    setInput("");
  };
 
  return (
    <div className="flex flex-col h-full">
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.length === 0 && (
          <p className="text-gray-400 text-center mt-8">
            ابدأ المحادثة. سأتذكرك بين الجلسات.
          </p>
        )}
        {messages.map((m) => (
          <div
            key={m.id}
            className={`flex ${m.role === "user" ? "justify-start" : "justify-end"}`}
          >
            <div
              className={`max-w-[80%] rounded-2xl px-4 py-2 ${
                m.role === "user"
                  ? "bg-blue-600 text-white"
                  : "bg-gray-800 text-gray-100"
              }`}
            >
              {m.content}
            </div>
          </div>
        ))}
        {isLoading && (
          <div className="flex justify-end">
            <div className="bg-gray-800 rounded-2xl px-4 py-2 text-gray-400">
              جاري التفكير...
            </div>
          </div>
        )}
      </div>
 
      <form onSubmit={handleSubmit} className="p-4 border-t border-gray-700">
        <div className="flex gap-2">
          <button
            type="submit"
            disabled={isLoading || !input.trim()}
            className="bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white px-6 py-2 rounded-xl"
          >
            إرسال
          </button>
          <input
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="اكتب رسالتك..."
            className="flex-1 bg-gray-800 rounded-xl px-4 py-2 text-white outline-none text-right"
            dir="rtl"
          />
        </div>
      </form>
    </div>
  );
}

"use client";
 
import { useEffect, useState } from "react";
 
interface Memory {
  id: string;
  memory: string;
  created_at: string;
}
 
export default function MemoriesPanel({ userId }: { userId: string }) {
  const [memories, setMemories] = useState<Memory[]>([]);
  const [loading, setLoading] = useState(true);
 
  const fetchMemories = async () => {
    setLoading(true);
    const res = await fetch(`/api/memories?userId=${userId}`);
    const data = await res.json();
    setMemories(data.memories || []);
    setLoading(false);
  };
 
  useEffect(() => {
    fetchMemories();
  }, [userId]);
 
  const handleDelete = async (memoryId: string) => {
    await fetch("/api/memories", {
      method: "DELETE",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ memoryId }),
    });
    setMemories((prev) => prev.filter((m) => m.id !== memoryId));
  };
 
  if (loading) return <p className="text-gray-400 p-4">جاري تحميل الذكريات...</p>;
 
  return (
    <div className="p-4" dir="rtl">
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-lg font-semibold">ما أعرفه عنك</h2>
        <button onClick={fetchMemories} className="text-sm text-blue-400 hover:underline">
          تحديث
        </button>
      </div>
 
      {memories.length === 0 ? (
        <p className="text-gray-400 text-sm">
          لا توجد ذكريات بعد. ابدأ المحادثة لبناء ملفك الشخصي.
        </p>
      ) : (
        <ul className="space-y-2">
          {memories.map((m) => (
            <li
              key={m.id}
              className="bg-gray-800 rounded-lg p-3 flex items-start justify-between gap-2"
            >
              <button
                onClick={() => handleDelete(m.id)}
                className="text-red-400 hover:text-red-300 text-xs shrink-0"
              >
                حذف
              </button>
              <span className="text-sm text-gray-200 text-right">{m.memory}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

import Chat from "@/components/Chat";
import MemoriesPanel from "@/components/MemoriesPanel";
 
const USER_ID = "demo-user-001";
 
export default function Home() {
  return (
    <div className="flex h-screen bg-gray-900 text-white">
      <aside className="w-72 border-r border-gray-700 overflow-y-auto">
        <MemoriesPanel userId={USER_ID} />
      </aside>
 
      <div className="flex-1 flex flex-col max-w-2xl mx-auto border-x border-gray-700">
        <header className="p-4 border-b border-gray-700 text-right" dir="rtl">
          <h1 className="text-xl font-bold">المساعد الشخصي</h1>
          <p className="text-sm text-gray-400">مدعوم بـ Mem0 و Vercel AI SDK</p>
        </header>
        <Chat userId={USER_ID} />
      </div>
    </div>
  );
}

// app/api/chat/route.ts
import { auth } from "@/auth";
import { streamText } from "ai";
import { mem0 } from "@/lib/mem0";
 
export async function POST(request: Request) {
  const session = await auth();
  const userId = session?.user?.id;
 
  if (!userId) {
    return new Response("غير مصرح", { status: 401 });
  }
 
  const { messages } = await request.json();
 
  const result = streamText({
    model: mem0("gpt-4o", { user_id: userId }),
    system: "أنت مساعد شخصي مفيد يمتلك ذاكرة.",
    messages,
  });
 
  return result.toDataStreamResponse();
}

await memoryClient.add(
  [
    {
      role: "user",
      content: "اسمي سارة. أنا عالمة بيانات في تونس.",
    },
  ],
  { userId: "sara-123" }
);

npm run dev