Merge pull request #451 from miurla/feature/move-models-to-json

refactor: move model configurations to JSON and improve model management

Author: miurla

.env.local.example

@@ -45,14 +45,10 @@ TAVILY_API_KEY=[YOUR_TAVILY_API_KEY]  # Get your API key at: https://app.tavily.
 
 # Ollama
 # OLLAMA_BASE_URL=http://localhost:11434
-# NEXT_PUBLIC_OLLAMA_MODEL=[YOUR_MODEL_NAME] (eg: deepseek-r1)
-# If you want to use a different model for tool call, set the model name here.
-# NEXT_PUBLIC_OLLAMA_TOOL_CALL_MODEL=[YOUR_MODEL_NAME] (eg: phi4) (optional)
 
 # Azure OpenAI
 # AZURE_API_KEY=
 # AZURE_RESOURCE_NAME=
-# NEXT_PUBLIC_AZURE_DEPLOYMENT_NAME=
 
 # DeepSeek
 # DEEPSEEK_API_KEY=[YOUR_DEEPSEEK_API_KEY]
@@ -64,7 +60,6 @@ TAVILY_API_KEY=[YOUR_TAVILY_API_KEY]  # Get your API key at: https://app.tavily.
 # XAI_API_KEY=[YOUR_XAI_API_KEY]
 
 # OpenAI Compatible Model
-# NEXT_PUBLIC_OPENAI_COMPATIBLE_MODEL=
 # OPENAI_COMPATIBLE_API_KEY=
 # OPENAI_COMPATIBLE_API_BASE_URL=
 

README.md

@@ -34,6 +34,8 @@ An AI-powered search engine with a generative UI.
 
 ### AI Providers
 
+The following AI providers are supported:
+
 - OpenAI (Default)
 - Google Generative AI
 - Azure OpenAI
@@ -42,8 +44,11 @@ An AI-powered search engine with a generative UI.
 - Groq
 - DeepSeek
 - Fireworks
+- xAI (Grok)
 - OpenAI Compatible
 
+Models are configured in `lib/config/models.json`. Each model requires its corresponding API key to be set in the environment variables. See [Configuration Guide](docs/CONFIGURATION.md) for details.
+
 ### Search Capabilities
 
 - URL-specific search

app/api/chat/route.ts

@@ -1,11 +1,19 @@
 import { createManualToolStreamResponse } from '@/lib/streaming/create-manual-tool-stream'
 import { createToolCallingStreamResponse } from '@/lib/streaming/create-tool-calling-stream'
-import { isProviderEnabled, isToolCallSupported } from '@/lib/utils/registry'
+import { Model } from '@/lib/types/models'
+import { isProviderEnabled } from '@/lib/utils/registry'
 import { cookies } from 'next/headers'
 
 export const maxDuration = 30
 
-const DEFAULT_MODEL = 'openai:gpt-4o-mini'
+const DEFAULT_MODEL: Model = {
+  id: 'gpt-4o-mini',
+  name: 'GPT-4o mini',
+  provider: 'OpenAI',
+  providerId: 'openai',
+  enabled: true,
+  toolCallType: 'native'
+}
 
 export async function POST(req: Request) {
   try {
@@ -21,46 +29,52 @@ export async function POST(req: Request) {
     }
 
     const cookieStore = await cookies()
-    const modelFromCookie = cookieStore.get('selected-model')?.value
+    const modelJson = cookieStore.get('selectedModel')?.value
     const searchMode = cookieStore.get('search-mode')?.value === 'true'
-    const model = modelFromCookie || DEFAULT_MODEL
-    const provider = model.split(':')[0]
-    if (!isProviderEnabled(provider)) {
-      return new Response(`Selected provider is not enabled ${provider}`, {
-        status: 404,
-        statusText: 'Not Found'
-      })
+
+    let selectedModel = DEFAULT_MODEL
+
+    if (modelJson) {
+      try {
+        selectedModel = JSON.parse(modelJson) as Model
+      } catch (e) {
+        console.error('Failed to parse selected model:', e)
+      }
+    }
+
+    if (
+      !isProviderEnabled(selectedModel.providerId) ||
+      selectedModel.enabled === false
+    ) {
+      return new Response(
+        `Selected provider is not enabled ${selectedModel.providerId}`,
+        {
+          status: 404,
+          statusText: 'Not Found'
+        }
+      )
     }
 
-    const supportsToolCalling = isToolCallSupported(model)
+    const supportsToolCalling = selectedModel.toolCallType === 'native'
 
     return supportsToolCalling
       ? createToolCallingStreamResponse({
           messages,
-          model,
+          model: selectedModel,
           chatId,
           searchMode
         })
       : createManualToolStreamResponse({
           messages,
-          model,
+          model: selectedModel,
           chatId,
           searchMode
         })
   } catch (error) {
     console.error('API route error:', error)
-    return new Response(
-      JSON.stringify({
-        error:
-          error instanceof Error
-            ? error.message
-            : 'An unexpected error occurred',
-        status: 500
-      }),
-      {
-        status: 500,
-        headers: { 'Content-Type': 'application/json' }
-      }
-    )
+    return new Response('Error processing your request', {
+      status: 500,
+      statusText: 'Internal Server Error'
+    })
   }
 }

app/page.tsx

@@ -1,7 +1,9 @@
 import { Chat } from '@/components/chat'
+import modelsList from '@/lib/config/models.json'
+import { Model } from '@/lib/types/models'
 import { generateId } from 'ai'
 
 export default function Page() {
   const id = generateId()
-  return <Chat id={id} />
+  return <Chat id={id} models={modelsList.models as Model[]} />
 }

app/search/[id]/page.tsx

@@ -1,7 +1,9 @@
-import { notFound, redirect } from 'next/navigation'
 import { Chat } from '@/components/chat'
 import { getChat } from '@/lib/actions/chat'
+import modelsList from '@/lib/config/models.json'
+import { Model } from '@/lib/types/models'
 import { convertToUIMessages } from '@/lib/utils'
+import { notFound, redirect } from 'next/navigation'
 
 export const maxDuration = 60
 
@@ -32,5 +34,11 @@ export default async function SearchPage(props: {
     notFound()
   }
 
-  return <Chat id={id} savedMessages={messages} />
+  return (
+    <Chat
+      id={id}
+      savedMessages={messages}
+      models={modelsList.models as Model[]}
+    />
+  )
 }

app/share/[id]/page.tsx

@@ -1,7 +1,9 @@
-import { notFound } from 'next/navigation'
 import { Chat } from '@/components/chat'
 import { getSharedChat } from '@/lib/actions/chat'
+import modelsList from '@/lib/config/models.json'
+import { Model } from '@/lib/types/models'
 import { convertToUIMessages } from '@/lib/utils'
+import { notFound } from 'next/navigation'
 
 export async function generateMetadata(props: {
   params: Promise<{ id: string }>
@@ -30,5 +32,11 @@ export default async function SharePage(props: {
     notFound()
   }
 
-  return <Chat id={id} savedMessages={messages} />
+  return (
+    <Chat
+      id={id}
+      savedMessages={messages}
+      models={modelsList.models as Model[]}
+    />
+  )
 }

components/chat-panel.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { Model } from '@/lib/types/models'
 import { cn } from '@/lib/utils'
 import { Message } from 'ai'
 import { ArrowUp, MessageCirclePlus, Square } from 'lucide-react'
@@ -22,6 +23,7 @@ interface ChatPanelProps {
   query?: string
   stop: () => void
   append: (message: any) => void
+  models?: Model[]
 }
 
 export function ChatPanel({
@@ -33,7 +35,8 @@ export function ChatPanel({
   setMessages,
   query,
   stop,
-  append
+  append,
+  models
 }: ChatPanelProps) {
   const [showEmptyScreen, setShowEmptyScreen] = useState(false)
   const router = useRouter()
@@ -130,7 +133,7 @@ export function ChatPanel({
           {/* Bottom menu area */}
           <div className="flex items-center justify-between p-3">
             <div className="flex items-center gap-2">
-              <ModelSelector />
+              <ModelSelector models={models || []} />
               <SearchModeToggle />
             </div>
             <div className="flex items-center gap-2">

components/chat.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { CHAT_ID } from '@/lib/constants'
+import { Model } from '@/lib/types/models'
 import { Message, useChat } from 'ai/react'
 import { useEffect } from 'react'
 import { toast } from 'sonner'
@@ -10,11 +11,13 @@ import { ChatPanel } from './chat-panel'
 export function Chat({
   id,
   savedMessages = [],
-  query
+  query,
+  models
 }: {
   id: string
   savedMessages?: Message[]
   query?: string
+  models?: Model[]
 }) {
   const {
     messages,
@@ -78,6 +81,7 @@ export function Chat({
         stop={stop}
         query={query}
         append={append}
+        models={models}
       />
     </div>
   )

components/model-selector.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Model, models } from '@/lib/types/models'
+import { Model } from '@/lib/types/models'
 import { getCookie, setCookie } from '@/lib/utils/cookies'
 import { isReasoningModel } from '@/lib/utils/registry'
 import { Check, ChevronsUpDown, Lightbulb } from 'lucide-react'
@@ -29,25 +29,42 @@ function groupModelsByProvider(models: Model[]) {
   }, {} as Record<string, Model[]>)
 }
 
-export function ModelSelector() {
+interface ModelSelectorProps {
+  models: Model[]
+}
+
+export function ModelSelector({ models }: ModelSelectorProps) {
   const [open, setOpen] = useState(false)
-  const [selectedModelId, setSelectedModelId] = useState<string>('')
+  const [value, setValue] = useState('')
 
   useEffect(() => {
-    const savedModel = getCookie('selected-model')
+    const savedModel = getCookie('selectedModel')
     if (savedModel) {
-      setSelectedModelId(savedModel)
+      try {
+        const model = JSON.parse(savedModel) as Model
+        setValue(createModelId(model))
+      } catch (e) {
+        console.error('Failed to parse saved model:', e)
+      }
     }
   }, [])
 
   const handleModelSelect = (id: string) => {
-    setSelectedModelId(id === selectedModelId ? '' : id)
-    setCookie('selected-model', id)
+    const newValue = id === value ? '' : id
+    setValue(newValue)
+    
+    const selectedModel = models.find(model => createModelId(model) === newValue)
+    if (selectedModel) {
+      setCookie('selectedModel', JSON.stringify(selectedModel))
+    } else {
+      setCookie('selectedModel', '')
+    }
+    
     setOpen(false)
   }
 
+  const selectedModel = models.find(model => createModelId(model) === value)
   const groupedModels = groupModelsByProvider(models)
-  const selectedModel = models.find(m => createModelId(m) === selectedModelId)
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -108,9 +125,7 @@ export function ModelSelector() {
                       </div>
                       <Check
                         className={`h-4 w-4 ${
-                          selectedModelId === modelId
-                            ? 'opacity-100'
-                            : 'opacity-0'
+                          value === modelId ? 'opacity-100' : 'opacity-0'
                         }`}
                       />
                     </CommandItem>