Update AI SDK Example (#2271)

examples/vercel-ai-sdk-chat-app/src/hooks/useAuth.ts

@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react';
+import { Provider } from '@/constants/messages';
+
+interface UseAuthReturn {
+  mem0ApiKey: string;
+  openaiApiKey: string;
+  provider: Provider;
+  user: string;
+  setAuth: (mem0: string, openai: string, provider: Provider) => void;
+  setUser: (user: string) => void;
+  clearAuth: () => void;
+  clearUser: () => void;
+}
+
+export const useAuth = (): UseAuthReturn => {
+  const [mem0ApiKey, setMem0ApiKey] = useState<string>('');
+  const [openaiApiKey, setOpenaiApiKey] = useState<string>('');
+  const [provider, setProvider] = useState<Provider>('openai');
+  const [user, setUser] = useState<string>('');
+
+  useEffect(() => {
+    const mem0 = localStorage.getItem('mem0ApiKey');
+    const openai = localStorage.getItem('openaiApiKey');
+    const savedProvider = localStorage.getItem('provider') as Provider;
+    const savedUser = localStorage.getItem('user');
+
+    if (mem0 && openai && savedProvider) {
+      setAuth(mem0, openai, savedProvider);
+    }
+    if (savedUser) {
+      setUser(savedUser);
+    }
+  }, []);
+
+  const setAuth = (mem0: string, openai: string, provider: Provider) => {
+    setMem0ApiKey(mem0);
+    setOpenaiApiKey(openai);
+    setProvider(provider);
+    localStorage.setItem('mem0ApiKey', mem0);
+    localStorage.setItem('openaiApiKey', openai);
+    localStorage.setItem('provider', provider);
+  };
+
+  const clearAuth = () => {
+    localStorage.removeItem('mem0ApiKey');
+    localStorage.removeItem('openaiApiKey');
+    localStorage.removeItem('provider');
+    setMem0ApiKey('');
+    setOpenaiApiKey('');
+    setProvider('openai');
+  };
+
+  const updateUser = (user: string) => {
+    setUser(user);
+    localStorage.setItem('user', user);
+  };
+
+  const clearUser = () => {
+    localStorage.removeItem('user');
+    setUser('');
+  };
+
+  return {
+    mem0ApiKey,
+    openaiApiKey,
+    provider,
+    user,
+    setAuth,
+    setUser: updateUser,
+    clearAuth,
+    clearUser,
+  };
+}; 

examples/vercel-ai-sdk-chat-app/src/hooks/useChat.ts

@@ -0,0 +1,169 @@
+import { useState } from 'react';
+import { createMem0, getMemories } from '@mem0/vercel-ai-provider';
+import { LanguageModelV1Prompt, streamText } from 'ai';
+import { Message, Memory } from '@/types';
+import { WELCOME_MESSAGE, INVALID_CONFIG_MESSAGE, ERROR_MESSAGE, AI_MODELS, Provider } from '@/constants/messages';
+
+interface UseChatProps {
+  user: string;
+  mem0ApiKey: string;
+  openaiApiKey: string;
+  provider: Provider;
+}
+
+interface UseChatReturn {
+  messages: Message[];
+  memories: Memory[];
+  thinking: boolean;
+  sendMessage: (content: string, fileData?: { type: string; data: string | Buffer }) => Promise<void>;
+}
+
+interface MemoryResponse {
+  id: string;
+  memory: string;
+  updated_at: string;
+  categories: string[];
+}
+
+type MessageContent = 
+  | { type: 'text'; text: string }
+  | { type: 'image'; image: string }
+  | { type: 'file'; mimeType: string; data: Buffer };
+
+interface PromptMessage {
+  role: string;
+  content: MessageContent[];
+}
+
+export const useChat = ({ user, mem0ApiKey, openaiApiKey, provider }: UseChatProps): UseChatReturn => {
+  const [messages, setMessages] = useState<Message[]>([WELCOME_MESSAGE]);
+  const [memories, setMemories] = useState<Memory[]>([]);
+  const [thinking, setThinking] = useState(false);
+
+  const mem0 = createMem0({
+    provider,
+    mem0ApiKey,
+    apiKey: openaiApiKey,
+  });
+
+  const updateMemories = async (messages: LanguageModelV1Prompt) => {
+    try {
+      const fetchedMemories = await getMemories(messages, {
+        user_id: user,
+        mem0ApiKey,
+      });
+
+      const newMemories = fetchedMemories.map((memory: MemoryResponse) => ({
+        id: memory.id,
+        content: memory.memory,
+        timestamp: memory.updated_at,
+        tags: memory.categories,
+      }));
+      setMemories(newMemories);
+    } catch (error) {
+      console.error('Error in getMemories:', error);
+    }
+  };
+
+  const formatMessagesForPrompt = (messages: Message[]): PromptMessage[] => {
+    return messages.map((message) => {
+      const messageContent: MessageContent[] = [
+        { type: 'text', text: message.content }
+      ];
+
+      if (message.image) {
+        messageContent.push({
+          type: 'image',
+          image: message.image,
+        });
+      }
+
+      if (message.audio) {
+        messageContent.push({
+          type: 'file',
+          mimeType: 'audio/mpeg',
+          data: message.audio as Buffer,
+        });
+      }
+
+      return {
+        role: message.sender,
+        content: messageContent,
+      };
+    });
+  };
+
+  const sendMessage = async (content: string, fileData?: { type: string; data: string | Buffer }) => {
+    if (!content.trim() && !fileData) return;
+
+    if (!user) {
+      const newMessage: Message = {
+        id: Date.now().toString(),
+        content,
+        sender: 'user',
+        timestamp: new Date().toLocaleTimeString(),
+      };
+      setMessages((prev) => [...prev, newMessage, INVALID_CONFIG_MESSAGE]);
+      return;
+    }
+
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      content,
+      sender: 'user',
+      timestamp: new Date().toLocaleTimeString(),
+      ...(fileData?.type.startsWith('image/') && { image: fileData.data.toString() }),
+      ...(fileData?.type.startsWith('audio/') && { audio: fileData.data as Buffer }),
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+    setThinking(true);
+
+    const messagesForPrompt = formatMessagesForPrompt([...messages, userMessage]);
+    await updateMemories(messagesForPrompt as LanguageModelV1Prompt);
+
+    try {
+      const { textStream } = await streamText({
+        model: mem0(AI_MODELS[provider], {
+          user_id: user,
+        }),
+        messages: messagesForPrompt as LanguageModelV1Prompt,
+      });
+
+      const assistantMessageId = Date.now() + 1;
+      const assistantMessage: Message = {
+        id: assistantMessageId.toString(),
+        content: '',
+        sender: 'assistant',
+        timestamp: new Date().toLocaleTimeString(),
+      };
+
+      setMessages((prev) => [...prev, assistantMessage]);
+
+      for await (const textPart of textStream) {
+        assistantMessage.content += textPart;
+        setThinking(false);
+
+        setMessages((prev) =>
+          prev.map((msg) =>
+            msg.id === assistantMessageId.toString()
+              ? { ...msg, content: assistantMessage.content }
+              : msg
+          )
+        );
+      }
+    } catch (error) {
+      console.error('Error in sendMessage:', error);
+      setMessages((prev) => [...prev, ERROR_MESSAGE]);
+    } finally {
+      setThinking(false);
+    }
+  };
+
+  return {
+    messages,
+    memories,
+    thinking,
+    sendMessage,
+  };
+}; 

examples/vercel-ai-sdk-chat-app/src/hooks/useFileHandler.ts

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { FileInfo } from '@/types';
+import { convertToBase64, getFileBuffer } from '@/utils/fileUtils';
+
+interface UseFileHandlerReturn {
+  selectedFile: FileInfo | null;
+  file: File | null;
+  fileData: string | Buffer | null;
+  setSelectedFile: (file: FileInfo | null) => void;
+  handleFile: (file: File) => Promise<void>;
+  clearFile: () => void;
+}
+
+export const useFileHandler = (): UseFileHandlerReturn => {
+  const [selectedFile, setSelectedFile] = useState<FileInfo | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [fileData, setFileData] = useState<string | Buffer | null>(null);
+
+  const handleFile = async (file: File) => {
+    setFile(file);
+    
+    if (file.type.startsWith('image/')) {
+      const base64Data = await convertToBase64(file);
+      setFileData(base64Data);
+    } else if (file.type.startsWith('audio/')) {
+      const bufferData = await getFileBuffer(file);
+      setFileData(bufferData);
+    }
+  };
+
+  const clearFile = () => {
+    setSelectedFile(null);
+    setFile(null);
+    setFileData(null);
+  };
+
+  return {
+    selectedFile,
+    file,
+    fileData,
+    setSelectedFile,
+    handleFile,
+    clearFile,
+  };
+};