feat: Add Hugging Face model support

.env.example

@@ -9,3 +9,5 @@ OPENAI_BASE_URL=""   # optional – leave blank to use api.openai.com
 # When pointing to Azure: OPENAI_BASE_URL=https://<resource>.openai.azure.com/openai/deployments/<deployment-name>
 # Optional extra headers as JSON, eg: {"api-key":"abc","organization":"org_xyz"}
 OPENAI_EXTRA_HEADERS=""
+
+HF_TOKEN=

app/api/chat/route.ts

@@ -1,5 +1,6 @@
 import { openai } from "@/lib/openai-client";
-import type { ModelID } from "@/lib/models";
+import { hf } from "@/lib/hf-client";
+import { getModels, type ModelID } from "@/lib/models";
 import { saveChat } from "@/lib/chat-store";
 import { nanoid } from "nanoid";
 import { db } from "@/lib/db";
@@ -105,13 +106,20 @@ export async function POST(req: Request) {
 
   const { tools, cleanup } = await initializeMCPClients(mcpServers, req.signal);
 
-  const completion = await openai.chat.completions.create(
+  const hfModels = await getModels();
+  const client = hfModels.includes(selectedModel) ? hf : openai;
+
+  const openAITools = mcpToolsToOpenAITools(tools);
+
+  const completion = await client.chat.completions.create(
     {
       model: selectedModel,
       stream: true,
       messages,
-      tools: mcpToolsToOpenAITools(tools),
-      tool_choice: "auto",
+      ...(openAITools.length > 0 && {
+        tools: openAITools,
+        tool_choice: "auto",
+      }),
     },
     { signal: req.signal }
   );

components/chat.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { DEFAULT_MODEL, type ModelID } from "@/lib/models";
+import { getDefaultModel, 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", DEFAULT_MODEL);
+  const [selectedModel, setSelectedModel] = useLocalStorage<ModelID>("selectedModel", "");
   const [userId, setUserId] = useState<string>('');
   const [generatedChatId, setGeneratedChatId] = useState<string>('');
   
@@ -41,6 +41,16 @@ export default function Chat() {
   useEffect(() => {
     setUserId(getUserId());
   }, []);
+
+  useEffect(() => {
+    const fetchDefaultModel = async () => {
+      const defaultModel = await getDefaultModel();
+      if (!selectedModel) {
+        setSelectedModel(defaultModel);
+      }
+    };
+    fetchDefaultModel();
+  }, [selectedModel, setSelectedModel]);
   
   // Generate a chat ID if needed
   useEffect(() => {

components/message.tsx

@@ -163,7 +163,7 @@ const PurePreviewMessage = ({
                   >
                     <div
                       className={cn("flex flex-col gap-3 w-full", {
-                        "bg-secondary text-secondary-foreground px-4 py-3 rounded-2xl":
+                        "bg-secondary text-secondary-foreground px-4 py-1.5 rounded-2xl":
                           message.role === "user",
                       })}
                     >

components/model-picker.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { MODELS, DEFAULT_MODEL, ModelID } from "@/lib/models";
+import { getModels, getDefaultModel, ModelID } from "@/lib/models";
 import {
   Select,
   SelectContent,
@@ -10,7 +10,7 @@ import {
 } from "./ui/select";
 import { cn } from "@/lib/utils";
 import { Bot } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 interface ModelPickerProps {
   selectedModel: ModelID;
@@ -18,19 +18,28 @@ interface ModelPickerProps {
 }
 
 export const ModelPicker = ({ selectedModel, setSelectedModel }: ModelPickerProps) => {
-  // Ensure we always have a valid model ID
-  const validModelId = MODELS.includes(selectedModel) ? selectedModel : DEFAULT_MODEL;
-  
-  // If the selected model is invalid, update it to the default
+  const [models, setModels] = useState<ModelID[]>([]);
+  const [validModelId, setValidModelId] = useState<ModelID>("");
+
   useEffect(() => {
-    if (selectedModel !== validModelId) {
-      setSelectedModel(validModelId);
-    }
-  }, [selectedModel, validModelId, setSelectedModel]);
+    const fetchModels = async () => {
+      const availableModels = await getModels();
+      setModels(availableModels);
+      const defaultModel = await getDefaultModel();
+      const currentModel = selectedModel || defaultModel;
+      const isValid = availableModels.includes(currentModel);
+      const newValidModelId = isValid ? currentModel : defaultModel;
+      setValidModelId(newValidModelId);
+      if (selectedModel !== newValidModelId) {
+        setSelectedModel(newValidModelId);
+      }
+    };
+    fetchModels();
+  }, [selectedModel, setSelectedModel]);
 
   // Handle model change
   const handleModelChange = (modelId: string) => {
-    if (MODELS.includes(modelId as ModelID)) {
+    if (models.includes(modelId as ModelID)) {
       setSelectedModel(modelId as ModelID);
     }
   };
@@ -43,7 +52,7 @@ export const ModelPicker = ({ selectedModel, setSelectedModel }: ModelPickerProp
         defaultValue={validModelId}
       >
         <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"
+          className="max-w-[200px] sm:max-w-fit sm:w-80 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"
@@ -60,7 +69,7 @@ export const ModelPicker = ({ selectedModel, setSelectedModel }: ModelPickerProp
           className="bg-background/95 dark:bg-muted/95 backdrop-blur-sm border-border/80 rounded-lg overflow-hidden p-0 w-[280px]"
         >
           <SelectGroup className="space-y-1 p-1">
-            {MODELS.map((id) => (
+            {models.map((id) => (
               <SelectItem
                 key={id}
                 value={id}

lib/hf-client.ts

@@ -0,0 +1,6 @@
+import OpenAI from "openai";
+
+export const hf = new OpenAI({
+  apiKey: process.env.HF_TOKEN,
+  baseURL: "https://router.huggingface.co/v1",
+});

lib/models.ts

@@ -2,8 +2,27 @@
  * 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 = string;
 
-export type ModelID = (typeof MODELS)[number];
+let modelsCache: string[] | null = null;
 
-export const DEFAULT_MODEL: ModelID = "gpt-4o-mini";
+export async function getModels(): Promise<string[]> {
+  if (modelsCache) {
+    return modelsCache;
+  }
+  try {
+    const response = await fetch("https://router.huggingface.co/v1/models");
+    const data = await response.json();
+    const modelIds = data.data.slice(0, 5).map((model: any) => model.id);
+    modelsCache = modelIds;
+    return modelIds;
+  } catch (e) {
+    console.error(e);
+    return [];
+  }
+}
+
+export async function getDefaultModel(): Promise<ModelID> {
+  const models = await getModels();
+  return models[0] ?? "";
+}