Feat: Add custom model feature

app/api/research/route.ts

@@ -29,6 +29,7 @@ export async function POST(req: NextRequest) {
     // Retrieve API keys from secure cookies
     const openaiKey = req.cookies.get("openai-key")?.value;
     const firecrawlKey = req.cookies.get("firecrawl-key")?.value;
+    const apiUrl = req.cookies.get("api-url")?.value;
 
     // Add API key validation
     if (process.env.NEXT_PUBLIC_ENABLE_API_KEYS === "true") {
@@ -50,10 +51,11 @@ export async function POST(req: NextRequest) {
     console.log("API Keys Present:", {
       OpenAI: openaiKey ? "✅" : "❌",
       FireCrawl: firecrawlKey ? "✅" : "❌",
+      CustomApiUrl: apiUrl ? "✅" : "❌",
     });
 
     try {
-      const model = createModel(modelId as AIModel, openaiKey);
+      const model = createModel(modelId as AIModel, openaiKey, apiUrl);
       console.log("\n🤖 [RESEARCH ROUTE] === Model Created ===");
       console.log("Using Model:", modelId);
 

components.json

@@ -12,6 +12,7 @@
   },
   "aliases": {
     "components": "@/components",
+    "ui": "@/components/ui",
     "utils": "@/lib/utils"
   }
 }

components/chat/api-key-dialog.tsx

@@ -31,6 +31,7 @@ interface ApiKeyDialogProps {
 export function ApiKeyDialog({ show, onClose, onSuccess }: ApiKeyDialogProps) {
   const [openaiKey, setOpenaiKey] = useState("");
   const [firecrawlKey, setFirecrawlKey] = useState("");
+  const [apiUrl, setApiUrl] = useState<string>();
   const [loading, setLoading] = useState(false);
 
   const handleApiKeySubmit = async () => {
@@ -39,7 +40,7 @@ export function ApiKeyDialog({ show, onClose, onSuccess }: ApiKeyDialogProps) {
     const res = await fetch("/api/keys", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ openaiKey, firecrawlKey }),
+      body: JSON.stringify({ openaiKey, firecrawlKey, apiUrl }),
     });
     if (res.ok) {
       onClose(false);
@@ -170,6 +171,27 @@ export function ApiKeyDialog({ show, onClose, onSuccess }: ApiKeyDialogProps) {
               </p>
             </div>
 
+            <div>
+              <label className="text-sm font-medium text-foreground mb-1 block">
+                API URL
+              </label>
+              <div className="relative">
+                <Input
+                  type="text"
+                  value={apiUrl}
+                  onChange={(e) => setApiUrl(e.target.value)}
+                  placeholder="https://..."
+                  className="pr-10 font-mono text-sm bg-background/50 border-border focus:border-primary focus:ring-primary h-9 sm:h-10"
+                />
+                <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+                  <LockIcon className="h-4 w-4 text-muted-foreground" />
+                </div>
+              </div>
+              <p className="mt-1 text-xs text-muted-foreground">
+                Defaults to the OpenAI official API URL
+              </p>
+            </div>
+
             <div>
               <label className="text-sm font-medium text-foreground mb-1 block">
                 FireCrawl API Key

components/chat/custom-model-dialog.tsx

@@ -0,0 +1,77 @@
+import { Button } from "../ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { useState } from "react";
+import { Switch } from "../ui/switch";
+
+interface ApiKeyDialogProps {
+  show: boolean;
+  onClose: (open: boolean) => void;
+  onConfirm: (cutsomModelConfig: { name: string; vision: boolean }) => void;
+}
+
+export function CustomModelDialog({
+  show,
+  onClose,
+  onConfirm,
+}: ApiKeyDialogProps) {
+  const [modelName, setModelName] = useState<string>();
+  const [vision, setVision] = useState(false);
+
+  return (
+    <Dialog open={show} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Custom Model</DialogTitle>
+          <DialogDescription>Add your custom model here</DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center space-x-2">
+          <div className="grid flex-1 gap-2">
+            <Label htmlFor="model">Model Name</Label>
+            <Input
+              id="model"
+              placeholder="Model name like openai/gpt3-mini"
+              value={modelName}
+              onChange={(e) => setModelName(e.target.value)}
+            />
+          </div>
+        </div>
+        <div className="grid flex-1 gap-2">
+          <Label htmlFor="vision">Vision</Label>
+          <Switch
+            id="vision"
+            checked={vision}
+            onCheckedChange={(x) => setVision(x)}
+          />
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </DialogClose>
+
+          <Button
+            type="submit"
+            onClick={() => {
+              if (modelName) {
+                onConfirm({ name: modelName, vision: vision });
+              }
+            }}
+          >
+            Confirm
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}