diff --git a/client/app/api/multiple-ai/route.ts b/client/app/api/multiple-ai/route.ts
new file mode 100644
index 0000000..fcbfd25
--- /dev/null
+++ b/client/app/api/multiple-ai/route.ts
@@ -0,0 +1,79 @@
+import { streamChat } from "@/lib/ai/stream";
+import { prisma } from "@/lib/db";
+import { ChatRequestSchema } from "@/lib/ai/schemas";
+
+export const dynamic = "force-dynamic";
+
+export async function POST(req: Request) {
+  try {
+    const body = await req.json();
+    
+    // Validate request schema
+    const parseResult = ChatRequestSchema.safeParse(body);
+    if (!parseResult.success) {
+      return new Response(JSON.stringify({ error: "Invalid request payload", details: parseResult.error.format() }), {
+        status: 400,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+
+    const { chatId, messages, modelId, mode } = parseResult.data;
+
+    // Call streamChat helper from client/lib/ai/stream.ts
+    // We pass our custom onFinish handler to persist the assistant response
+    const startTime = Date.now();
+    const result = streamChat({
+      chatId,
+      messages,
+      modelId,
+      mode,
+      onFinish: async ({ text, usage }: any) => {
+        try {
+          const durationMs = Date.now() - startTime;
+          await prisma.message.create({
+            data: {
+              role: "assistant",
+              content: text,
+              model: modelId,
+              mode: mode,
+              promptTokens: usage?.promptTokens,
+              completionTokens: usage?.completionTokens,
+              durationMs,
+              chatId,
+            },
+          });
+
+          // Automatically update the chat title if it's "New Chat"
+          const chat = await prisma.chat.findUnique({
+            where: { id: chatId },
+            select: { title: true, messages: { take: 1, orderBy: { createdAt: "asc" } } },
+          });
+
+          if (chat && chat.title === "New Chat") {
+            const firstUserMsg = chat.messages[0]?.content || text;
+            const generatedTitle = firstUserMsg.trim().slice(0, 40) + (firstUserMsg.length > 40 ? "..." : "");
+            await prisma.chat.update({
+              where: { id: chatId },
+              data: { title: generatedTitle || "New Chat" },
+            });
+          }
+        } catch (dbError) {
+          console.error("Failed to save assistant message to database:", dbError);
+        }
+      }
+    });
+
+    return result.toTextStreamResponse();
+  } catch (error) {
+    console.error("Stream route error:", error);
+    return new Response(
+      JSON.stringify({
+        error: error instanceof Error ? error.message : "An error occurred during streaming",
+      }),
+      {
+        status: 500,
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  }
+}
diff --git a/client/app/multiple-ai/[chatId]/page.tsx b/client/app/multiple-ai/[chatId]/page.tsx
new file mode 100644
index 0000000..c48ade1
--- /dev/null
+++ b/client/app/multiple-ai/[chatId]/page.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { notFound, redirect } from "next/navigation";
+import { getChat } from "../actions";
+import { ChatContainer } from "../components/ChatContainer";
+import { ChatMode } from "@/constants/modes";
+
+interface ChatPageProps {
+  params: Promise<{ chatId: string }>;
+}
+
+export default async function ChatSessionPage({ params }: ChatPageProps) {
+  const { chatId } = await params;
+  const chat = await getChat(chatId);
+
+  if (!chat) {
+    redirect("/multiple-ai");
+  }
+
+  // Formatting messages for type compatibility
+  const initialMessages = chat.messages.map((m) => ({
+    id: m.id,
+    role: m.role as any,
+    content: m.content,
+    model: m.model,
+    mode: m.mode,
+    promptTokens: m.promptTokens,
+    completionTokens: m.completionTokens,
+    durationMs: m.durationMs,
+    createdAt: m.createdAt,
+  }));
+
+  // Resolve initial model/mode based on the last assistant message, or default to chat mode settings
+  let initialModelId = "gemini-2.0-flash";
+  let initialMode: ChatMode = (chat.mode as ChatMode) || "chat";
+
+  // Search backwards to find the last configured model and mode
+  for (let i = chat.messages.length - 1; i >= 0; i--) {
+    const msg = chat.messages[i];
+    if (msg.model) {
+      initialModelId = msg.model;
+      break;
+    }
+  }
+
+  return (
+    <ChatContainer
+      chatId={chatId}
+      initialMessages={initialMessages}
+      initialModelId={initialModelId}
+      initialMode={initialMode}
+    />
+  );
+}
diff --git a/client/app/multiple-ai/actions.ts b/client/app/multiple-ai/actions.ts
new file mode 100644
index 0000000..987bd65
--- /dev/null
+++ b/client/app/multiple-ai/actions.ts
@@ -0,0 +1,102 @@
+"use server";
+
+import { prisma } from "@/lib/db";
+import { ChatMode, MessageRole } from "@/lib/generated/prisma/enums";
+import { revalidatePath } from "next/cache";
+
+export async function getChats() {
+  try {
+    return await prisma.chat.findMany({
+      orderBy: {
+        createdAt: "desc",
+      },
+      include: {
+        messages: {
+          take: 1,
+          orderBy: {
+            createdAt: "asc",
+          },
+        },
+      },
+    });
+  } catch (error) {
+    console.error("Error fetching chats:", error);
+    return [];
+  }
+}
+
+export async function getChat(id: string) {
+  try {
+    return await prisma.chat.findUnique({
+      where: { id },
+      include: {
+        messages: {
+          orderBy: {
+            createdAt: "asc",
+          },
+        },
+      },
+    });
+  } catch (error) {
+    console.error(`Error fetching chat ${id}:`, error);
+    return null;
+  }
+}
+
+export async function createChat(mode: ChatMode = "chat") {
+  try {
+    const chat = await prisma.chat.create({
+      data: {
+        title: "New Chat",
+        mode,
+      },
+    });
+    revalidatePath("/multiple-ai");
+    return chat;
+  } catch (error) {
+    console.error("Error creating chat:", error);
+    throw new Error("Could not create chat session.");
+  }
+}
+
+export async function deleteChat(id: string) {
+  try {
+    await prisma.chat.delete({
+      where: { id },
+    });
+    revalidatePath("/multiple-ai");
+    return { success: true };
+  } catch (error) {
+    console.error(`Error deleting chat ${id}:`, error);
+    throw new Error("Could not delete chat session.");
+  }
+}
+
+export async function saveUserMessage({
+  chatId,
+  content,
+  modelId,
+  mode,
+}: {
+  chatId: string;
+  content: string;
+  modelId: string;
+  mode: ChatMode;
+}) {
+  try {
+    const message = await prisma.message.create({
+      data: {
+        role: "user" as MessageRole,
+        content,
+        model: modelId,
+        mode,
+        chatId,
+      },
+    });
+    revalidatePath(`/multiple-ai/${chatId}`);
+    return message;
+  } catch (error) {
+    console.error("Error saving user message:", error);
+    throw new Error("Could not save message.");
+  }
+}
diff --git a/client/app/multiple-ai/components/ChatContainer.tsx b/client/app/multiple-ai/components/ChatContainer.tsx
new file mode 100644
index 0000000..52b0405
--- /dev/null
+++ b/client/app/multiple-ai/components/ChatContainer.tsx
@@ -0,0 +1,465 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import { Send, Sparkles, MessageSquare, Bot, Code2, Search, Zap, Cpu, ArrowRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Card } from "@/components/ui/card";
+import { MODELS } from "@/constants/models";
+import { CHAT_MODES, ChatMode } from "@/constants/modes";
+import { saveUserMessage } from "../actions";
+import { Markdown } from "./Markdown";
+import { cn } from "@/lib/utils";
+
+interface Message {
+  id: string;
+  role: "user" | "assistant" | "system" | "tool";
+  content: string;
+  model?: string | null;
+  mode?: ChatMode | string | null;
+  promptTokens?: number | null;
+  completionTokens?: number | null;
+  durationMs?: number | null;
+  createdAt: Date;
+}
+
+interface ChatContainerProps {
+  chatId: string;
+  initialMessages: Message[];
+  initialModelId?: string;
+  initialMode?: ChatMode;
+}
+
+export function ChatContainer({
+  chatId,
+  initialMessages,
+  initialModelId = "gemini-2.0-flash",
+  initialMode = "chat",
+}: ChatContainerProps) {
+  const [messages, setMessages] = useState<Message[]>(initialMessages);
+  const [input, setInput] = useState("");
+  const [selectedModel, setSelectedModel] = useState(initialModelId);
+  const [selectedMode, setSelectedMode] = useState<ChatMode>(initialMode);
+  const [isGenerating, setIsGenerating] = useState(false);
+  
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  // Auto-scroll to bottom on new messages
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [messages, isGenerating]);
+
+  // Sync messages when active chatId changes
+  useEffect(() => {
+    setMessages(initialMessages);
+    setSelectedModel(initialModelId);
+    setSelectedMode(initialMode);
+  }, [chatId, initialMessages, initialModelId, initialMode]);
+
+  // Parse Vercel AI SDK text stream chunk
+  const parseChunk = (chunk: string): string => {
+    let text = "";
+    // SDK streams data in lines like: 0:"content"\n
+    const lines = chunk.split("\n");
+    for (const line of lines) {
+      if (line.startsWith('0:')) {
+        try {
+          const parsed = JSON.parse(line.slice(2));
+          if (typeof parsed === "string") {
+            text += parsed;
+          }
+        } catch {
+          // Fallback parsing if JSON parsing fails on partial chunk
+          const match = line.match(/^0:"(.*)"$/);
+          if (match) {
+            text += match[1];
+          }
+        }
+      }
+    }
+    return text;
+  };
+
+  const handleSend = async (textToSend: string) => {
+    if (!textToSend.trim() || isGenerating) return;
+
+    setIsGenerating(true);
+    setInput("");
+
+    // 1. Save user message to database
+    let savedUserMsg: Message;
+    try {
+      const dbMsg = await saveUserMessage({
+        chatId,
+        content: textToSend,
+        modelId: selectedModel,
+        mode: selectedMode,
+      });
+      savedUserMsg = {
+        ...dbMsg,
+        role: dbMsg.role as any,
+        createdAt: new Date(dbMsg.createdAt),
+      };
+      
+      // Append user message to state
+      setMessages((prev) => [...prev, savedUserMsg]);
+    } catch (err) {
+      console.error("Failed to save user message:", err);
+      setIsGenerating(false);
+      return;
+    }
+
+    // 2. Setup streaming
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+
+    // Create assistant message placeholder
+    const assistantPlaceholderId = "streaming-assistant-placeholder";
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: assistantPlaceholderId,
+        role: "assistant",
+        content: "",
+        model: selectedModel,
+        mode: selectedMode,
+        createdAt: new Date(),
+      },
+    ]);
+
+    try {
+      const response = await fetch("/api/multiple-ai", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          chatId,
+          messages: [
+            ...messages.map((m) => ({ role: m.role, content: m.content })),
+            { role: "user", content: textToSend },
+          ],
+          modelId: selectedModel,
+          mode: selectedMode,
+        }),
+        signal: controller.signal,
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to initiate stream: ${response.statusText}`);
+      }
+
+      const reader = response.body?.getReader();
+      const decoder = new TextDecoder();
+      if (!reader) throw new Error("No response body reader available");
+
+      let streamedText = "";
+      let done = false;
+
+      while (!done) {
+        const { value, done: doneReading } = await reader.read();
+        done = doneReading;
+        if (value) {
+          const chunk = decoder.decode(value, { stream: !done });
+          streamedText += parseChunk(chunk);
+          
+          setMessages((prev) =>
+            prev.map((msg) =>
+              msg.id === assistantPlaceholderId
+                ? { ...msg, content: streamedText }
+                : msg
+            )
+          );
+        }
+      }
+
+      // Convert placeholder to a formal message
+      setMessages((prev) =>
+        prev.map((msg) =>
+          msg.id === assistantPlaceholderId
+            ? { ...msg, id: `msg-assistant-${Date.now()}` }
+            : msg
+        )
+      );
+    } catch (err: any) {
+      if (err.name === "AbortError") {
+        console.log("Stream generation aborted by user.");
+      } else {
+        console.error("Error during streaming:", err);
+        setMessages((prev) =>
+          prev.map((msg) =>
+            msg.id === assistantPlaceholderId
+              ? { ...msg, content: msg.content + "\n\n*Error: Connection lost or generation failed.*" }
+              : msg
+          )
+        );
+      }
+    } finally {
+      setIsGenerating(false);
+      abortControllerRef.current = null;
+    }
+  };
+
+  const handleStop = () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+  };
+
+  const renderProviderIcon = (provider: string) => {
+    switch (provider) {
+      case "openai":
+        return <Zap className="h-3.5 w-3.5 text-orange-400" />;
+      case "anthropic":
+        return <Cpu className="h-3.5 w-3.5 text-amber-500" />;
+      default:
+        return <Sparkles className="h-3.5 w-3.5 text-cyan-400" />;
+    }
+  };
+
+  const renderModeIcon = (mode: string) => {
+    switch (mode) {
+      case "build":
+        return <Code2 className="h-3.5 w-3.5 text-emerald-400" />;
+      case "research":
+        return <Search className="h-3.5 w-3.5 text-blue-400" />;
+      case "agent":
+        return <Bot className="h-3.5 w-3.5 text-purple-400" />;
+      default:
+        return <MessageSquare className="h-3.5 w-3.5 text-indigo-400" />;
+    }
+  };
+
+  const starters = [
+    {
+      title: "Write a React Hook",
+      desc: "Implement debounce logic with clean Typescript types",
+      prompt: "Write a complete custom React hook `useDebounce` in TypeScript, including a code execution example showing how it is used.",
+      mode: "build",
+      model: "gemini-2.0-flash",
+    },
+    {
+      title: "SQL vs NoSQL Design",
+      desc: "Compare transactional speed vs flexibility",
+      prompt: "Explain the architecture differences between Postgres (SQL) and MongoDB (NoSQL). Design a database schema for an e-commerce catalog in both, comparing pros and cons.",
+      mode: "research",
+      model: "gemini-2.5-pro",
+    },
+    {
+      title: "Code review helper",
+      desc: "Analyze safety issues in a JWT sign method",
+      prompt: "Can you analyze standard JWT token security risks and write a secure Node.js JWT signing & verification middleware implementation?",
+      mode: "chat",
+      model: "gpt-4o-mini",
+    },
+    {
+      title: "AI Agent Workflow",
+      desc: "Explain multi-agent state machines",
+      prompt: "Explain the concept of an AI Agent. Describe how LangGraph or state machines are used to control autonomous agent workflows step by step.",
+      mode: "agent",
+      model: "gemini-2.0-flash",
+    },
+  ];
+
+  return (
+    <div className="flex-1 flex flex-col h-full bg-slate-900/40 relative">
+      {/* Top Header Bar */}
+      <div className="h-16 border-b border-slate-900 flex items-center justify-between px-6 bg-slate-950/30 backdrop-blur-md z-10">
+        <div className="flex items-center gap-2">
+          <span className="text-slate-400 text-xs font-medium uppercase tracking-widest">Active Model</span>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* Model Selector */}
+          <div className="flex items-center gap-1.5">
+            <Select value={selectedModel} onValueChange={setSelectedModel}>
+              <SelectTrigger className="w-[180px] bg-slate-950/60 border-slate-800 text-slate-200 text-xs rounded-xl focus:ring-1 focus:ring-indigo-500">
+                <SelectValue placeholder="Select Model" />
+              </SelectTrigger>
+              <SelectContent className="bg-slate-950 border-slate-800 text-slate-300">
+                {MODELS.map((model) => (
+                  <SelectItem
+                    key={model.id}
+                    value={model.id}
+                    className="focus:bg-slate-800 focus:text-white"
+                  >
+                    <div className="flex items-center gap-2">
+                      {renderProviderIcon(model.provider)}
+                      <span>{model.label}</span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Mode Selector */}
+          <div className="flex items-center gap-1.5">
+            <Select value={selectedMode} onValueChange={(v) => setSelectedMode(v as ChatMode)}>
+              <SelectTrigger className="w-[140px] bg-slate-950/60 border-slate-800 text-slate-200 text-xs rounded-xl focus:ring-1 focus:ring-indigo-500">
+                <SelectValue placeholder="Select Mode" />
+              </SelectTrigger>
+              <SelectContent className="bg-slate-950 border-slate-800 text-slate-300">
+                {CHAT_MODES.map((cfg) => (
+                  <SelectItem
+                    key={cfg.id}
+                    value={cfg.id}
+                    className="focus:bg-slate-800 focus:text-white"
+                  >
+                    <div className="flex items-center gap-2">
+                      {renderModeIcon(cfg.id)}
+                      <span>{cfg.label}</span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </div>
+
+      {/* Message History area */}
+      <div className="flex-1 overflow-y-auto px-6 py-8 space-y-6 custom-scrollbar">
+        {messages.length === 0 ? (
+          <div className="max-w-3xl mx-auto h-full flex flex-col justify-center py-12">
+            <div className="text-center mb-10">
+              <div className="mx-auto h-12 w-12 rounded-2xl bg-indigo-500/10 flex items-center justify-center mb-4 border border-indigo-500/20">
+                <Sparkles className="h-6 w-6 text-indigo-400" />
+              </div>
+              <h2 className="text-2xl font-bold text-white mb-2">Configure & Query</h2>
+              <p className="text-slate-400 text-sm max-w-md mx-auto">
+                Select your LLM engine, choose the task mode, and send a message. Every conversation is automatically persisted.
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              {starters.map((starter, idx) => (
+                <Card
+                  key={idx}
+                  onClick={() => {
+                    setSelectedMode(starter.mode as ChatMode);
+                    setSelectedModel(starter.model);
+                    handleSend(starter.prompt);
+                  }}
+                  className="p-5 bg-slate-950/40 border-slate-850/60 hover:border-indigo-500/50 hover:bg-slate-950/80 cursor-pointer rounded-2xl transition-all duration-300 group shadow-md shadow-black/10"
+                >
+                  <div className="flex justify-between items-start mb-2">
+                    <h3 className="font-semibold text-white group-hover:text-indigo-300 text-sm md:text-base transition-colors">
+                      {starter.title}
+                    </h3>
+                    <ArrowRight className="h-4 w-4 text-slate-500 group-hover:text-indigo-400 group-hover:translate-x-1 transition-all" />
+                  </div>
+                  <p className="text-xs text-slate-400 leading-relaxed">{starter.desc}</p>
+                </Card>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div className="max-w-4xl mx-auto space-y-6">
+            {messages.map((msg, index) => {
+              const isUser = msg.role === "user";
+              const isStreamingPlaceholder = msg.id === "streaming-assistant-placeholder";
+
+              return (
+                <div
+                  key={msg.id || index}
+                  className={cn(
+                    "flex flex-col max-w-[85%] rounded-2xl p-4.5 transition-all shadow-md",
+                    isUser
+                      ? "ml-auto bg-gradient-to-br from-indigo-600/90 to-indigo-700/90 border border-indigo-500/20 text-white shadow-indigo-950/20"
+                      : "mr-auto bg-slate-950/60 border border-slate-850/50 text-slate-200 shadow-black/20"
+                  )}
+                >
+                  {/* Bubble Content */}
+                  {isUser ? (
+                    <div className="whitespace-pre-wrap text-sm md:text-base">{msg.content}</div>
+                  ) : (
+                    <div className="relative">
+                      <Markdown content={msg.content} />
+                      {isStreamingPlaceholder && isGenerating && (
+                        <span className="inline-block h-4 w-1.5 bg-indigo-400 ml-1 animate-pulse" />
+                      )}
+                    </div>
+                  )}
+
+                  {/* Metadata labels */}
+                  {!isUser && msg.model && (
+                    <div className="mt-3.5 pt-2.5 border-t border-slate-900/60 flex items-center justify-between text-[11px] text-slate-500">
+                      <div className="flex items-center gap-3">
+                        <span className="flex items-center gap-1">
+                          {renderProviderIcon(msg.model.split("-")[0])}
+                          {MODELS.find((m) => m.id === msg.model)?.label || msg.model}
+                        </span>
+                        <span className="h-1 w-1 bg-slate-700 rounded-full" />
+                        <span className="flex items-center gap-1 uppercase tracking-wider">
+                          {renderModeIcon(msg.mode || "chat")}
+                          {msg.mode}
+                        </span>
+                      </div>
+                      {msg.durationMs && (
+                        <span>
+                          {msg.promptTokens && `In: ${msg.promptTokens} · Out: ${msg.completionTokens} · `}
+                          {(msg.durationMs / 1000).toFixed(1)}s
+                        </span>
+                      )}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+            <div ref={scrollRef} />
+          </div>
+        )}
+      </div>
+
+      {/* Input controls area */}
+      <div className="p-6 bg-slate-950/20 backdrop-blur-md border-t border-slate-900/60">
+        <div className="max-w-4xl mx-auto flex items-end gap-3 bg-slate-950/60 border border-slate-800 p-2.5 rounded-2xl focus-within:border-indigo-500/50 shadow-inner shadow-black/20">
+          <Textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                handleSend(input);
+              }
+            }}
+            placeholder={
+              isGenerating
+                ? "AI is writing..."
+                : `Message multiple-ai (${MODELS.find((m) => m.id === selectedModel)?.label})...`
+            }
+            className="flex-1 bg-transparent border-0 ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 text-slate-200 placeholder-slate-500 resize-none min-h-[44px] max-h-[160px] text-sm md:text-base custom-scrollbar"
+            rows={1}
+            disabled={isGenerating}
+          />
+          
+          {isGenerating ? (
+            <Button
+              onClick={handleStop}
+              className="h-10 px-4 bg-red-600/95 hover:bg-red-700 text-white rounded-xl font-medium transition-all shadow shadow-red-950/50"
+            >
+              Stop
+            </Button>
+          ) : (
+            <Button
+              onClick={() => handleSend(input)}
+              disabled={!input.trim()}
+              className="h-10 w-10 p-0 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl shadow shadow-indigo-950/50 transition-all disabled:opacity-40"
+            >
+              <Send className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/app/multiple-ai/components/Markdown.tsx b/client/app/multiple-ai/components/Markdown.tsx
new file mode 100644
index 0000000..49725f5
--- /dev/null
+++ b/client/app/multiple-ai/components/Markdown.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import React from "react";
+import { CodeEditor } from "@/components/chategy/code-editor";
+import { normalizeShikiLang } from "@/lib/utils";
+
+interface MarkdownProps {
+  content: string;
+}
+
+export function Markdown({ content }: MarkdownProps) {
+  if (!content) return null;
+
+  // Split content by code blocks: ```lang\ncode\n```
+  const parts = content.split(/(```[\s\S]*?```)/g);
+
+  return (
+    <div className="space-y-3 text-slate-200 text-sm md:text-base leading-relaxed break-words font-sans">
+      {parts.map((part, index) => {
+        if (part.startsWith("```") && part.endsWith("```")) {
+          // Extract language and code content
+          const block = part.slice(3, -3);
+          const firstNewlineIndex = block.indexOf("\n");
+          let lang = "";
+          let code = block;
+
+          if (firstNewlineIndex !== -1) {
+            lang = block.slice(0, firstNewlineIndex).trim();
+            code = block.slice(firstNewlineIndex + 1);
+          }
+
+          const normalizedLang = normalizeShikiLang(lang) || "typescript";
+
+          return (
+            <div key={index} className="w-full my-4 overflow-hidden rounded-xl border border-white/10 shadow-2xl">
+              <CodeEditor
+                lang={normalizedLang}
+                title={lang || "code"}
+                copyButton
+                writing={false}
+                className="w-full h-auto min-h-[12rem] max-h-[30rem]"
+              >
+                {code.trim()}
+              </CodeEditor>
+            </div>
+          );
+        } else {
+          // Process standard text, headings, lists, bold text, and inline code
+          return <TextSection key={index} text={part} />;
+        }
+      })}
+    </div>
+  );
+}
+
+function TextSection({ text }: { text: string }) {
+  const paragraphs = text.split("\n\n");
+
+  return (
+    <>
+      {paragraphs.map((para, pIdx) => {
+        const trimmed = para.trim();
+        if (!trimmed) return null;
+
+        // Process bullet list
+        if (trimmed.startsWith("- ") || trimmed.startsWith("* ")) {
+          const items = trimmed
+            .split(/\n[-*]\s+/)
+            .map((item) => item.replace(/^[-*]\s+/, ""));
+          return (
+            <ul key={pIdx} className="list-disc pl-6 space-y-1.5 my-2 text-slate-300">
+              {items.map((item, iIdx) => (
+                <li key={iIdx}>
+                  <FormattedLine text={item} />
+                </li>
+              ))}
+            </ul>
+          );
+        }
+
+        // Process numbered list
+        if (/^\d+\.\s+/.test(trimmed)) {
+          const items = trimmed
+            .split(/\n\d+\.\s+/)
+            .map((item) => item.replace(/^\d+\.\s+/, ""));
+          return (
+            <ol key={pIdx} className="list-decimal pl-6 space-y-1.5 my-2 text-slate-300">
+              {items.map((item, iIdx) => (
+                <li key={iIdx}>
+                  <FormattedLine text={item} />
+                </li>
+              ))}
+            </ol>
+          );
+        }
+
+        // Process Headings
+        if (trimmed.startsWith("#")) {
+          const match = trimmed.match(/^(#{1,6})\s+(.*)$/);
+          if (match) {
+            const level = match[1].length;
+            const headingText = match[2];
+            const baseClass = "font-bold text-white tracking-tight mt-6 mb-3";
+            switch (level) {
+              case 1:
+                return <h1 key={pIdx} className={`${baseClass} text-2xl md:text-3xl border-b border-white/10 pb-2`}><FormattedLine text={headingText} /></h1>;
+              case 2:
+                return <h2 key={pIdx} className={`${baseClass} text-xl md:text-2xl border-b border-white/5 pb-1`}><FormattedLine text={headingText} /></h2>;
+              case 3:
+                return <h3 key={pIdx} className={`${baseClass} text-lg md:text-xl`}><FormattedLine text={headingText} /></h3>;
+              default:
+                return <h4 key={pIdx} className={`${baseClass} text-base md:text-lg`}><FormattedLine text={headingText} /></h4>;
+            }
+          }
+        }
+
+        // Standard paragraph
+        return (
+          <p key={pIdx} className="text-slate-300">
+            <FormattedLine text={trimmed} />
+          </p>
+        );
+      })}
+    </>
+  );
+}
+
+function FormattedLine({ text }: { text: string }) {
+  // Regex to match inline code `code` or bold text **text**
+  const regex = /(\*\*.*?\*\*|`.*?`)/g;
+  const parts = text.split(regex);
+
+  return (
+    <>
+      {parts.map((part, index) => {
+        if (part.startsWith("**") && part.endsWith("**")) {
+          return (
+            <strong key={index} className="font-semibold text-white">
+              {part.slice(2, -2)}
+            </strong>
+          );
+        } else if (part.startsWith("`") && part.endsWith("`")) {
+          return (
+            <code
+              key={index}
+              className="px-1.5 py-0.5 rounded bg-slate-800/80 text-emerald-300 font-mono text-sm border border-slate-700/50"
+            >
+              {part.slice(1, -1)}
+            </code>
+          );
+        }
+        return part;
+      })}
+    </>
+  );
+}
diff --git a/client/app/multiple-ai/components/Sidebar.tsx b/client/app/multiple-ai/components/Sidebar.tsx
new file mode 100644
index 0000000..afb2956
--- /dev/null
+++ b/client/app/multiple-ai/components/Sidebar.tsx
@@ -0,0 +1,179 @@
+"use client";
+
+import React, { useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { MessageSquare, Plus, Trash2, Bot, Code2, Search, Sparkles } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { deleteChat, createChat } from "../actions";
+import { formatDate } from "@/lib/utils";
+import { cn } from "@/lib/utils";
+
+interface ChatItem {
+  id: string;
+  title: string;
+  mode: string;
+  createdAt: Date;
+}
+
+interface SidebarProps {
+  chats: ChatItem[];
+  activeChatId?: string;
+}
+
+export function Sidebar({ chats, activeChatId }: SidebarProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  const handleNewChat = () => {
+    startTransition(async () => {
+      try {
+        const newChat = await createChat("chat");
+        router.push(`/multiple-ai/${newChat.id}`);
+      } catch (err) {
+        console.error("Failed to create new chat:", err);
+      }
+    });
+  };
+
+  const handleDeleteChat = (e: React.MouseEvent, id: string) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (confirm("Are you sure you want to delete this chat?")) {
+      startTransition(async () => {
+        try {
+          await deleteChat(id);
+          if (activeChatId === id) {
+            router.push("/multiple-ai");
+          }
+        } catch (err) {
+          console.error("Failed to delete chat:", err);
+        }
+      });
+    }
+  };
+
+  // Group chats by date
+  const getGroupedChats = () => {
+    const today: ChatItem[] = [];
+    const yesterday: ChatItem[] = [];
+    const thisWeek: ChatItem[] = [];
+    const older: ChatItem[] = [];
+
+    const now = new Date();
+    const oneDayMs = 24 * 60 * 60 * 1000;
+
+    chats.forEach((chat) => {
+      const date = new Date(chat.createdAt);
+      const diffMs = now.getTime() - date.getTime();
+      const diffDays = Math.floor(diffMs / oneDayMs);
+
+      if (diffDays === 0 && date.getDate() === now.getDate()) {
+        today.push(chat);
+      } else if (diffDays <= 1) {
+        yesterday.push(chat);
+      } else if (diffDays < 7) {
+        thisWeek.push(chat);
+      } else {
+        older.push(chat);
+      }
+    });
+
+    return { today, yesterday, thisWeek, older };
+  };
+
+  const grouped = getGroupedChats();
+
+  const renderModeIcon = (mode: string) => {
+    switch (mode) {
+      case "build":
+        return <Code2 className="h-4 w-4 text-emerald-400" />;
+      case "research":
+        return <Search className="h-4 w-4 text-blue-400" />;
+      case "agent":
+        return <Bot className="h-4 w-4 text-purple-400" />;
+      default:
+        return <MessageSquare className="h-4 w-4 text-indigo-400" />;
+    }
+  };
+
+  const renderChatListSection = (title: string, items: ChatItem[]) => {
+    if (items.length === 0) return null;
+
+    return (
+      <div className="space-y-1">
+        <h4 className="text-xs font-semibold text-slate-500 uppercase tracking-wider px-3 mb-1">
+          {title}
+        </h4>
+        {items.map((chat) => {
+          const isActive = chat.id === activeChatId;
+          return (
+            <div
+              key={chat.id}
+              onClick={() => router.push(`/multiple-ai/${chat.id}`)}
+              className={cn(
+                "group relative flex items-center justify-between px-3 py-2.5 rounded-lg cursor-pointer transition-all duration-200",
+                isActive
+                  ? "bg-slate-800/80 border border-slate-700/50 text-white shadow-md shadow-black/20"
+                  : "text-slate-400 hover:bg-slate-800/30 hover:text-slate-200"
+              )}
+            >
+              <div className="flex items-center gap-2.5 min-w-0 pr-6">
+                {renderModeIcon(chat.mode)}
+                <span className="text-sm font-medium truncate">{chat.title}</span>
+              </div>
+              <button
+                onClick={(e) => handleDeleteChat(e, chat.id)}
+                className="absolute right-2 opacity-0 group-hover:opacity-100 p-1 hover:bg-slate-700/80 rounded transition-all duration-150 text-slate-400 hover:text-red-400"
+                title="Delete Chat"
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  return (
+    <aside className="w-80 flex-shrink-0 flex flex-col h-full bg-slate-950/80 border-r border-slate-900 backdrop-blur-xl overflow-hidden">
+      {/* Header */}
+      <div className="p-4 border-b border-slate-900/60 flex items-center justify-between">
+        <div className="flex items-center gap-2" onClick={() => router.push("/")} style={{ cursor: 'pointer' }}>
+          <div className="h-8 w-8 rounded-lg bg-gradient-to-tr from-emerald-500 to-indigo-600 flex items-center justify-center shadow-lg shadow-indigo-500/20">
+            <Sparkles className="h-4.5 w-4.5 text-white" />
+          </div>
+          <span className="font-bold text-white tracking-wide text-sm lg:text-base">Multiple AI</span>
+        </div>
+      </div>
+
+      {/* Action Button */}
+      <div className="p-4">
+        <Button
+          onClick={handleNewChat}
+          disabled={isPending}
+          className="w-full flex items-center justify-center gap-2 py-5 rounded-xl border border-slate-800 bg-slate-900 hover:bg-slate-850 hover:text-white text-slate-200 font-medium transition-all shadow-md shadow-black/10 disabled:opacity-50"
+        >
+          <Plus className="h-4 w-4" />
+          New Chat
+        </Button>
+      </div>
+
+      {/* History List */}
+      <div className="flex-1 overflow-y-auto px-2 pb-6 space-y-5 custom-scrollbar">
+        {chats.length === 0 ? (
+          <div className="text-center py-8 text-slate-500 text-xs font-medium">
+            No conversation history
+          </div>
+        ) : (
+          <>
+            {renderChatListSection("Today", grouped.today)}
+            {renderChatListSection("Yesterday", grouped.yesterday)}
+            {renderChatListSection("Previous 7 Days", grouped.thisWeek)}
+            {renderChatListSection("Older", grouped.older)}
+          </>
+        )}
+      </div>
+    </aside>
+  );
+}
diff --git a/client/app/multiple-ai/layout.tsx b/client/app/multiple-ai/layout.tsx
new file mode 100644
index 0000000..7080956
--- /dev/null
+++ b/client/app/multiple-ai/layout.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { Sidebar } from "./components/Sidebar";
+import { getChats } from "./actions";
+
+interface LayoutProps {
+  children: React.ReactNode;
+  params: Promise<{ chatId?: string }>;
+}
+
+export default async function MultipleAiLayout({ children, params }: LayoutProps) {
+  const chats = await getChats();
+  const { chatId } = await params;
+
+  // Map Date objects to string/Date for Sidebar compatibility
+  const formattedChats = chats.map((chat) => ({
+    id: chat.id,
+    title: chat.title,
+    mode: chat.mode,
+    createdAt: chat.createdAt,
+  }));
+
+  return (
+    <div className="h-screen flex bg-slate-950 overflow-hidden text-slate-100 font-sans">
+      <Sidebar chats={formattedChats} activeChatId={chatId} />
+      <main className="flex-1 flex flex-col min-w-0 overflow-hidden relative">
+        {/* Background Gradients */}
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_#0f172a_0%,_#020617_60%,_#000000_100%)] pointer-events-none" />
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#0f172a15_1px,transparent_1px),linear-gradient(to_bottom,#0f172a15_1px,transparent_1px)] bg-[size:4rem_4rem] pointer-events-none" />
+        
+        {/* Children Render */}
+        <div className="relative flex-1 flex flex-col min-w-0 overflow-hidden">
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/client/app/multiple-ai/page.tsx b/client/app/multiple-ai/page.tsx
new file mode 100644
index 0000000..5e3fb7b
--- /dev/null
+++ b/client/app/multiple-ai/page.tsx
@@ -0,0 +1,231 @@
+"use client";
+
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Send, Sparkles, MessageSquare, Bot, Code2, Search, Zap, Cpu, ArrowRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Card } from "@/components/ui/card";
+import { MODELS } from "@/constants/models";
+import { CHAT_MODES, ChatMode } from "@/constants/modes";
+import { createChat, saveUserMessage } from "./actions";
+
+export default function NewChatPage() {
+  const router = useRouter();
+  const [input, setInput] = useState("");
+  const [selectedModel, setSelectedModel] = useState("gemini-2.0-flash");
+  const [selectedMode, setSelectedMode] = useState<ChatMode>("chat");
+  const [isCreating, setIsCreating] = useState(false);
+
+  const handleSend = async (textToSend: string, overrideModel?: string, overrideMode?: ChatMode) => {
+    if (!textToSend.trim() || isCreating) return;
+
+    setIsCreating(true);
+    const model = overrideModel || selectedModel;
+    const mode = overrideMode || selectedMode;
+
+    try {
+      // 1. Create a new chat session
+      const chat = await createChat(mode);
+
+      // 2. Save the user's message
+      await saveUserMessage({
+        chatId: chat.id,
+        content: textToSend,
+        modelId: model,
+        mode: mode,
+      });
+
+      // 3. Redirect to the chat page
+      router.push(`/multiple-ai/${chat.id}`);
+    } catch (err) {
+      console.error("Failed to initialize chat:", err);
+      setIsCreating(false);
+    }
+  };
+
+  const renderProviderIcon = (provider: string) => {
+    switch (provider) {
+      case "openai":
+        return <Zap className="h-3.5 w-3.5 text-orange-400" />;
+      case "anthropic":
+        return <Cpu className="h-3.5 w-3.5 text-amber-500" />;
+      default:
+        return <Sparkles className="h-3.5 w-3.5 text-cyan-400" />;
+    }
+  };
+
+  const renderModeIcon = (mode: string) => {
+    switch (mode) {
+      case "build":
+        return <Code2 className="h-3.5 w-3.5 text-emerald-400" />;
+      case "research":
+        return <Search className="h-3.5 w-3.5 text-blue-400" />;
+      case "agent":
+        return <Bot className="h-3.5 w-3.5 text-purple-400" />;
+      default:
+        return <MessageSquare className="h-3.5 w-3.5 text-indigo-400" />;
+    }
+  };
+
+  const starters = [
+    {
+      title: "Write a React Hook",
+      desc: "Implement debounce logic with clean Typescript types",
+      prompt: "Write a complete custom React hook `useDebounce` in TypeScript, including a code execution example showing how it is used.",
+      mode: "build",
+      model: "gemini-2.0-flash",
+    },
+    {
+      title: "SQL vs NoSQL Design",
+      desc: "Compare transactional speed vs flexibility",
+      prompt: "Explain the architecture differences between Postgres (SQL) and MongoDB (NoSQL). Design a database schema for an e-commerce catalog in both, comparing pros and cons.",
+      mode: "research",
+      model: "gemini-2.5-pro",
+    },
+    {
+      title: "Code review helper",
+      desc: "Analyze safety issues in a JWT sign method",
+      prompt: "Can you analyze standard JWT token security risks and write a secure Node.js JWT signing & verification middleware implementation?",
+      mode: "chat",
+      model: "gpt-4o-mini",
+    },
+    {
+      title: "AI Agent Workflow",
+      desc: "Explain multi-agent state machines",
+      prompt: "Explain the concept of an AI Agent. Describe how LangGraph or state machines are used to control autonomous agent workflows step by step.",
+      mode: "agent",
+      model: "gemini-2.0-flash",
+    },
+  ];
+
+  return (
+    <div className="flex-1 flex flex-col h-full bg-slate-900/40 relative justify-between">
+      {/* Top Header Bar */}
+      <div className="h-16 border-b border-slate-900 flex items-center justify-between px-6 bg-slate-950/30 backdrop-blur-md z-10">
+        <div className="flex items-center gap-2">
+          <span className="text-slate-400 text-xs font-medium uppercase tracking-widest">Active Model</span>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* Model Selector */}
+          <div className="flex items-center gap-1.5">
+            <Select value={selectedModel} onValueChange={setSelectedModel} disabled={isCreating}>
+              <SelectTrigger className="w-[180px] bg-slate-950/60 border-slate-800 text-slate-200 text-xs rounded-xl focus:ring-1 focus:ring-indigo-500">
+                <SelectValue placeholder="Select Model" />
+              </SelectTrigger>
+              <SelectContent className="bg-slate-950 border-slate-800 text-slate-300">
+                {MODELS.map((model) => (
+                  <SelectItem
+                    key={model.id}
+                    value={model.id}
+                    className="focus:bg-slate-800 focus:text-white"
+                  >
+                    <div className="flex items-center gap-2">
+                      {renderProviderIcon(model.provider)}
+                      <span>{model.label}</span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Mode Selector */}
+          <div className="flex items-center gap-1.5">
+            <Select value={selectedMode} onValueChange={(v) => setSelectedMode(v as ChatMode)} disabled={isCreating}>
+              <SelectTrigger className="w-[140px] bg-slate-950/60 border-slate-800 text-slate-200 text-xs rounded-xl focus:ring-1 focus:ring-indigo-500">
+                <SelectValue placeholder="Select Mode" />
+              </SelectTrigger>
+              <SelectContent className="bg-slate-950 border-slate-800 text-slate-300">
+                {CHAT_MODES.map((cfg) => (
+                  <SelectItem
+                    key={cfg.id}
+                    value={cfg.id}
+                    className="focus:bg-slate-800 focus:text-white"
+                  >
+                    <div className="flex items-center gap-2">
+                      {renderModeIcon(cfg.id)}
+                      <span>{cfg.label}</span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Landing / Starters */}
+      <div className="flex-1 overflow-y-auto px-6 py-8 space-y-6 flex flex-col justify-center custom-scrollbar">
+        <div className="max-w-3xl mx-auto w-full flex flex-col justify-center py-6">
+          <div className="text-center mb-10">
+            <div className="mx-auto h-12 w-12 rounded-2xl bg-gradient-to-tr from-emerald-500/20 to-indigo-500/20 flex items-center justify-center mb-4 border border-indigo-500/20">
+              <Sparkles className="h-6 w-6 text-indigo-400" />
+            </div>
+            <h2 className="text-2xl md:text-3xl font-bold text-white mb-2 tracking-tight">Configure & Query</h2>
+            <p className="text-slate-400 text-sm max-w-md mx-auto">
+              Select your LLM engine, choose the task mode, and send a message. Every conversation is automatically persisted.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {starters.map((starter, idx) => (
+              <Card
+                key={idx}
+                onClick={() => handleSend(starter.prompt, starter.model, starter.mode as ChatMode)}
+                className="p-5 bg-slate-950/40 border-slate-855/60 hover:border-indigo-500/50 hover:bg-slate-950/80 cursor-pointer rounded-2xl transition-all duration-305 group shadow-md shadow-black/10"
+              >
+                <div className="flex justify-between items-start mb-2">
+                  <h3 className="font-semibold text-white group-hover:text-indigo-300 text-sm md:text-base transition-colors">
+                    {starter.title}
+                  </h3>
+                  <ArrowRight className="h-4 w-4 text-slate-500 group-hover:text-indigo-400 group-hover:translate-x-1 transition-all" />
+                </div>
+                <p className="text-xs text-slate-400 leading-relaxed">{starter.desc}</p>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Input controls area */}
+      <div className="p-6 bg-slate-950/20 backdrop-blur-md border-t border-slate-900/60">
+        <div className="max-w-4xl mx-auto flex items-end gap-3 bg-slate-950/60 border border-slate-800 p-2.5 rounded-2xl focus-within:border-indigo-500/50 shadow-inner shadow-black/20">
+          <Textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                handleSend(input);
+              }
+            }}
+            placeholder={
+              isCreating
+                ? "Starting conversation..."
+                : `Message multiple-ai (${MODELS.find((m) => m.id === selectedModel)?.label})...`
+            }
+            className="flex-1 bg-transparent border-0 ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 text-slate-200 placeholder-slate-500 resize-none min-h-[44px] max-h-[160px] text-sm md:text-base custom-scrollbar"
+            rows={1}
+            disabled={isCreating}
+          />
+          <Button
+            onClick={() => handleSend(input)}
+            disabled={!input.trim() || isCreating}
+            className="h-10 w-10 p-0 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl shadow shadow-indigo-950/50 transition-all disabled:opacity-40"
+          >
+            <Send className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/app/page.tsx b/client/app/page.tsx
index d6d3847..b879dc1 100644
--- a/client/app/page.tsx
+++ b/client/app/page.tsx
@@ -11,22 +11,6 @@ export const metadata: Metadata = {
 };
 
 export default async function RootPage() {
-  // const { data, error } = await api.POST("/api/v1/auth/login", {
-  //   body: {
-  //     username: "mohamed@gmail.com",
-  //     password: "01093588197Mm!",
-  //     scope: "",
-  //   },
-
-  //   headers: {
-  //     "Content-Type": "application/x-www-form-urlencoded",
-  //   },
-
-  //   bodySerializer(body) {
-  //     return new URLSearchParams(body as Record<string, string>);
-  //   },
-  // });
-  //   console.log(data,error)
 
   return (
     <DotPattern className="min-h-screen bg-[radial-gradient(circle_at_top,_#065f46_0%,_#022c22_40%,_#020617_100%)]">
diff --git a/client/constants/models.ts b/client/constants/models.ts
new file mode 100644
index 0000000..85f21d6
--- /dev/null
+++ b/client/constants/models.ts
@@ -0,0 +1,91 @@
+import { ModelDefinition, ModelGroup } from "@/types/model";
+
+export const MODELS: ModelDefinition[] = [
+  // OpenAI
+  {
+    id: "gpt-4.1",
+    label: "GPT-4.1",
+    description: "Most capable OpenAI model",
+    provider: "openai",
+    contextWindow: 128_000,
+    capabilities: { supportsTools: true, supportsVision: true, supportsStreaming: true },
+  },
+  {
+    id: "gpt-4o",
+    label: "GPT-4o",
+    description: "Fast, multimodal OpenAI model",
+    provider: "openai",
+    contextWindow: 128_000,
+    capabilities: { supportsTools: true, supportsVision: true, supportsStreaming: true },
+  },
+  {
+    id: "gpt-4o-mini",
+    label: "GPT-4o Mini",
+    description: "Affordable and fast",
+    provider: "openai",
+    contextWindow: 128_000,
+    capabilities: { supportsTools: true, supportsVision: true, supportsStreaming: true },
+  },
+  // Anthropic
+  {
+    id: "claude-opus-4-5",
+    label: "Claude Opus",
+    description: "Most powerful Claude model",
+    provider: "anthropic",
+    contextWindow: 200_000,
+    capabilities: { supportsTools: true, supportsVision: true, supportsStreaming: true },
+  },
+  {
+    id: "claude-sonnet-4-5",
+    label: "Claude Sonnet",
+    description: "Balanced performance and speed",
+    provider: "anthropic",
+    contextWindow: 200_000,
+    capabilities: { supportsTools: true, supportsVision: true, supportsStreaming: true },
+  },
+  {
+    id: "claude-haiku-4-5",
+    label: "Claude Haiku",
+    description: "Fast and compact",
+    provider: "anthropic",
+    contextWindow: 200_000,
+    capabilities: { supportsTools: true, supportsVision: false, supportsStreaming: true },
+  },
+  // Google
+  {
+    id: "gemini-2.5-pro",
+    label: "Gemini 2.5 Pro",
+    description: "Google's most capable model",
+    provider: "google",
+    contextWindow: 1_000_000,
+    capabilities: { supportsTools: true, supportsVision: true, supportsStreaming: true },
+  },
+  {
+    id: "gemini-2.0-flash",
+    label: "Gemini 2.0 Flash",
+    description: "Fast and efficient",
+    provider: "google",
+    contextWindow: 1_000_000,
+    capabilities: { supportsTools: true, supportsVision: true, supportsStreaming: true },
+  },
+];
+
+export const MODEL_GROUPS: ModelGroup[] = [
+  {
+    provider: "openai",
+    label: "OpenAI",
+    models: MODELS.filter((m) => m.provider === "openai"),
+  },
+  {
+    provider: "anthropic",
+    label: "Anthropic",
+    models: MODELS.filter((m) => m.provider === "anthropic"),
+  },
+  {
+    provider: "google",
+    label: "Google",
+    models: MODELS.filter((m) => m.provider === "google"),
+  },
+];
+
+export const DEFAULT_MODEL_ID = "claude-sonnet-4-5";
diff --git a/client/constants/modes.ts b/client/constants/modes.ts
new file mode 100644
index 0000000..e119b5c
--- /dev/null
+++ b/client/constants/modes.ts
@@ -0,0 +1,60 @@
+
+export type ChatMode = "chat" | "build" | "research" | "agent"
+ 
+export type ModeConfig = {
+    id: ChatMode
+    label: string 
+    description: string 
+    icon: string 
+    systemPrompt: string 
+    temperature: number
+    tools: string[]
+}
+
+
+export const MODE_CONFIGS: Record<ChatMode, ModeConfig> = {
+  chat: {
+    id: "chat",
+    label: "Chat",
+    description: "General purpose conversation",
+    icon: "MessageSquare",
+    systemPrompt:
+      "You are a helpful, harmless, and honest AI assistant. Provide clear, accurate, and thoughtful responses.",
+    temperature: 0.7,
+    tools: [],
+  },
+  build: {
+    id: "build",
+    label: "Build",
+    description: "Software engineering and code",
+    icon: "Code2",
+    systemPrompt:
+      "You are an expert software engineer with deep knowledge of architecture, design patterns, and best practices. Focus on writing clean, maintainable, and well-documented code. Always consider edge cases, error handling, and performance.",
+    temperature: 0.3,
+    tools: ["code_execution"],
+  },
+  research: {
+    id: "research",
+    label: "Research",
+    description: "Deep analysis and research",
+    icon: "Search",
+    systemPrompt:
+      "You are a meticulous research assistant. Provide comprehensive, well-sourced, and nuanced analysis. Break down complex topics clearly. Acknowledge uncertainty and conflicting evidence. Structure your responses with clear sections.",
+    temperature: 0.5,
+    tools: ["web_search"],
+  },
+  agent: {
+    id: "agent",
+    label: "Agent",
+    description: "Autonomous task execution",
+    icon: "Bot",
+    systemPrompt:
+      "You are an autonomous AI agent capable of breaking down complex tasks and executing them step by step. Think carefully about your plan before acting. Use available tools effectively. Report your progress and reasoning clearly.",
+    temperature: 0.4,
+    tools: ["code_execution", "web_search", "file_ops"],
+  },
+};
+
+export const DEFAULT_MODE: ChatMode = "chat";
+
+export const CHAT_MODES = Object.values(MODE_CONFIGS);
diff --git a/client/lib/ai/models.ts b/client/lib/ai/models.ts
new file mode 100644
index 0000000..357d1f6
--- /dev/null
+++ b/client/lib/ai/models.ts
@@ -0,0 +1,22 @@
+import { z } from "zod"
+import { MODELS } from "@/constants/models"
+import type { ModelDefinition } from "@/types/model"
+
+const modelIds = MODELS.map((m) => m.id) as [string, ...string[]]
+
+export const ModelIdSchema = z.enum(modelIds)
+export type ModelId = z.infer<typeof ModelIdSchema>
+
+export const MODEL_REGISTRY = new Map<string, ModelDefinition>(
+    MODELS.map((m) => [m.id, m])
+)
+
+export function getModelDefinition(id: string) : ModelDefinition {
+    const model = MODEL_REGISTRY.get(id)
+    if(!model) throw new Error(`Unknown model ID: "${id}". Check your constants/models.ts.`)
+    return model
+}
+
+export function isValidModelId(id: string): id is ModelId {
+    return MODEL_REGISTRY.has(id)
+}
\ No newline at end of file
diff --git a/client/lib/ai/modes.ts b/client/lib/ai/modes.ts
new file mode 100644
index 0000000..457ab91
--- /dev/null
+++ b/client/lib/ai/modes.ts
@@ -0,0 +1,20 @@
+import { z } from "zod" 
+import { MODE_CONFIGS} from "@/constants/modes"
+import type { ChatMode } from "@/constants/modes"
+import { ModeConfig } from "@/constants/modes"
+
+export const ChatModeSchema = z.enum(["chat","build","research","agent"])
+
+export function getModeConfig(mode: ChatMode): ModeConfig {
+    const config = MODE_CONFIGS[mode]
+    if(!config) throw new Error(`Unknown chat mode: ${mode}`)
+    return config
+}
+
+export function buildSystemPrompt(mode:ChatMode): string {
+    return getModeConfig(mode).systemPrompt
+}
+
+export function getModeTemperature(mode: ChatMode): number {
+    return getModeConfig(mode).temperature
+}
\ No newline at end of file
diff --git a/client/lib/ai/prompt.ts b/client/lib/ai/prompt.ts
new file mode 100644
index 0000000..1ff2d56
--- /dev/null
+++ b/client/lib/ai/prompt.ts
@@ -0,0 +1,28 @@
+import type { ChatMode } from "@/constants/modes";
+import { buildSystemPrompt } from "./modes";
+
+type PromptContext = {
+    mode: ChatMode
+    context?: string
+}
+
+// Build the full system prompt for a chat request
+// Extended this function when adding RAG or tool-calling context
+
+export function buildFullSystemPrompt({ mode, context }: PromptContext): string {
+  const base = buildSystemPrompt(mode);
+
+  if (!context) return base;
+
+  return [
+    base,
+    "",
+    "## Relevant context",
+    context,
+  ].join("\n");
+}
+
+// Short title 
+export function generateChatTitle(firstMessage: string): string {
+    return firstMessage.trim().slice(0,50)
+}
\ No newline at end of file
diff --git a/client/lib/ai/providers.ts b/client/lib/ai/providers.ts
new file mode 100644
index 0000000..1f401cf
--- /dev/null
+++ b/client/lib/ai/providers.ts
@@ -0,0 +1,55 @@
+import { createOpenAI} from "@ai-sdk/openai"
+import { createGoogleGenerativeAI } from "@ai-sdk/google";
+import { createAnthropic } from "@ai-sdk/anthropic";
+import type { LanguageModel } from "ai";
+import { getModelDefinition } from "./models";
+
+// Lazy-initialised provider singletons — avoids creating instances at module
+// load time when env vars might not yet be set (e.g. during build).
+let _openai: ReturnType<typeof createOpenAI> | null = null;
+let _anthropic: ReturnType<typeof createAnthropic> | null = null;
+let _google: ReturnType<typeof createGoogleGenerativeAI> | null = null;
+
+function getOpenAI() {
+  if (!_openai) {
+    if (!process.env.OPENAI_API_KEY) throw new Error("OPENAI_API_KEY is not set");
+    _openai = createOpenAI({ apiKey: process.env.OPENAI_API_KEY });
+  }
+  return _openai;
+}
+
+function getAnthropic() {
+  if (!_anthropic) {
+    if (!process.env.ANTHROPIC_API_KEY) throw new Error("ANTHROPIC_API_KEY is not set");
+    _anthropic = createAnthropic({ apiKey: process.env.ANTHROPIC_API_KEY });
+  }
+  return _anthropic;
+}
+
+function getGoogle() {
+  if (!_google) {
+    const apiKey = process.env.GOOGLE_API_KEY || process.env.GOOGLE_GENERATIVE_AI_API_KEY;
+    if (!apiKey) throw new Error("GOOGLE_API_KEY or GOOGLE_GENERATIVE_AI_API_KEY is not set");
+    _google = createGoogleGenerativeAI({ apiKey });
+  }
+  return _google;
+}
+
+/**
+ * Resolves a model ID string to a Vercel AI SDK LanguageModel instance.
+ * The provider is determined from the model registry — no provider param needed.
+ */
+export function resolveModel(modelId: string): LanguageModel {
+  const definition = getModelDefinition(modelId);
+
+  switch (definition.provider) {
+    case "openai":
+      return getOpenAI()(modelId) as LanguageModel;
+    case "anthropic":
+      return getAnthropic()(modelId) as LanguageModel;
+    case "google":
+      return getGoogle()(modelId) as LanguageModel;
+    default:
+      throw new Error(`Unsupported provider: ${definition.provider}`);
+  }
+}
diff --git a/client/lib/ai/schemas.ts b/client/lib/ai/schemas.ts
new file mode 100644
index 0000000..8b5b149
--- /dev/null
+++ b/client/lib/ai/schemas.ts
@@ -0,0 +1,17 @@
+import { z } from "zod"
+import { ModelIdSchema } from "./models"
+import { ChatModeSchema} from "./modes"
+
+export const AIMessageSchema = z.object({
+  role: z.enum(["user", "assistant", "system"]),
+  content: z.string().min(1, "Message content cannot be empty"),
+});
+
+export const ChatRequestSchema = z.object({
+  chatId: z.string().cuid("Invalid chat ID"),
+  messages: z.array(AIMessageSchema).min(1, "At least one message is required"),
+  modelId: ModelIdSchema,
+  mode: ChatModeSchema,
+});
+
+export type ChatRequest = z.infer<typeof ChatRequestSchema>;
diff --git a/client/lib/ai/stream.ts b/client/lib/ai/stream.ts
new file mode 100644
index 0000000..5b25564
--- /dev/null
+++ b/client/lib/ai/stream.ts
@@ -0,0 +1,43 @@
+import { streamText } from "ai";
+import { resolveModel } from "./providers";
+
+import { ChatModeSchema, getModeConfig } from "./modes";
+// import { activeTools } from "./tools";
+import { ChatMode } from "@/constants/modes";
+import { activeTools } from "./tools";
+import { buildFullSystemPrompt, generateChatTitle } from "./prompt";
+
+type StreamChatOptions = {
+  chatId: string;
+  messages: any;
+  modelId: string;
+  mode: ChatMode;
+  onFinish?: (event: any) => Promise<void> | void;
+};
+
+/**
+ * Core streaming function used by the API route.
+ * Returns a Vercel AI SDK streamText result ready to be converted to a Response.
+ */
+export function streamChat({
+  messages,
+  modelId,
+  mode,
+  onFinish,
+}: StreamChatOptions) {
+  const model = resolveModel(modelId);
+  const modeConfig = getModeConfig(mode);
+  const system = buildFullSystemPrompt({ mode });
+  const tools = activeTools(modeConfig.tools);
+
+  return streamText({
+    model,
+    system,
+    messages,
+    temperature: modeConfig.temperature,
+    ...(Object.keys(tools).length > 0 ? { tools } : {}),
+    onFinish,
+  });
+}
+
+export { generateChatTitle };
diff --git a/client/lib/ai/tools.ts b/client/lib/ai/tools.ts
new file mode 100644
index 0000000..3b63d54
--- /dev/null
+++ b/client/lib/ai/tools.ts
@@ -0,0 +1,39 @@
+/**
+ * Tool registry — future home for all tool definitions.
+ *
+ * When you're ready to add tools:
+ * 1. Define your tool using the Vercel AI SDK `tool()` helper.
+ * 2. Add it to TOOL_REGISTRY below.
+ * 3. Reference the tool ID in src/constants/modes.ts for the relevant mode(s).
+ * 4. Pass activeTools() into the `tools` option of streamText() in the API route.
+ *
+ * Example (uncomment when ready):
+ *
+ * import { tool } from "ai";
+ * import { z } from "zod";
+ *
+ * const webSearchTool = tool({
+ *   description: "Search the web for up-to-date information",
+ *   parameters: z.object({ query: z.string() }),
+ *   execute: async ({ query }) => { ... },
+ * });
+ */
+
+import type { ToolSet } from "ai";
+
+export const TOOL_REGISTRY: ToolSet = {
+  // web_search: webSearchTool,
+  // code_execution: codeExecutionTool,
+  // file_ops: fileOpsTool,
+};
+
+/**
+ * Returns the subset of tools that should be active for a given list of tool IDs.
+ */
+export function activeTools(toolIds: string[]): ToolSet {
+  return Object.fromEntries(
+    toolIds
+      .filter((id) => id in TOOL_REGISTRY)
+      .map((id) => [id, TOOL_REGISTRY[id]])
+  ) as ToolSet;
+}
diff --git a/client/lib/ai/types.ts b/client/lib/ai/types.ts
new file mode 100644
index 0000000..59fa87e
--- /dev/null
+++ b/client/lib/ai/types.ts
@@ -0,0 +1,27 @@
+import type { ChatMode } from "@/constants/modes";
+import { ModelDefinition } from "@/types/model";
+
+export type AIMessage = {
+    role: "user" | "assistant" | "system"
+    content: string
+}
+
+export type StreamRequest = {
+    chatId: string 
+    messages: AIMessage[]
+    modelId: string
+    mode: ChatMode
+}
+
+export type StreamMetadata = {
+    model: string
+    mode: ChatMode 
+    promptTokens: number
+    completionTokens: number
+    durationMs: number
+}
+
+export type ResolvedModel = {
+    definition: ModelDefinition
+    instance: ReturnType<typeof import("ai").wrapLanguageModel>;
+}
\ No newline at end of file
diff --git a/client/lib/utils.ts b/client/lib/utils.ts
index 5cb7554..696e391 100644
--- a/client/lib/utils.ts
+++ b/client/lib/utils.ts
@@ -126,3 +126,27 @@ export function extractCodeSnippets(payload: unknown): CodeSnippet[] {
   visit(payload);
   return snippets;
 }
+
+
+export function formatDate(date: Date | string): string {
+  const d = typeof date === "string" ? new Date(date) : date
+  const now = new Date()
+  const diffMs = now.getTime() - d.getTime()
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+
+  if (diffDays === 0) {
+    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  } else if (diffDays === 1) {
+    return "Yesterday";
+  } else if (diffDays < 7) {
+    return d.toLocaleDateString([], { weekday: "long" });
+  } else {
+    return d.toLocaleDateString([], { month: "short", day: "numeric" });
+  }
+}
+
+
+export function truncate(str: string, maxLength: number): string {
+  if (str.length <= maxLength) return str;
+  return str.slice(0, maxLength).trimEnd() + "…";
+}
diff --git a/client/package-lock.json b/client/package-lock.json
index 1038395..179bf6c 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -8,6 +8,9 @@
       "name": "client",
       "version": "0.1.0",
       "dependencies": {
+        "@ai-sdk/anthropic": "^3.0.81",
+        "@ai-sdk/google": "^3.0.80",
+        "@ai-sdk/openai": "^3.0.66",
         "@hookform/resolvers": "^5.2.2",
         "@next/bundle-analyzer": "^16.2.3",
         "@prisma/adapter-pg": "^7.5.0",
@@ -23,6 +26,7 @@
         "@tanstack/react-query-devtools": "^5.91.3",
         "@tanstack/react-table": "^8.21.3",
         "@tanstack/react-virtual": "^3.13.23",
+        "ai": "^6.0.193",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
@@ -77,6 +81,100 @@
         "typescript": "^5"
       }
     },
+    "node_modules/@ai-sdk/anthropic": {
+      "version": "3.0.81",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/anthropic/-/anthropic-3.0.81.tgz",
+      "integrity": "sha512-B1JDd9Ugq9R5AgIaW3674lhGCMMYJcPUxnrZh8fzbGojgg4QvHFRv6eZahGQAUsmGHbcf74G9bdSBDLWQGY2GA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "3.0.10",
+        "@ai-sdk/provider-utils": "4.0.27"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4.1.8"
+      }
+    },
+    "node_modules/@ai-sdk/gateway": {
+      "version": "3.0.121",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/gateway/-/gateway-3.0.121.tgz",
+      "integrity": "sha512-uY248djJRxa5W68MHiyqO8WLdOeKQoRClGg7PVX/VPhVW8SJNM7/l5DcrA5WAM3YfQrLyNkgZa2VOu8T0t8LUw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "3.0.10",
+        "@ai-sdk/provider-utils": "4.0.27",
+        "@vercel/oidc": "3.2.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4.1.8"
+      }
+    },
+    "node_modules/@ai-sdk/google": {
+      "version": "3.0.80",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/google/-/google-3.0.80.tgz",
+      "integrity": "sha512-5ORbm/yFUPO0MEvZsxBMN0cdKw2+lwU/wVn5KN3KF8Dmk1LughuDuUohMh/7iU/XFTiyB0OvmTW/tdV/J7O9zg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "3.0.10",
+        "@ai-sdk/provider-utils": "4.0.27"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4.1.8"
+      }
+    },
+    "node_modules/@ai-sdk/openai": {
+      "version": "3.0.66",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/openai/-/openai-3.0.66.tgz",
+      "integrity": "sha512-n9mZ7PbU7O2zN8UMcx495Gfx7sE/rL4KS+o5JzBOUbYJCuwEIxKO6yJaUkxa4r6IyiLxyGib0jegZw91Hh0diA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "3.0.10",
+        "@ai-sdk/provider-utils": "4.0.27"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4.1.8"
+      }
+    },
+    "node_modules/@ai-sdk/provider": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-3.0.10.tgz",
+      "integrity": "sha512-Q3BZ27qfpYqnCYGvE3vt+Qi6LGOF9R5Nmzn+9JoM1lCRsD9mYaIhfJLkSunN48nfGXJ6n+XNV0J/XVpqGQl7Dw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "json-schema": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@ai-sdk/provider-utils": {
+      "version": "4.0.27",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-4.0.27.tgz",
+      "integrity": "sha512-ubkAJ+xODouwtmN1tYlvTPphH1hPOBfZaEQe8U7skGvFAnIRs9PPpsq57bC2+Ky/MB4yzhd6YOsxTAx9sGpazw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "3.0.10",
+        "@standard-schema/spec": "^1.1.0",
+        "eventsource-parser": "^3.0.8"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4.1.8"
+      }
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -7380,6 +7478,15 @@
         "win32"
       ]
     },
+    "node_modules/@vercel/oidc": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@vercel/oidc/-/oidc-3.2.0.tgz",
+      "integrity": "sha512-UycprH3T6n3jH0k44NHMa7pnFHGu/N05MjojYr+Mc6I7obkoLIJujSWwin1pCvdy/eOxrI/l3uDLQsmcrOb4ug==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
@@ -7625,6 +7732,24 @@
         "node": ">= 14"
       }
     },
+    "node_modules/ai": {
+      "version": "6.0.193",
+      "resolved": "https://registry.npmjs.org/ai/-/ai-6.0.193.tgz",
+      "integrity": "sha512-VQOTOse8+X8kMtg61DNSXlYJzwOW4NjMLDJNk/qxClWsFe4oiyFJDHGGG1oezfGcFzuYuQe/8Z7r4kwiZWh2YQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/gateway": "3.0.121",
+        "@ai-sdk/provider": "3.0.10",
+        "@ai-sdk/provider-utils": "4.0.27",
+        "@opentelemetry/api": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4.1.8"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
@@ -9966,10 +10091,9 @@
       }
     },
     "node_modules/eventsource-parser": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.6.tgz",
-      "integrity": "sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==",
-      "dev": true,
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.1.0.tgz",
+      "integrity": "sha512-kJezFj9YFAMLeORyi7aCLxLbD5/qWMQnoMVlVPyHIll7lgRJCc3JVln9Vgl9nwQi0YkMnhdGTMNn7CkRRAptMg==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -11989,6 +12113,12 @@
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "license": "MIT"
     },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "license": "(AFL-2.1 OR BSD-3-Clause)"
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
diff --git a/client/package.json b/client/package.json
index 0d2bc66..bc4167f 100644
--- a/client/package.json
+++ b/client/package.json
@@ -14,6 +14,9 @@
     "generate:api": "openapi-typescript https://playground-ecommerce-fastapi.vercel.app/openapi.json -o lib/api/schema.ts"
   },
   "dependencies": {
+    "@ai-sdk/anthropic": "^3.0.81",
+    "@ai-sdk/google": "^3.0.80",
+    "@ai-sdk/openai": "^3.0.66",
     "@hookform/resolvers": "^5.2.2",
     "@next/bundle-analyzer": "^16.2.3",
     "@prisma/adapter-pg": "^7.5.0",
@@ -29,6 +32,7 @@
     "@tanstack/react-query-devtools": "^5.91.3",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.23",
+    "ai": "^6.0.193",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
diff --git a/client/types/chat.ts b/client/types/chat.ts
new file mode 100644
index 0000000..0ecc717
--- /dev/null
+++ b/client/types/chat.ts
@@ -0,0 +1,11 @@
+import { ChatMode, MessageRole } from "@/lib/generated/prisma/enums";
+
+export type CreateChatInput = {
+    mode?: ChatMode 
+    title?: string
+}
+
+export type UpdateChatInput = {
+    title?: string 
+    mode?: ChatMode
+}
\ No newline at end of file
diff --git a/client/types/model.ts b/client/types/model.ts
new file mode 100644
index 0000000..1e3ddba
--- /dev/null
+++ b/client/types/model.ts
@@ -0,0 +1,22 @@
+export type ModelProvider = "openai" | "anthropic" | "google"
+
+export type ModelCapabilities = {
+    supportsTools: boolean
+    supportsVision: boolean 
+    supportsStreaming: boolean
+}
+
+export type ModelDefinition = {
+    id: string 
+    label: string 
+    description: string 
+    provider: ModelProvider 
+    contextWindow: number
+    capabilities: ModelCapabilities
+}
+
+export type ModelGroup = {
+    provider: ModelProvider
+    label: string 
+    models: ModelDefinition[]
+}
\ No newline at end of file