+
+
+ );
+};
+
+export default ChevronToggle;
diff --git a/examples/vercel-ai-sdk-chat-app/src/components/header.tsx b/examples/vercel-ai-sdk-chat-app/src/components/header.tsx
new file mode 100644
index 0000000000..7ddbd37d1d
--- /dev/null
+++ b/examples/vercel-ai-sdk-chat-app/src/components/header.tsx
@@ -0,0 +1,81 @@
+import { Button } from "@/components/ui/button";
+import { ChevronRight, X, RefreshCcw, Settings } from "lucide-react";
+import { Dispatch, SetStateAction, useContext, useEffect, useState } from "react";
+import GlobalContext from "../contexts/GlobalContext";
+import { Input } from "./ui/input";
+
+const Header = (props: {
+ setIsSettingsOpen: Dispatch
+
+
+
+ Mem0 Assistant
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const FileInfoPopup = ({ file, onClose }: { file: FileInfo, onClose: () => void }) => {
+ return (
+
+
+
+
+ setInputValue(e.target.value)}
+ onKeyDown={(e) => e.key === "Enter" && handleSendController()}
+ placeholder="Type a message..."
+ className="flex-1 pl-10 rounded-3xl"
+ disabled={loading}
+ ref={ref}
+ />
+
+
+
+ {selectedFile &&
+
+
+
+
+
+ )
+}
+
+export default InputArea;
diff --git a/examples/vercel-ai-sdk-chat-app/src/components/memories.tsx b/examples/vercel-ai-sdk-chat-app/src/components/memories.tsx
new file mode 100644
index 0000000000..20a2f22e8e
--- /dev/null
+++ b/examples/vercel-ai-sdk-chat-app/src/components/memories.tsx
@@ -0,0 +1,93 @@
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import { ScrollArea } from "@radix-ui/react-scroll-area";
+import { Memory } from "../types";
+import GlobalContext from "@/contexts/GlobalContext";
+import { useContext, useEffect, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const MemoryItem = ({ memory, index }: { memory: Memory; index: number }) => {
+ return (
+
+
+
+
+ {file.name}
+ +Type: {file.type}
+Size: {(file.size / 1024).toFixed(2)} KB
+
+
+ {memory.content}
+
+ {new Date(memory.timestamp).toLocaleString()}
+
+
+ {memory.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+ Relevant Memories ({memories.length})
+
+
+ {memories.length === 0 && (
+ + Only the relevant memories will be displayed here. +
+ {messages.map((message: Message) => (
+
+
+
+ ))}
+ {thinking && (
+
+
+
+
+
+ {message.sender === "assistant" ? "AI" : "U"}
+
+
+
+
+ {message.image && (
+ {message.content}
+
+ {message.timestamp}
+
+
+
+ 
+
+ )}
+
+
+ )}
+
+
+ {"AI"}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/examples/vercel-ai-sdk-chat-app/src/pages/home.tsx b/examples/vercel-ai-sdk-chat-app/src/pages/home.tsx
new file mode 100644
index 0000000000..f72b175ee8
--- /dev/null
+++ b/examples/vercel-ai-sdk-chat-app/src/pages/home.tsx
@@ -0,0 +1,41 @@
+import { useState } from "react";
+import ApiSettingsPopup from "../components/api-settings-popup";
+import Memories from "../components/memories";
+import Header from "../components/header";
+import Messages from "../components/messages";
+import InputArea from "../components/input-area";
+import ChevronToggle from "../components/chevron-toggle";
+
+
+export default function Home() {
+ const [isMemoriesExpanded, setIsMemoriesExpanded] = useState(true);
+ const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+
+ return (
+ <>
+
+ {/* Main Chat Area */}
+
+
+ );
+}
diff --git a/examples/vercel-ai-sdk-chat-app/src/types.ts b/examples/vercel-ai-sdk-chat-app/src/types.ts
new file mode 100644
index 0000000000..770bc23f7d
--- /dev/null
+++ b/examples/vercel-ai-sdk-chat-app/src/types.ts
@@ -0,0 +1,22 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export interface Memory {
+ id: string;
+ content: string;
+ timestamp: string;
+ tags: string[];
+}
+
+export interface Message {
+ id: string;
+ content: string;
+ sender: "user" | "assistant";
+ timestamp: string;
+ image?: string;
+ audio?: any;
+}
+
+export interface FileInfo {
+ name: string;
+ type: string;
+ size: number;
+}
\ No newline at end of file
diff --git a/examples/vercel-ai-sdk-chat-app/src/vite-env.d.ts b/examples/vercel-ai-sdk-chat-app/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/examples/vercel-ai-sdk-chat-app/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
+ {/* Header */}
+
+
+ {/* Chevron Toggle */}
+