up

Author: benjamincanac

app/assets/css/main.css

@@ -19,4 +19,4 @@
 
 :root {
   --ui-container: var(--container-3xl);
-}
+}

app/components/ModelSelect.vue

@@ -1,12 +1,20 @@
 <script setup lang="ts">
-const { model, models } = useLLM()
+const { model, models } = useModels()
+
+const items = computed(() => models.map(model => ({
+  label: model,
+  value: model,
+  icon: `i-simple-icons-${model.split('/')[0]}`
+})))
 </script>
 
 <template>
   <USelectMenu
     v-model="model"
-    :items="models"
+    :items="items"
+    :icon="`i-simple-icons-${model.split('/')[0]}`"
     variant="ghost"
+    value-key="value"
     class="hover:bg-default focus:bg-default data-[state=open]:bg-default"
     :ui="{
       trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'

app/composables/useLLM.ts

@@ -0,0 +1,22 @@
+export function useModels() {
+  const models = [
+    // OpenAI Models
+    'openai/gpt-5',
+    'openai/gpt-5-mini',
+    'openai/gpt-4o',
+    'openai/gpt-4o-mini',
+    // Anthropic Claude Models
+    'anthropic/claude-sonnet-4',
+    'anthropic/claude-sonnet-3.7',
+    // Google Gemini Models
+    'google/gemini-2.5-pro',
+    'google/gemini-2.5-flash'
+  ]
+
+  const model = useCookie<string>('model', { default: () => 'openai/gpt-4o-mini' })
+
+  return {
+    models,
+    model
+  }
+}

app/composables/useModels.ts

@@ -14,7 +14,7 @@ const components = {
 const route = useRoute()
 const toast = useToast()
 const clipboard = useClipboard()
-const { model } = useLLM()
+const { model } = useModels()
 
 const { data } = await useFetch(`/api/chats/${route.params.id}`, {
   cache: 'force-cache'

app/pages/chat/[id].vue

@@ -2,7 +2,7 @@
 const input = ref('')
 const loading = ref(false)
 
-const { model } = useLLM()
+const { model } = useModels()
 
 async function createChat(prompt: string) {
   input.value = prompt

app/pages/index.vue

@@ -34,7 +34,7 @@ export default defineEventHandler(async (event) => {
 
   if (!chat.title) {
     const { text: title } = await generateText({
-      model: gateway('openai/gpt-4.1-nano'),
+      model: gateway('openai/gpt-5-nano'),
       system: `You are a title generator for a chat:
           - Generate a short title based on the first user's message
           - The title should be less than 30 characters long