feat: add back grok 3 mini and API key management functionality

zaidmukaddam · zaidmukaddam · commit 4c47d33ef001 · 2025-04-23T12:21:36.000+05:30
- Integrated the XAI provider into the application, allowing for model interactions.
- Implemented an API Key Manager component for managing API keys for OpenAI, Anthropic, Groq, and XAI.
- Updated the Chat Sidebar to include an option for accessing the API Key Manager.
- Enhanced the providers.ts file to utilize the new XAI client and manage API keys securely.
diff --git a/ai/providers.ts b/ai/providers.ts
@@ -1,8 +1,14 @@
-import { openai } from "@ai-sdk/openai";
-import { google } from "@ai-sdk/google";
-import { groq } from "@ai-sdk/groq";
-import { customProvider, wrapLanguageModel, extractReasoningMiddleware } from "ai";
-import { anthropic } from "@ai-sdk/anthropic";
+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;
@@ -15,26 +21,51 @@ 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 = {
-  "gemini-2.5-flash": google("gemini-2.5-flash-preview-04-17"),
-  "gpt-4.1-mini": openai("gpt-4.1-mini"),
-  "claude-3-7-sonnet": anthropic('claude-3-7-sonnet-20250219'),
+  "gpt-4.1-mini": openaiClient("gpt-4.1-mini"),
+  "claude-3-7-sonnet": anthropicClient('claude-3-7-sonnet-20250219'),
   "qwen-qwq": wrapLanguageModel(
     {
-      model: groq("qwen-qwq-32b"),
+      model: groqClient("qwen-qwq-32b"),
       middleware
     }
   ),
+  "grok-3-mini": xaiClient("grok-3-mini-latest"),
 };
 
 export const modelDetails: Record<keyof typeof languageModels, ModelInfo> = {
-  "gemini-2.5-flash": {
-    provider: "Google",
-    name: "Gemini 2.5 Flash",
-    description: "Latest version of Google's Gemini 2.5 Flash with strong reasoning and coding capabilities.",
-    apiVersion: "gemini-2.5-flash-preview-04-17",
-    capabilities: ["Balance", "Efficient", "Agentic"]
-  },
   "gpt-4.1-mini": {
     provider: "OpenAI",
     name: "GPT-4.1 Mini",
@@ -56,8 +87,25 @@ export const modelDetails: Record<keyof typeof languageModels, ModelInfo> = {
     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,
 });
diff --git a/components/api-key-manager.tsx b/components/api-key-manager.tsx
@@ -0,0 +1,163 @@
+import { useState, useEffect } from "react";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
+
+// API key configuration
+interface ApiKeyConfig {
+  name: string;
+  key: string;
+  storageKey: string;
+  label: string;
+  placeholder: string;
+}
+
+// Available API keys configuration
+const API_KEYS_CONFIG: ApiKeyConfig[] = [
+  {
+    name: "OpenAI",
+    key: "openai",
+    storageKey: "OPENAI_API_KEY",
+    label: "OpenAI API Key",
+    placeholder: "sk-..."
+  },
+  {
+    name: "Anthropic",
+    key: "anthropic",
+    storageKey: "ANTHROPIC_API_KEY",
+    label: "Anthropic API Key",
+    placeholder: "sk-ant-..."
+  },
+  {
+    name: "Groq",
+    key: "groq",
+    storageKey: "GROQ_API_KEY",
+    label: "Groq API Key",
+    placeholder: "gsk_..."
+  },
+  {
+    name: "XAI",
+    key: "xai",
+    storageKey: "XAI_API_KEY",
+    label: "XAI API Key",
+    placeholder: "xai-..."
+  }
+];
+
+interface ApiKeyManagerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function ApiKeyManager({ open, onOpenChange }: ApiKeyManagerProps) {
+  // State to store API keys
+  const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
+
+  // Load API keys from localStorage on initial mount
+  useEffect(() => {
+    const storedKeys: Record<string, string> = {};
+    
+    API_KEYS_CONFIG.forEach(config => {
+      const value = localStorage.getItem(config.storageKey);
+      if (value) {
+        storedKeys[config.key] = value;
+      }
+    });
+    
+    setApiKeys(storedKeys);
+  }, []);
+
+  // Update API key in state
+  const handleApiKeyChange = (key: string, value: string) => {
+    setApiKeys(prev => ({
+      ...prev,
+      [key]: value
+    }));
+  };
+
+  // Save API keys to localStorage
+  const handleSaveApiKeys = () => {
+    try {
+      API_KEYS_CONFIG.forEach(config => {
+        const value = apiKeys[config.key];
+        
+        if (value && value.trim()) {
+          localStorage.setItem(config.storageKey, value.trim());
+        } else {
+          localStorage.removeItem(config.storageKey);
+        }
+      });
+      
+      toast.success("API keys saved successfully");
+      onOpenChange(false);
+    } catch (error) {
+      console.error("Error saving API keys:", error);
+      toast.error("Failed to save API keys");
+    }
+  };
+
+  // Clear all API keys
+  const handleClearApiKeys = () => {
+    try {
+      API_KEYS_CONFIG.forEach(config => {
+        localStorage.removeItem(config.storageKey);
+      });
+      
+      setApiKeys({});
+      toast.success("All API keys cleared");
+    } catch (error) {
+      console.error("Error clearing API keys:", error);
+      toast.error("Failed to clear API keys");
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>API Key Settings</DialogTitle>
+          <DialogDescription>
+            Enter your own API keys for different AI providers. Keys are stored securely in your browser&apos;s local storage.
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="grid gap-4 py-4">
+          {API_KEYS_CONFIG.map(config => (
+            <div key={config.key} className="grid gap-2">
+              <Label htmlFor={config.key}>{config.label}</Label>
+              <Input
+                id={config.key}
+                type="password"
+                value={apiKeys[config.key] || ""}
+                onChange={(e) => handleApiKeyChange(config.key, e.target.value)}
+                placeholder={config.placeholder}
+              />
+            </div>
+          ))}
+        </div>
+        
+        <DialogFooter className="flex justify-between sm:justify-between">
+          <Button
+            variant="destructive"
+            onClick={handleClearApiKeys}
+          >
+            Clear All Keys
+          </Button>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+            >
+              Cancel
+            </Button>
+            <Button onClick={handleSaveApiKeys}>
+              Save Keys
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+} 
diff --git a/components/chat-sidebar.tsx b/components/chat-sidebar.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { useRouter, usePathname } from "next/navigation";
-import { MessageSquare, PlusCircle, Trash2, ServerIcon, Settings, Sparkles, ChevronsUpDown, Copy, Pencil, Github } from "lucide-react";
+import { MessageSquare, PlusCircle, Trash2, ServerIcon, Settings, Sparkles, ChevronsUpDown, Copy, Pencil, Github, Key } from "lucide-react";
 import {
     Sidebar,
     SidebarContent,
@@ -23,6 +23,7 @@ import { Badge } from "@/components/ui/badge";
 import { toast } from "sonner";
 import Image from "next/image";
 import { MCPServerManager } from "./mcp-server-manager";
+import { ApiKeyManager } from "./api-key-manager";
 import { ThemeToggle } from "./theme-toggle";
 import { getUserId, updateUserId } from "@/lib/user-id";
 import { useChats } from "@/lib/hooks/use-chats";
@@ -57,6 +58,7 @@ export function ChatSidebar() {
     const pathname = usePathname();
     const [userId, setUserId] = useState<string>('');
     const [mcpSettingsOpen, setMcpSettingsOpen] = useState(false);
+    const [apiKeySettingsOpen, setApiKeySettingsOpen] = useState(false);
     const { state } = useSidebar();
     const isCollapsed = state === "collapsed";
     const [editUserIdOpen, setEditUserIdOpen] = useState(false);
@@ -384,6 +386,13 @@ export function ChatSidebar() {
                                     <Settings className="mr-2 h-4 w-4 hover:text-sidebar-accent" />
                                     MCP Settings
                                 </DropdownMenuItem>
+                                <DropdownMenuItem onSelect={(e) => {
+                                    e.preventDefault();
+                                    setApiKeySettingsOpen(true);
+                                }}>
+                                    <Key className="mr-2 h-4 w-4 hover:text-sidebar-accent" />
+                                    API Keys
+                                </DropdownMenuItem>
                                 <DropdownMenuItem onSelect={(e) => {
                                     e.preventDefault();
                                     window.open("https://git.new/s-mcp", "_blank");
@@ -413,6 +422,11 @@ export function ChatSidebar() {
                     open={mcpSettingsOpen}
                     onOpenChange={setMcpSettingsOpen}
                 />
+                
+                <ApiKeyManager
+                    open={apiKeySettingsOpen}
+                    onOpenChange={setApiKeySettingsOpen}
+                />
             </SidebarFooter>
 
             <Dialog open={editUserIdOpen} onOpenChange={(open) => {
diff --git a/components/model-picker.tsx b/components/model-picker.tsx
@@ -35,14 +35,14 @@ export const ModelPicker = ({ selectedModel, setSelectedModel }: ModelPickerProp
   const getProviderIcon = (provider: string) => {
     switch (provider.toLowerCase()) {
       case 'anthropic':
-        return <Sparkles className="h-3 w-3 text-yellow-500" />;
+        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 'cohere':
+      case 'xai':
         return <Sparkles className="h-3 w-3 text-yellow-500" />;
       default:
         return <Info className="h-3 w-3 text-blue-500" />;
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@ai-sdk/groq": "^1.2.8",
     "@ai-sdk/openai": "^1.3.16",
     "@ai-sdk/react": "^1.2.9",
+    "@ai-sdk/xai": "^1.2.14",
     "@neondatabase/serverless": "^1.0.0",
     "@radix-ui/react-accordion": "^1.2.7",
     "@radix-ui/react-avatar": "^1.1.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
