feat: switch to official openai client

ai/providers.ts

@@ -1,117 +0,0 @@
-import { createOpenAI } from "@ai-sdk/openai";
-import { createGroq } from "@ai-sdk/groq";
-import { createAnthropic } from "@ai-sdk/anthropic";
-import { createXai } from "@ai-sdk/xai";
-
-import { 
-  customProvider, 
-  wrapLanguageModel, 
-  extractReasoningMiddleware 
-} from "ai";
-
-export interface ModelInfo {
-  provider: string;
-  name: string;
-  description: string;
-  apiVersion: string;
-  capabilities: string[];
-}
-
-const middleware = extractReasoningMiddleware({
-  tagName: 'think',
-});
-
-// Helper to get API keys from environment variables first, then localStorage
-const getApiKey = (key: string): string | undefined => {
-  // Check for environment variables first
-  if (process.env[key]) {
-    return process.env[key] || undefined;
-  }
-  
-  // Fall back to localStorage if available
-  if (typeof window !== 'undefined') {
-    return window.localStorage.getItem(key) || undefined;
-  }
-  
-  return undefined;
-};
-
-// Create provider instances with API keys from localStorage
-const openaiClient = createOpenAI({
-  apiKey: getApiKey('OPENAI_API_KEY'),
-});
-
-const anthropicClient = createAnthropic({
-  apiKey: getApiKey('ANTHROPIC_API_KEY'),
-});
-
-const groqClient = createGroq({
-  apiKey: getApiKey('GROQ_API_KEY'),
-});
-
-const xaiClient = createXai({
-  apiKey: getApiKey('XAI_API_KEY'),
-});
-
-const languageModels = {
-  "gpt-4.1-mini": openaiClient("gpt-4.1-mini"),
-  "claude-3-7-sonnet": anthropicClient('claude-3-7-sonnet-20250219'),
-  "qwen-qwq": wrapLanguageModel(
-    {
-      model: groqClient("qwen-qwq-32b"),
-      middleware
-    }
-  ),
-  "grok-3-mini": xaiClient("grok-3-mini-latest"),
-};
-
-export const modelDetails: Record<keyof typeof languageModels, ModelInfo> = {
-  "gpt-4.1-mini": {
-    provider: "OpenAI",
-    name: "GPT-4.1 Mini",
-    description: "Compact version of OpenAI's GPT-4.1 with good balance of capabilities, including vision.",
-    apiVersion: "gpt-4.1-mini",
-    capabilities: ["Balance", "Creative", "Vision"]
-  },
-  "claude-3-7-sonnet": {
-    provider: "Anthropic",
-    name: "Claude 3.7 Sonnet",
-    description: "Latest version of Anthropic's Claude 3.7 Sonnet with strong reasoning and coding capabilities.",
-    apiVersion: "claude-3-7-sonnet-20250219",
-    capabilities: ["Reasoning", "Efficient", "Agentic"]
-  },
-  "qwen-qwq": {
-    provider: "Groq",
-    name: "Qwen QWQ",
-    description: "Latest version of Alibaba's Qwen QWQ with strong reasoning and coding capabilities.",
-    apiVersion: "qwen-qwq",
-    capabilities: ["Reasoning", "Efficient", "Agentic"]
-  },
-  "grok-3-mini": {
-    provider: "XAI",
-    name: "Grok 3 Mini",
-    description: "Latest version of XAI's Grok 3 Mini with strong reasoning and coding capabilities.",
-    apiVersion: "grok-3-mini-latest",
-    capabilities: ["Reasoning", "Efficient", "Agentic"]
-  },
-};
-
-// Update API keys when localStorage changes (for runtime updates)
-if (typeof window !== 'undefined') {
-  window.addEventListener('storage', (event) => {
-    // Reload the page if any API key changed to refresh the providers
-    if (event.key?.includes('API_KEY')) {
-      window.location.reload();
-    }
-  });
-}
-
-export const model = customProvider({
-  languageModels,
-});
-
-export type modelID = keyof typeof languageModels;
-
-export const MODELS = Object.keys(languageModels);
-
-export const defaultModel: modelID = "qwen-qwq";

app/actions.ts

@@ -1,9 +1,8 @@
 "use server";
 
-import { openai } from "@ai-sdk/openai";
-import { generateObject } from "ai";
+import { openai } from "@/lib/openai-client";
 import { z } from "zod";
-import { startMcpSandbox } from '@/lib/mcp-sandbox';
+import { startMcpSandbox } from "@/lib/mcp-sandbox";
 
 // Use a global map to store active sandbox instances across requests
 const activeSandboxes = (global as any).activeSandboxes || new Map();
@@ -13,61 +12,61 @@ const activeSandboxes = (global as any).activeSandboxes || new Map();
 function getMessageText(message: any): string {
   // Check if the message has parts (new format)
   if (message.parts && Array.isArray(message.parts)) {
-    const textParts = message.parts.filter((p: any) => p.type === 'text' && p.text);
+    const textParts = message.parts.filter(
+      (p: any) => p.type === "text" && p.text
+    );
     if (textParts.length > 0) {
-      return textParts.map((p: any) => p.text).join('\n');
+      return textParts.map((p: any) => p.text).join("\n");
     }
   }
-  
+
   // Fallback to content (old format)
-  if (typeof message.content === 'string') {
+  if (typeof message.content === "string") {
     return message.content;
   }
-  
+
   // If content is an array (potentially of parts), try to extract text
   if (Array.isArray(message.content)) {
-    const textItems = message.content.filter((item: any) => 
-      typeof item === 'string' || (item.type === 'text' && item.text)
+    const textItems = message.content.filter(
+      (item: any) =>
+        typeof item === "string" || (item.type === "text" && item.text)
     );
-    
+
     if (textItems.length > 0) {
-      return textItems.map((item: any) => 
-        typeof item === 'string' ? item : item.text
-      ).join('\n');
+      return textItems
+        .map((item: any) => (typeof item === "string" ? item : item.text))
+        .join("\n");
     }
   }
-  
-  return '';
+
+  return "";
 }
 
-export async function generateTitle(messages: any[]) {
-  // Convert messages to a format that OpenAI can understand
-  const normalizedMessages = messages.map(msg => ({
-    role: msg.role,
-    content: getMessageText(msg)
+export async function generateTitle(messages: any[]): Promise<string> {
+  const normalized = messages.map((m) => ({
+    role: m.role as "user" | "assistant" | "system",
+    content: Array.isArray(m.content) ? m.content.join("\n") : m.content,
   }));
-  
-  const { object } = await generateObject({
-    model: openai("gpt-4.1"),
-    schema: z.object({
-      title: z.string().min(1).max(100),
-    }),
-    system: `
-    You are a helpful assistant that generates titles for chat conversations.
-    The title should be a short description of the conversation.
-    The title should be no more than 30 characters.
-    The title should be unique and not generic.
-    `,
+
+  const response = await openai.chat.completions.create({
+    model: "gpt-3.5-turbo",
+    max_tokens: 30,
+    temperature: 0.4,
     messages: [
-      ...normalizedMessages,
       {
-        role: "user",
-        content: "Generate a title for the conversation.",
+        role: "system",
+        content:
+          "You are a helpful assistant that writes very short, unique titles (≤30 characters) for chat conversations.",
       },
+      ...normalized,
+      { role: "user", content: "Write the title only." },
     ],
   });
 
-  return object.title;
+  const title = response.choices[0]?.message.content?.trim() ?? "New Chat";
+
+  // basic schema check
+  return z.string().min(1).max(100).parse(title);
 }
 
 export interface KeyValuePair {
@@ -85,75 +84,84 @@ export async function startSandbox(params: {
   env?: KeyValuePair[];
 }): Promise<{ url: string }> {
   const { id, command, args, env } = params;
-  
+
   console.log(`[startSandbox] Starting sandbox for ID: ${id}`);
-  
+
   // Validate required fields
   if (!id || !command || !args) {
-    throw new Error('Missing required fields');
+    throw new Error("Missing required fields");
   }
-  
+
   // Check if we already have a sandbox for this ID
   if (activeSandboxes.has(id)) {
     // If we do, get the URL and return it without creating a new sandbox
     const existingSandbox = activeSandboxes.get(id);
-    console.log(`[startSandbox] Reusing existing sandbox for ${id}, URL: ${existingSandbox.url}`);
-    
+    console.log(
+      `[startSandbox] Reusing existing sandbox for ${id}, URL: ${existingSandbox.url}`
+    );
+
     // Re-fetch the URL to make sure it's current
     try {
       const freshUrl = await existingSandbox.sandbox.getUrl();
       console.log(`[startSandbox] Updated sandbox URL for ${id}: ${freshUrl}`);
-      
+
       // Update the URL in the map
-      activeSandboxes.set(id, { 
-        sandbox: existingSandbox.sandbox, 
-        url: freshUrl 
+      activeSandboxes.set(id, {
+        sandbox: existingSandbox.sandbox,
+        url: freshUrl,
       });
-      
+
       return { url: freshUrl };
     } catch (error) {
-      console.error(`[startSandbox] Error refreshing sandbox URL for ${id}:`, error);
-      
+      console.error(
+        `[startSandbox] Error refreshing sandbox URL for ${id}:`,
+        error
+      );
+
       // Fall through to create a new sandbox if we couldn't refresh the URL
       activeSandboxes.delete(id);
-      console.log(`[startSandbox] Removed stale sandbox for ${id}, will create a new one`);
+      console.log(
+        `[startSandbox] Removed stale sandbox for ${id}, will create a new one`
+      );
     }
   }
-  
+
   // Build the command string
   let cmd: string;
-  
+
   // Prepare the command based on the type of executable
-  if (command === 'uvx') {
+  if (command === "uvx") {
     // For uvx, use the direct format
     const toolName = args[0];
-    cmd = `uvx ${toolName} ${args.slice(1).join(' ')}`;
-  } else if (command.includes('python')) {
+    cmd = `uvx ${toolName} ${args.slice(1).join(" ")}`;
+  } else if (command.includes("python")) {
     // For python commands
-    cmd = `${command} ${args.join(' ')}`;
+    cmd = `${command} ${args.join(" ")}`;
   } else {
     // For node or other commands
-    cmd = `${command} ${args.join(' ')}`;
+    cmd = `${command} ${args.join(" ")}`;
   }
-  
+
   // Convert env array to object if needed
   const envs: Record<string, string> = {};
   if (env && env.length > 0) {
     env.forEach((envVar) => {
-      if (envVar.key) envs[envVar.key] = envVar.value || '';
+      if (envVar.key) envs[envVar.key] = envVar.value || "";
     });
   }
-  
+
   // Start the sandbox
-  console.log(`[startSandbox] Creating new sandbox for ${id} with command: ${cmd}`);
+  console.log(
+    `[startSandbox] Creating new sandbox for ${id} with command: ${cmd}`
+  );
   const sandbox = await startMcpSandbox({ cmd, envs });
   const url = await sandbox.getUrl();
-  
+
   console.log(`[startSandbox] Sandbox created for ${id}, URL: ${url}`);
-  
+
   // Store the sandbox in our map
   activeSandboxes.set(id, { sandbox, url });
-  
+
   return { url };
 }
 
@@ -162,17 +170,17 @@ export async function startSandbox(params: {
  */
 export async function stopSandbox(id: string): Promise<{ success: boolean }> {
   if (!id) {
-    throw new Error('Missing sandbox ID');
+    throw new Error("Missing sandbox ID");
   }
-  
+
   // Check if we have a sandbox with this ID
   if (!activeSandboxes.has(id)) {
     throw new Error(`No active sandbox found with ID: ${id}`);
   }
-  
+
   // Stop the sandbox
   const { sandbox } = activeSandboxes.get(id);
-  
+
   try {
     await sandbox.stop();
     console.log(`Stopped sandbox with ID: ${id}`);
@@ -180,9 +188,9 @@ export async function stopSandbox(id: string): Promise<{ success: boolean }> {
     console.error(`Error stopping sandbox ${id}:`, stopError);
     // Continue to remove from the map even if stop fails
   }
-  
+
   // Remove from our map
   activeSandboxes.delete(id);
-  
+
   return { success: true };
 }

app/api/chat/route.ts

@@ -1,20 +1,35 @@
-import { model, type modelID } from "@/ai/providers";
-import { smoothStream, streamText, type UIMessage } from "ai";
-import { appendResponseMessages } from 'ai';
-import { saveChat, saveMessages, convertToDBMessages } from '@/lib/chat-store';
-import { nanoid } from 'nanoid';
-import { db } from '@/lib/db';
-import { chats } from '@/lib/db/schema';
-import { eq, and } from 'drizzle-orm';
-import { initializeMCPClients, type MCPServerConfig } from '@/lib/mcp-client';
-import { generateTitle } from '@/app/actions';
-
-export const runtime = 'nodejs';
-
-// Allow streaming responses up to 30 seconds
+import { openai } from "@/lib/openai-client";
+import type { ModelID } from "@/lib/models";
+import { saveChat } from "@/lib/chat-store";
+import { nanoid } from "nanoid";
+import { db } from "@/lib/db";
+import { chats } from "@/lib/db/schema";
+import { eq, and } from "drizzle-orm";
+import { initializeMCPClients, type MCPServerConfig } from "@/lib/mcp-client";
+import { generateTitle } from "@/app/actions";
+import { createOpenAIStream } from "@/lib/openai-stream";
+import type {
+  ChatCompletionTool,
+  ChatCompletionMessageParam,
+} from "openai/resources";
+
+export const runtime = "nodejs";
+
+// Allow streaming responses up to 120 seconds
 export const maxDuration = 120;
 
-export const dynamic = 'force-dynamic';
+export const dynamic = "force-dynamic";
+
+function mcpToolsToOpenAITools(
+  tools: Record<string, any>
+): ChatCompletionTool[] {
+  return Object.entries(tools).map(
+    ([name, schema]): ChatCompletionTool => ({
+      type: "function",
+      function: { name, parameters: schema.parameters },
+    })
+  );
+}
 
 export async function POST(req: Request) {
   const {
@@ -24,18 +39,18 @@ export async function POST(req: Request) {
     userId,
     mcpServers = [],
   }: {
-    messages: UIMessage[];
+    messages: ChatCompletionMessageParam[];
     chatId?: string;
-    selectedModel: modelID;
+    selectedModel: ModelID;
     userId: string;
     mcpServers?: MCPServerConfig[];
   } = await req.json();
 
   if (!userId) {
-    return new Response(
-      JSON.stringify({ error: "User ID is required" }),
-      { status: 400, headers: { "Content-Type": "application/json" } }
-    );
+    return new Response(JSON.stringify({ error: "User ID is required" }), {
+      status: 400,
+      headers: { "Content-Type": "application/json" },
+    });
   }
 
   const id = chatId || nanoid();
@@ -46,10 +61,7 @@ export async function POST(req: Request) {
   if (chatId) {
     try {
       const existingChat = await db.query.chats.findFirst({
-        where: and(
-          eq(chats.id, chatId),
-          eq(chats.userId, userId)
-        )
+        where: and(eq(chats.id, chatId), eq(chats.userId, userId)),
       });
       isNewChat = !existingChat;
     } catch (error) {
@@ -65,12 +77,15 @@ export async function POST(req: Request) {
   if (isNewChat && messages.length > 0) {
     try {
       // Generate a title based on first user message
-      const userMessage = messages.find(m => m.role === 'user');
-      let title = 'New Chat';
+      const userMessage = messages.find((m) => m.role === "user");
+      let title = "New Chat";
 
-      if (userMessage) {
+      if (userMessage && typeof userMessage.content === "string") {
         try {
-          title = await generateTitle([userMessage]);
+          // The generateTitle function expects a UIMessage[], let's adapt
+          title = await generateTitle([
+            { role: "user", content: userMessage.content, id: "temp-id" },
+          ]);
         } catch (error) {
           console.error("Error generating title:", error);
         }
@@ -81,120 +96,36 @@ export async function POST(req: Request) {
         id,
         userId,
         title,
-        messages: [],
+        messages: [], // Messages will be saved by the client
       });
     } catch (error) {
       console.error("Error saving new chat:", error);
     }
   }
 
-  // Initialize MCP clients using the already running persistent SSE servers
-  // mcpServers now only contains SSE configurations since stdio servers
-  // have been converted to SSE in the MCP context
   const { tools, cleanup } = await initializeMCPClients(mcpServers, req.signal);
 
-  console.log("messages", messages);
-  console.log("parts", messages.map(m => m.parts.map(p => p)));
-
-  // Track if the response has completed
-  let responseCompleted = false;
-
-  const result = streamText({
-    model: model.languageModel(selectedModel),
-    system: `You are a helpful assistant with access to a variety of tools.
-
-    Today's date is ${new Date().toISOString().split('T')[0]}.
-
-    The tools are very powerful, and you can use them to answer the user's question.
-    So choose the tool that is most relevant to the user's question.
-
-    If tools are not available, say you don't know or if the user wants a tool they can add one from the server icon in bottom left corner in the sidebar.
-
-    You can use multiple tools in a single response.
-    Always respond after using the tools for better user experience.
-    You can run multiple steps using all the tools!!!!
-    Make sure to use the right tool to respond to the user's question.
-
-    Multiple tools can be used in a single response and multiple steps can be used to answer the user's question.
-
-    ## Response Format
-    - Markdown is supported.
-    - Respond according to tool's response.
-    - Use the tools to answer the user's question.
-    - If you don't know the answer, use the tools to find the answer or say you don't know.
-    `,
-    messages,
-    tools,
-    maxSteps: 20,
-    providerOptions: {
-      google: {
-        thinkingConfig: {
-          thinkingBudget: 2048,
-        },
-      },
-      anthropic: {
-        thinking: {
-          type: 'enabled',
-          budgetTokens: 12000
-        },
-      }
-    },
-    experimental_transform: smoothStream({
-      delayInMs: 5, // optional: defaults to 10ms
-      chunking: 'line', // optional: defaults to 'word'
-    }),
-    onError: (error) => {
-      console.error(JSON.stringify(error, null, 2));
+  const completion = await openai.chat.completions.create(
+    {
+      model: selectedModel,
+      stream: true,
+      messages,
+      tools: mcpToolsToOpenAITools(tools),
+      tool_choice: "auto",
     },
-    async onFinish({ response }) {
-      responseCompleted = true;
-      const allMessages = appendResponseMessages({
-        messages,
-        responseMessages: response.messages,
-      });
+    { signal: req.signal }
+  );
 
-      await saveChat({
-        id,
-        userId,
-        messages: allMessages,
-      });
-
-      const dbMessages = convertToDBMessages(allMessages, id);
-      await saveMessages({ messages: dbMessages });
-
-      // Clean up resources - now this just closes the client connections
-      // not the actual servers which persist in the MCP context
-      await cleanup();
-    }
-  });
-
-  // Ensure cleanup happens if the request is terminated early
-  req.signal.addEventListener('abort', async () => {
-    if (!responseCompleted) {
-      console.log("Request aborted, cleaning up resources");
-      try {
-        await cleanup();
-      } catch (error) {
-        console.error("Error during cleanup on abort:", error);
-      }
-    }
+  const stream = createOpenAIStream(completion, {
+    onFinal() {
+      cleanup();
+    },
   });
 
-  result.consumeStream()
-  // Add chat ID to response headers so client can know which chat was created
-  return result.toDataStreamResponse({
-    sendReasoning: true,
+  return new Response(stream, {
     headers: {
-      'X-Chat-ID': id
-    },
-    getErrorMessage: (error) => {
-      if (error instanceof Error) {
-        if (error.message.includes("Rate limit")) {
-          return "Rate limit exceeded. Please try again later.";
-        }
-      }
-      console.error(error);
-      return "An error occurred.";
+      "Content-Type": "text/event-stream",
+      "X-Chat-ID": id,
     },
   });
-}
+}

components/chat.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { defaultModel, type modelID } from "@/ai/providers";
+import { DEFAULT_MODEL, type ModelID } from "@/lib/models";
 import { Message, useChat } from "@ai-sdk/react";
 import { useState, useEffect, useMemo, useCallback } from "react";
 import { Textarea } from "./textarea";
@@ -30,7 +30,7 @@ export default function Chat() {
   const chatId = params?.id as string | undefined;
   const queryClient = useQueryClient();
   
-  const [selectedModel, setSelectedModel] = useLocalStorage<modelID>("selectedModel", defaultModel);
+  const [selectedModel, setSelectedModel] = useLocalStorage<ModelID>("selectedModel", DEFAULT_MODEL);
   const [userId, setUserId] = useState<string>('');
   const [generatedChatId, setGeneratedChatId] = useState<string>('');
   

components/model-picker.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { MODELS, modelDetails, type modelID, defaultModel } from "@/ai/providers";
+import { MODELS, DEFAULT_MODEL, ModelID } from "@/lib/models";
 import {
   Select,
   SelectContent,
@@ -9,232 +9,76 @@ import {
   SelectValue,
 } from "./ui/select";
 import { cn } from "@/lib/utils";
-import { Sparkles, Zap, Info, Bolt, Code, Brain, Lightbulb, Image, Gauge, Rocket, Bot } from "lucide-react";
-import { useState, useEffect } from "react";
+import { Bot } from "lucide-react";
+import { useEffect } from "react";
 
 interface ModelPickerProps {
-  selectedModel: modelID;
-  setSelectedModel: (model: modelID) => void;
+  selectedModel: ModelID;
+  setSelectedModel: (model: ModelID) => void;
 }
 
 export const ModelPicker = ({ selectedModel, setSelectedModel }: ModelPickerProps) => {
-  const [hoveredModel, setHoveredModel] = useState<modelID | null>(null);
-  
   // Ensure we always have a valid model ID
-  const validModelId = MODELS.includes(selectedModel) ? selectedModel : defaultModel;
+  const validModelId = MODELS.includes(selectedModel) ? selectedModel : DEFAULT_MODEL;
   
   // If the selected model is invalid, update it to the default
   useEffect(() => {
     if (selectedModel !== validModelId) {
-      setSelectedModel(validModelId as modelID);
+      setSelectedModel(validModelId);
     }
   }, [selectedModel, validModelId, setSelectedModel]);
-  
-  // Function to get the appropriate icon for each provider
-  const getProviderIcon = (provider: string) => {
-    switch (provider.toLowerCase()) {
-      case 'anthropic':
-        return <Sparkles className="h-3 w-3 text-orange-600" />;
-      case 'openai':
-        return <Zap className="h-3 w-3 text-green-500" />;
-      case 'google':
-        return <Zap className="h-3 w-3 text-red-500" />;
-      case 'groq':
-        return <Sparkles className="h-3 w-3 text-blue-500" />;
-      case 'xai':
-        return <Sparkles className="h-3 w-3 text-yellow-500" />;
-      default:
-        return <Info className="h-3 w-3 text-blue-500" />;
-    }
-  };
-  
-  // Function to get capability icon
-  const getCapabilityIcon = (capability: string) => {
-    switch (capability.toLowerCase()) {
-      case 'code':
-        return <Code className="h-2.5 w-2.5" />;
-      case 'reasoning':
-        return <Brain className="h-2.5 w-2.5" />;
-      case 'research':
-        return <Lightbulb className="h-2.5 w-2.5" />;
-      case 'vision':
-        return <Image className="h-2.5 w-2.5" />;
-      case 'fast':
-      case 'rapid':
-        return <Bolt className="h-2.5 w-2.5" />;
-      case 'efficient':
-      case 'compact':
-        return <Gauge className="h-2.5 w-2.5" />;
-      case 'creative':
-      case 'balance':
-        return <Rocket className="h-2.5 w-2.5" />;
-      case 'agentic':
-        return <Bot className="h-2.5 w-2.5" />;
-      default:
-        return <Info className="h-2.5 w-2.5" />;
-    }
-  };
-  
-  // Get capability badge color
-  const getCapabilityColor = (capability: string) => {
-    switch (capability.toLowerCase()) {
-      case 'code':
-        return "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300";
-      case 'reasoning':
-      case 'research':
-        return "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300";
-      case 'vision':
-        return "bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300";
-      case 'fast':
-      case 'rapid':
-        return "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300";
-      case 'efficient':
-      case 'compact':
-        return "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300";
-      case 'creative':
-      case 'balance':
-        return "bg-rose-100 text-rose-800 dark:bg-rose-900/30 dark:text-rose-300";
-      case 'agentic':
-        return "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-300";
-      default:
-        return "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300";
-    }
-  };
-  
-  // Get current model details to display
-  const displayModelId = hoveredModel || validModelId;
-  const currentModelDetails = modelDetails[displayModelId];
 
   // Handle model change
   const handleModelChange = (modelId: string) => {
-    if (MODELS.includes(modelId)) {
-      const typedModelId = modelId as modelID;
-      setSelectedModel(typedModelId);
+    if (MODELS.includes(modelId as ModelID)) {
+      setSelectedModel(modelId as ModelID);
     }
   };
 
   return (
     <div className="absolute bottom-2 left-2 z-10">
-      <Select 
-        value={validModelId} 
-        onValueChange={handleModelChange} 
+      <Select
+        value={validModelId}
+        onValueChange={handleModelChange}
         defaultValue={validModelId}
       >
-        <SelectTrigger 
+        <SelectTrigger
           className="max-w-[200px] sm:max-w-fit sm:w-56 px-2 sm:px-3 h-8 sm:h-9 rounded-full group border-primary/20 bg-primary/5 hover:bg-primary/10 dark:bg-primary/10 dark:hover:bg-primary/20 transition-all duration-200 ring-offset-background focus:ring-2 focus:ring-primary/30 focus:ring-offset-2"
         >
-          <SelectValue 
-            placeholder="Select model" 
+          <SelectValue
+            placeholder="Select model"
             className="text-xs font-medium flex items-center gap-1 sm:gap-2 text-primary dark:text-primary-foreground"
           >
             <div className="flex items-center gap-1 sm:gap-2">
-              {getProviderIcon(modelDetails[validModelId].provider)}
-              <span className="font-medium truncate">{modelDetails[validModelId].name}</span>
+              <Bot className="h-3 w-3" />
+              <span className="font-medium truncate">{validModelId}</span>
             </div>
           </SelectValue>
         </SelectTrigger>
         <SelectContent
           align="start"
-          className="bg-background/95 dark:bg-muted/95 backdrop-blur-sm border-border/80 rounded-lg overflow-hidden p-0 w-[280px] sm:w-[350px] md:w-[515px]"
+          className="bg-background/95 dark:bg-muted/95 backdrop-blur-sm border-border/80 rounded-lg overflow-hidden p-0 w-[280px]"
         >
-          <div className="grid grid-cols-1 sm:grid-cols-[120px_1fr] md:grid-cols-[200px_1fr] items-start">
-            {/* Model selector column */}
-            <div className="sm:border-r border-border/40 bg-muted/20 p-0 pr-1">
-              <SelectGroup className="space-y-1">
-                {MODELS.map((id) => {
-                  const modelId = id as modelID;
-                  return (
-                    <SelectItem 
-                      key={id} 
-                      value={id}
-                      onMouseEnter={() => setHoveredModel(modelId)}
-                      onMouseLeave={() => setHoveredModel(null)}
-                      className={cn(
-                        "!px-2 sm:!px-3 py-1.5 sm:py-2 cursor-pointer rounded-md text-xs transition-colors duration-150",
-                        "hover:bg-primary/5 hover:text-primary-foreground",
-                        "focus:bg-primary/10 focus:text-primary focus:outline-none",
-                        "data-[highlighted]:bg-primary/10 data-[highlighted]:text-primary",
-                        validModelId === id && "!bg-primary/15 !text-primary font-medium"
-                      )}
-                    >
-                      <div className="flex flex-col gap-0.5">
-                        <div className="flex items-center gap-1.5">
-                          {getProviderIcon(modelDetails[modelId].provider)}
-                          <span className="font-medium truncate">{modelDetails[modelId].name}</span>
-                        </div>
-                        <span className="text-[10px] sm:text-xs text-muted-foreground">
-                          {modelDetails[modelId].provider}
-                        </span>
-                      </div>
-                    </SelectItem>
-                  );
-                })}
-              </SelectGroup>
-            </div>
-            
-            {/* Model details column - hidden on smallest screens, visible on sm+ */}
-            <div className="sm:block hidden p-2 sm:p-3 md:p-4 flex-col">
-              <div>
-                <div className="flex items-center gap-2 mb-1">
-                  {getProviderIcon(currentModelDetails.provider)}
-                  <h3 className="text-sm font-semibold">{currentModelDetails.name}</h3>
-                </div>
-                <div className="text-xs text-muted-foreground mb-1">
-                  Provider: <span className="font-medium">{currentModelDetails.provider}</span>
-                </div>
-                
-                {/* Capability badges */}
-                <div className="flex flex-wrap gap-1 mt-2 mb-3">
-                  {currentModelDetails.capabilities.map((capability) => (
-                    <span 
-                      key={capability}
-                      className={cn(
-                        "inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded-full font-medium",
-                        getCapabilityColor(capability)
-                      )}
-                    >
-                      {getCapabilityIcon(capability)}
-                      <span>{capability}</span>
-                    </span>
-                  ))}
-                </div>
-                
-                <div className="text-xs text-foreground/90 leading-relaxed mb-3 hidden md:block">
-                  {currentModelDetails.description}
-                </div>
-              </div>
-              
-              <div className="bg-muted/40 rounded-md p-2 hidden md:block">
-                <div className="text-[10px] text-muted-foreground flex justify-between items-center">
-                  <span>API Version:</span>
-                  <code className="bg-background/80 px-2 py-0.5 rounded text-[10px] font-mono">
-                    {currentModelDetails.apiVersion}
-                  </code>
-                </div>
-              </div>
-            </div>
-            
-            {/* Condensed model details for mobile only */}
-            <div className="p-3 sm:hidden border-t border-border/30">
-              <div className="flex flex-wrap gap-1 mb-2">
-                {currentModelDetails.capabilities.slice(0, 4).map((capability) => (
-                  <span 
-                    key={capability}
-                    className={cn(
-                      "inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded-full font-medium",
-                      getCapabilityColor(capability)
-                    )}
-                  >
-                    {getCapabilityIcon(capability)}
-                    <span>{capability}</span>
-                  </span>
-                ))}
-                {currentModelDetails.capabilities.length > 4 && (
-                  <span className="text-[10px] text-muted-foreground">+{currentModelDetails.capabilities.length - 4} more</span>
+          <SelectGroup className="space-y-1 p-1">
+            {MODELS.map((id) => (
+              <SelectItem
+                key={id}
+                value={id}
+                className={cn(
+                  "!px-2 sm:!px-3 py-1.5 sm:py-2 cursor-pointer rounded-md text-xs transition-colors duration-150",
+                  "hover:bg-primary/5 hover:text-primary-foreground",
+                  "focus:bg-primary/10 focus:text-primary focus:outline-none",
+                  "data-[highlighted]:bg-primary/10 data-[highlighted]:text-primary",
+                  validModelId === id && "!bg-primary/15 !text-primary font-medium"
                 )}
-              </div>
-            </div>
-          </div>
+              >
+                <div className="flex items-center gap-1.5">
+                  <Bot className="h-4 w-4" />
+                  <span className="font-medium truncate">{id}</span>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectGroup>
         </SelectContent>
       </Select>
     </div>

lib/mcp-client.ts

@@ -1,5 +1,6 @@
-import { experimental_createMCPClient as createMCPClient } from 'ai';
-import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
+import { Client as MCPClient } from "@modelcontextprotocol/sdk/client/index.js";
+import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
 
 export interface KeyValuePair {
   key: string;
@@ -8,7 +9,7 @@ export interface KeyValuePair {
 
 export interface MCPServerConfig {
   url: string;
-  type: 'sse' | 'stdio';
+  type: "sse" | "stdio";
   command?: string;
   args?: string[];
   env?: KeyValuePair[];
@@ -37,7 +38,7 @@ export async function initializeMCPClients(
   for (const mcpServer of mcpServers) {
     try {
       const headers = mcpServer.headers?.reduce((acc, header) => {
-        if (header.key) acc[header.key] = header.value || '';
+        if (header.key) acc[header.key] = header.value || "";
         return acc;
       }, {} as Record<string, string>);
 
@@ -45,22 +46,26 @@ export async function initializeMCPClients(
       // SSE is only when URL ends with /sse
       // which is the heuristic used by other clients
 
-      const transport = mcpServer.url.endsWith('/sse')
-        ? {
-            type: 'sse' as const,
-            url: mcpServer.url,
-            headers,
-          }
+      const transport = mcpServer.url.endsWith("/sse")
+        ? new SSEClientTransport(new URL(mcpServer.url), {
+            requestInit: {
+              headers,
+            },
+          })
         : new StreamableHTTPClientTransport(new URL(mcpServer.url), {
             requestInit: {
               headers,
             },
           });
 
-      const mcpClient = await createMCPClient({ transport });
+      const mcpClient = new MCPClient({
+        name: "mcp-chat-client",
+        version: "0.1.0",
+      });
+      await mcpClient.connect(transport);
       mcpClients.push(mcpClient);
 
-      const mcptools = await mcpClient.tools();
+      const mcptools = await mcpClient.listTools();
 
       console.log(`MCP tools from ${mcpServer.url}:`, Object.keys(mcptools));
 
@@ -74,7 +79,7 @@ export async function initializeMCPClients(
 
   // Register cleanup for all clients if an abort signal is provided
   if (abortSignal && mcpClients.length > 0) {
-    abortSignal.addEventListener('abort', async () => {
+    abortSignal.addEventListener("abort", async () => {
       await cleanupMCPClients(mcpClients);
     });
   }
@@ -82,7 +87,7 @@ export async function initializeMCPClients(
   return {
     tools,
     clients: mcpClients,
-    cleanup: async () => await cleanupMCPClients(mcpClients)
+    cleanup: async () => await cleanupMCPClients(mcpClients),
   };
 }
 
@@ -95,4 +100,4 @@ async function cleanupMCPClients(clients: any[]): Promise<void> {
       console.error("Error closing MCP client:", error);
     }
   }
-} 
+}

lib/models.ts

@@ -0,0 +1,9 @@
+/**
+ * List here only the model IDs your endpoint exposes.
+ * Add/remove freely – nothing else in the codebase cares.
+ */
+export const MODELS = ["gpt-4o-mini", "gpt-4-turbo", "gpt-3.5-turbo"] as const;
+
+export type ModelID = (typeof MODELS)[number];
+
+export const DEFAULT_MODEL: ModelID = "gpt-4o-mini";

lib/openai-client.ts

@@ -0,0 +1,9 @@
+import OpenAI from "openai";
+
+export const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY || "",
+  baseURL: process.env.OPENAI_BASE_URL || undefined,
+  defaultHeaders: process.env.OPENAI_EXTRA_HEADERS
+    ? JSON.parse(process.env.OPENAI_EXTRA_HEADERS)
+    : undefined,
+});

lib/openai-stream.ts

@@ -0,0 +1,39 @@
+import {
+  createParser,
+  type ParsedEvent,
+  type ReconnectInterval,
+} from "eventsource-parser";
+import type { ChatCompletionChunk } from "openai/resources";
+
+export function createOpenAIStream(
+  completion: AsyncIterable<ChatCompletionChunk>,
+  callbacks: { onFinal: () => void }
+): ReadableStream {
+  const { readable, writable } = new TransformStream();
+  const writer = writable.getWriter();
+  const encoder = new TextEncoder();
+
+  let isFinished = false;
+
+  async function forwardCompletion() {
+    try {
+      for await (const chunk of completion) {
+        const { content } = chunk.choices[0].delta;
+        if (content) {
+          await writer.write(encoder.encode(`0:${JSON.stringify(content)}\n`));
+        }
+      }
+    } catch (error) {
+      console.error("Error forwarding completion:", error);
+      await writer.abort(error);
+    } finally {
+      isFinished = true;
+      await writer.close();
+      callbacks.onFinal();
+    }
+  }
+
+  forwardCompletion();
+
+  return readable;
+}

package.json

@@ -13,12 +13,7 @@
     "db:studio": "drizzle-kit studio"
   },
   "dependencies": {
-    "@ai-sdk/anthropic": "^1.2.11",
-    "@ai-sdk/google": "^1.2.17",
-    "@ai-sdk/groq": "^1.2.9",
-    "@ai-sdk/openai": "^1.3.22",
     "@ai-sdk/react": "^1.2.12",
-    "@ai-sdk/xai": "^1.2.16",
     "@aws-sdk/client-s3": "^3.821.0",
     "@daytonaio/sdk": "^0.19.0",
     "@modelcontextprotocol/sdk": "^1.12.1",
@@ -36,10 +31,10 @@
     "@radix-ui/react-tooltip": "^1.2.3",
     "@tanstack/react-query": "^5.74.4",
     "@vercel/analytics": "^1.5.0",
-    "ai": "^4.3.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.44.1",
+    "eventsource-parser": "^3.0.3",
     "fast-deep-equal": "^3.1.3",
     "framer-motion": "^12.16.0",
     "lucide-react": "^0.488.0",
@@ -47,6 +42,7 @@
     "nanoid": "^5.1.5",
     "next": "^15.3.3",
     "next-themes": "^0.4.6",
+    "openai": "^4.26.0",
     "or": "^0.2.0",
     "pg": "^8.16.0",
     "react": "^19.1.0",
@@ -81,5 +77,6 @@
     "onlyBuiltDependencies": [
       "@tailwindcss/oxide"
     ]
-  }
+  },
+  "packageManager": "[email protected]+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
 }