Complete workflow redesign with ChatGPT-inspired UX

Major Changes:
- Create dedicated Assistant Builder page (ChatGPT GPT Builder style)
- Add Simple Chat page for quick conversations
- Redesign Home page with clear user workflow paths
- Update sidebar navigation to reflect new structure
- Add Playground redirect page to guide users
- Improve system prompt visibility in Assistant Builder
- Create 3 clear user paths: Quick Chat, Build Assistant, Use Template

Features:
- Assistant Builder with large instruction area and real-time testing
- Simple Chat with conversation starters and assistant creation
- Clear workflow guidance for different user needs
- Professional ChatGPT-inspired design language

frontend/src/App.tsx

@@ -1,7 +1,9 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import { Layout } from './components/Layout'
 import { Home } from './pages/Home'
-import { Playground } from './pages/Playground'
+import { Playground } from './pages/PlaygroundRedirect'
+import { SimpleChat } from './pages/SimpleChat'
+import { AssistantBuilder } from './pages/AssistantBuilder'
 import { Models } from './pages/Models'
 import { Assistants } from './pages/Assistants'
 import { Community } from './pages/Community'
@@ -14,6 +16,8 @@ function App() {
         <Route path="/" element={<Layout />}>
           <Route index element={<Home />} />
           <Route path="playground" element={<Playground />} />
+          <Route path="chat" element={<SimpleChat />} />
+          <Route path="assistant-builder" element={<AssistantBuilder />} />
           <Route path="models" element={<Models />} />
           <Route path="assistants" element={<Assistants />} />
           <Route path="community" element={<Community />} />

frontend/src/components/Sidebar.tsx

@@ -18,28 +18,34 @@ const navigation = [
     description: 'Overview and getting started'
   },
   {
-    name: 'Chat Playground',
-    href: '/playground',
+    name: 'Quick Chat',
+    href: '/chat',
     icon: MessageSquare,
-    description: 'AI chatbot with conversation history'
+    description: 'Simple AI conversations'
   },
   {
-    name: 'Model Catalog',
-    href: '/models',
-    icon: BookOpen,
-    description: 'Browse and manage AI models'
+    name: 'Assistant Builder',
+    href: '/assistant-builder',
+    icon: Bot,
+    description: 'Create custom AI assistants'
   },
   {
     name: 'My Assistants',
     href: '/assistants',
-    icon: Bot,
-    description: 'Manage your custom AI assistants'
+    icon: Users,
+    description: 'Manage your saved assistants'
   },
   {
     name: 'Community',
     href: '/community',
-    icon: Users,
-    description: 'Discover and share assistant templates'
+    icon: BookOpen,
+    description: 'Discover assistant templates'
+  },
+  {
+    name: 'Models',
+    href: '/models',
+    icon: Brain,
+    description: 'Manage AI models'
   },
   {
     name: 'Settings',
@@ -71,7 +77,7 @@ export function Sidebar() {
       <div className="flex-1 px-3 py-4 space-y-8">
         <div>
           <h2 className="mb-2 px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
-            Get started
+            Features
           </h2>
           <nav className="space-y-1">
             {navigation.map((item) => {

frontend/src/pages/AssistantBuilder.tsx

@@ -0,0 +1,347 @@
+import { useState, useEffect } from 'react'
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Badge } from '@/components/ui/badge'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { 
+  Bot, 
+  MessageSquare,
+  Settings,
+  Save,
+  Play,
+  Sparkles,
+  ArrowLeft,
+  Send,
+  User,
+  Brain
+} from 'lucide-react'
+
+export function AssistantBuilder() {
+  const [assistantConfig, setAssistantConfig] = useState({
+    name: '',
+    description: '',
+    instructions: '',
+    model: 'Qwen/Qwen3-30B-A3B',
+    temperature: 0.7,
+    maxTokens: 2000,
+    conversation_starters: ['', '', '', '']
+  })
+
+  const [testMessages, setTestMessages] = useState<Array<{role: 'user' | 'assistant', content: string}>>([])
+  const [testInput, setTestInput] = useState('')
+  const [isTesting, setIsTesting] = useState(false)
+
+  const updateConfig = (field: string, value: any) => {
+    setAssistantConfig(prev => ({ ...prev, [field]: value }))
+  }
+
+  const updateConversationStarter = (index: number, value: string) => {
+    const starters = [...assistantConfig.conversation_starters]
+    starters[index] = value
+    updateConfig('conversation_starters', starters)
+  }
+
+  const testAssistant = async () => {
+    if (!testInput.trim()) return
+
+    const userMessage = { role: 'user' as const, content: testInput }
+    setTestMessages(prev => [...prev, userMessage])
+    setTestInput('')
+    setIsTesting(true)
+
+    try {
+      const baseUrl = `${window.location.protocol}//${window.location.host}`
+      const messages = [...testMessages, userMessage]
+      
+      const response = await fetch(`${baseUrl}/chat/completions`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          messages: [
+            { role: 'system', content: assistantConfig.instructions },
+            ...messages
+          ],
+          temperature: assistantConfig.temperature,
+          max_tokens: assistantConfig.maxTokens
+        })
+      })
+
+      if (response.ok) {
+        const data = await response.json()
+        const assistantMessage = { 
+          role: 'assistant' as const, 
+          content: data.choices[0]?.message?.content || 'No response'
+        }
+        setTestMessages(prev => [...prev, assistantMessage])
+      }
+    } catch (error) {
+      console.error('Test failed:', error)
+    } finally {
+      setIsTesting(false)
+    }
+  }
+
+  const saveAssistant = () => {
+    const assistant = {
+      id: `assistant_${Date.now()}`,
+      ...assistantConfig,
+      createdAt: new Date().toISOString(),
+      systemPrompt: assistantConfig.instructions
+    }
+
+    try {
+      const saved = JSON.parse(localStorage.getItem('savedAssistants') || '[]')
+      saved.push(assistant)
+      localStorage.setItem('savedAssistants', JSON.stringify(saved))
+      
+      alert('Assistant saved successfully!')
+      window.location.href = '/assistants'
+    } catch (error) {
+      console.error('Failed to save assistant:', error)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <div className="bg-white border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <Button 
+                variant="ghost" 
+                size="sm" 
+                onClick={() => window.location.href = '/assistants'}
+                className="flex items-center gap-2"
+              >
+                <ArrowLeft className="h-4 w-4" />
+                Back
+              </Button>
+              <div className="flex items-center gap-3">
+                <div className="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center">
+                  <Bot className="h-5 w-5 text-white" />
+                </div>
+                <div>
+                  <h1 className="text-xl font-semibold">Assistant Builder</h1>
+                  <p className="text-sm text-gray-500">Create your custom AI assistant</p>
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <Button variant="outline" onClick={() => setTestMessages([])}>
+                Clear Test
+              </Button>
+              <Button onClick={saveAssistant} className="flex items-center gap-2">
+                <Save className="h-4 w-4" />
+                Save Assistant
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto p-6">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 h-[calc(100vh-160px)]">
+          
+          {/* Configuration Panel */}
+          <div className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Settings className="h-5 w-5" />
+                  Configure Assistant
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                {/* Basic Info */}
+                <div className="space-y-4">
+                  <div>
+                    <label className="text-sm font-medium mb-2 block">Name</label>
+                    <Input
+                      placeholder="e.g., Marketing Expert"
+                      value={assistantConfig.name}
+                      onChange={(e) => updateConfig('name', e.target.value)}
+                    />
+                  </div>
+                  
+                  <div>
+                    <label className="text-sm font-medium mb-2 block">Description</label>
+                    <Input
+                      placeholder="What does this assistant do?"
+                      value={assistantConfig.description}
+                      onChange={(e) => updateConfig('description', e.target.value)}
+                    />
+                  </div>
+                </div>
+
+                {/* Instructions - Much Larger */}
+                <div>
+                  <label className="text-sm font-medium mb-2 block">Instructions</label>
+                  <p className="text-xs text-gray-500 mb-2">
+                    Define your assistant's behavior, expertise, and communication style
+                  </p>
+                  <Textarea
+                    className="min-h-[200px] font-mono text-sm"
+                    placeholder={`You are a helpful marketing expert assistant. You should:
+
+1. Provide actionable marketing advice
+2. Use data-driven insights when possible  
+3. Explain complex concepts simply
+4. Ask clarifying questions to give better recommendations
+5. Stay up-to-date with current marketing trends
+
+Your responses should be professional yet approachable, and always include specific examples when helpful.`}
+                    value={assistantConfig.instructions}
+                    onChange={(e) => updateConfig('instructions', e.target.value)}
+                  />
+                </div>
+
+                {/* Model Settings */}
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="text-sm font-medium mb-2 block">Temperature</label>
+                    <Input
+                      type="number"
+                      min="0"
+                      max="2"
+                      step="0.1"
+                      value={assistantConfig.temperature}
+                      onChange={(e) => updateConfig('temperature', parseFloat(e.target.value))}
+                    />
+                  </div>
+                  <div>
+                    <label className="text-sm font-medium mb-2 block">Max Tokens</label>
+                    <Input
+                      type="number"
+                      min="100"
+                      max="4000"
+                      step="100"
+                      value={assistantConfig.maxTokens}
+                      onChange={(e) => updateConfig('maxTokens', parseInt(e.target.value))}
+                    />
+                  </div>
+                </div>
+
+                {/* Conversation Starters */}
+                <div>
+                  <label className="text-sm font-medium mb-2 block">Conversation Starters</label>
+                  <p className="text-xs text-gray-500 mb-2">
+                    Suggested prompts to help users get started
+                  </p>
+                  <div className="space-y-2">
+                    {assistantConfig.conversation_starters.map((starter, index) => (
+                      <Input
+                        key={index}
+                        placeholder={`Conversation starter ${index + 1}`}
+                        value={starter}
+                        onChange={(e) => updateConversationStarter(index, e.target.value)}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Test Panel */}
+          <div className="flex flex-col">
+            <Card className="flex-1 flex flex-col">
+              <CardHeader className="pb-3">
+                <CardTitle className="flex items-center gap-2">
+                  <MessageSquare className="h-5 w-5" />
+                  Test Your Assistant
+                  {assistantConfig.name && (
+                    <Badge variant="outline" className="ml-auto">
+                      {assistantConfig.name}
+                    </Badge>
+                  )}
+                </CardTitle>
+              </CardHeader>
+              
+              {/* Messages Area */}
+              <CardContent className="flex-1 flex flex-col">
+                <div className="flex-1 bg-gray-50 rounded-lg p-4 mb-4 overflow-y-auto space-y-4 min-h-[300px]">
+                  {testMessages.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center h-full text-center text-gray-500">
+                      <Bot className="h-12 w-12 mb-4 text-gray-300" />
+                      <p className="text-sm">Start testing your assistant</p>
+                      <p className="text-xs text-gray-400 mt-1">Messages will appear here</p>
+                    </div>
+                  ) : (
+                    testMessages.map((msg, index) => (
+                      <div key={index} className={`flex gap-3 ${msg.role === 'assistant' ? 'justify-start' : 'justify-end'}`}>
+                        {msg.role === 'assistant' && (
+                          <div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center">
+                            <Bot className="h-4 w-4 text-white" />
+                          </div>
+                        )}
+                        <div className={`max-w-[80%] p-3 rounded-lg ${
+                          msg.role === 'assistant' 
+                            ? 'bg-white border border-gray-200' 
+                            : 'bg-blue-600 text-white'
+                        }`}>
+                          <p className="text-sm whitespace-pre-wrap">{msg.content}</p>
+                        </div>
+                        {msg.role === 'user' && (
+                          <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
+                            <User className="h-4 w-4 text-white" />
+                          </div>
+                        )}
+                      </div>
+                    ))
+                  )}
+                </div>
+
+                {/* Input Area */}
+                <div className="flex gap-2">
+                  <Input
+                    placeholder="Test your assistant..."
+                    value={testInput}
+                    onChange={(e) => setTestInput(e.target.value)}
+                    onKeyPress={(e) => e.key === 'Enter' && !e.shiftKey && testAssistant()}
+                    disabled={isTesting}
+                  />
+                  <Button 
+                    onClick={testAssistant} 
+                    disabled={isTesting || !testInput.trim()}
+                    size="sm"
+                  >
+                    {isTesting ? (
+                      <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                    ) : (
+                      <Send className="h-4 w-4" />
+                    )}
+                  </Button>
+                </div>
+
+                {/* Conversation Starters in Test Area */}
+                {assistantConfig.conversation_starters.some(s => s.trim()) && (
+                  <div className="mt-3 pt-3 border-t border-gray-200">
+                    <p className="text-xs text-gray-500 mb-2">Try these:</p>
+                    <div className="flex flex-wrap gap-2">
+                      {assistantConfig.conversation_starters
+                        .filter(s => s.trim())
+                        .map((starter, index) => (
+                          <Button
+                            key={index}
+                            variant="outline"
+                            size="sm"
+                            className="text-xs h-auto py-1 px-2"
+                            onClick={() => setTestInput(starter)}
+                          >
+                            {starter}
+                          </Button>
+                        ))}
+                    </div>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/Home.tsx

@@ -55,36 +55,40 @@ export function Home() {
 
   const quickActions = [
     {
-      title: 'Start Chatting',
-      description: 'Begin conversations with AI models',
+      title: 'Quick Chat',
+      description: 'Start chatting immediately - no setup required',
       icon: MessageSquare,
-      href: '/playground',
+      href: '/chat',
       color: 'bg-blue-600',
-      primary: true
+      primary: true,
+      badge: 'Instant'
     },
     {
-      title: 'Browse Models',
-      description: 'Manage and load AI models',
-      icon: BookOpen,
-      href: '/models',
-      color: 'bg-green-600',
-      primary: false
-    },
-    {
-      title: 'My Assistants',
-      description: 'Custom AI assistant configurations',
+      title: 'Build Assistant',
+      description: 'Create your custom AI assistant with specialized skills',
       icon: Bot,
-      href: '/assistants',
+      href: '/assistant-builder',
       color: 'bg-purple-600',
-      primary: false
+      primary: true,
+      badge: 'Advanced'
     },
     {
-      title: 'Community',
-      description: 'Discover and share templates',
+      title: 'Use Template',
+      description: 'Start with pre-built assistant templates from the community',
       icon: Users,
       href: '/community',
-      color: 'bg-orange-600',
-      primary: false
+      color: 'bg-green-600',
+      primary: true,
+      badge: 'Popular'
+    },
+    {
+      title: 'Manage Models',
+      description: 'Configure and load AI models',
+      icon: BookOpen,
+      href: '/models',
+      color: 'bg-gray-600',
+      primary: false,
+      badge: null
     }
   ]
 
@@ -154,24 +158,62 @@ export function Home() {
         
         {/* Quick Actions */}
         <section>
-          <h2 className="text-2xl font-semibold mb-6 text-center">Quick Actions</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {quickActions.map((action) => (
+          <div className="text-center mb-8">
+            <h2 className="text-2xl font-semibold mb-3">Choose Your Path</h2>
+            <p className="text-gray-600 max-w-2xl mx-auto">
+              Select the best way to get started based on your needs and experience level
+            </p>
+          </div>
+          
+          {/* Primary Actions */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+            {quickActions.filter(action => action.primary).map((action) => (
               <Card 
                 key={action.title}
-                className={`hover:shadow-lg transition-all duration-200 cursor-pointer hover:-translate-y-1 ${
-                  action.primary ? 'ring-2 ring-blue-200' : ''
-                }`}
+                className="hover:shadow-xl transition-all duration-300 cursor-pointer hover:-translate-y-2 border-2 border-transparent hover:border-blue-200"
                 onClick={() => window.location.href = action.href}
               >
-                <CardContent className="p-6 text-center space-y-4">
-                  <div className={`w-12 h-12 ${action.color} rounded-lg flex items-center justify-center mx-auto`}>
-                    <action.icon className="h-6 w-6 text-white" />
+                <CardContent className="p-8 text-center space-y-6">
+                  <div className="relative">
+                    <div className={`w-16 h-16 ${action.color} rounded-2xl flex items-center justify-center mx-auto`}>
+                      <action.icon className="h-8 w-8 text-white" />
+                    </div>
+                    {action.badge && (
+                      <Badge className="absolute -top-2 -right-2 bg-white text-gray-700 border border-gray-200">
+                        {action.badge}
+                      </Badge>
+                    )}
                   </div>
                   <div>
-                    <h3 className="font-semibold text-lg">{action.title}</h3>
-                    <p className="text-sm text-gray-600 mt-1">{action.description}</p>
+                    <h3 className="font-bold text-xl mb-2">{action.title}</h3>
+                    <p className="text-gray-600 text-sm leading-relaxed">{action.description}</p>
+                  </div>
+                  <Button className="w-full" size="lg">
+                    Get Started
+                    <ArrowRight className="h-4 w-4 ml-2" />
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {/* Secondary Actions */}
+          <div className="grid grid-cols-1 md:grid-cols-1 gap-4">
+            {quickActions.filter(action => !action.primary).map((action) => (
+              <Card 
+                key={action.title}
+                className="hover:shadow-md transition-all duration-200 cursor-pointer hover:-translate-y-1"
+                onClick={() => window.location.href = action.href}
+              >
+                <CardContent className="p-4 flex items-center gap-4">
+                  <div className={`w-12 h-12 ${action.color} rounded-lg flex items-center justify-center`}>
+                    <action.icon className="h-6 w-6 text-white" />
                   </div>
+                  <div className="flex-1">
+                    <h3 className="font-semibold text-base">{action.title}</h3>
+                    <p className="text-sm text-gray-600">{action.description}</p>
+                  </div>
+                  <ArrowRight className="h-5 w-5 text-gray-400" />
                 </CardContent>
               </Card>
             ))}
@@ -222,21 +264,27 @@ export function Home() {
           </div>
         </section>
 
-        {/* Get Started */}
-        <section className="text-center bg-gray-50 rounded-2xl p-8">
-          <h2 className="text-2xl font-semibold mb-4">Ready to Get Started?</h2>
-          <p className="text-gray-600 mb-6 max-w-2xl mx-auto">
-            Choose your preferred way to begin. Load models for local processing or start chatting with cloud APIs immediately.
-          </p>
-          <div className="flex items-center justify-center gap-4">
-            <Button onClick={() => window.location.href = '/playground'}>
-              <MessageSquare className="h-4 w-4 mr-2" />
-              Open Playground
-            </Button>
-            <Button variant="outline" onClick={() => window.location.href = '/assistants'}>
-              <Bot className="h-4 w-4 mr-2" />
-              Create Assistant
-            </Button>
+        {/* Recommended Path */}
+        <section className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-2xl p-8 border border-blue-200">
+          <div className="text-center">
+            <div className="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center mx-auto mb-4">
+              <Zap className="h-6 w-6 text-white" />
+            </div>
+            <h2 className="text-2xl font-semibold mb-4">New to AI Assistants?</h2>
+            <p className="text-gray-600 mb-6 max-w-2xl mx-auto">
+              We recommend starting with <strong>Quick Chat</strong> to get familiar with AI conversations, 
+              then try our <strong>Community Templates</strong> to see what's possible.
+            </p>
+            <div className="flex items-center justify-center gap-4">
+              <Button size="lg" onClick={() => window.location.href = '/chat'}>
+                <MessageSquare className="h-4 w-4 mr-2" />
+                Try Quick Chat
+              </Button>
+              <Button size="lg" variant="outline" onClick={() => window.location.href = '/community'}>
+                <Users className="h-4 w-4 mr-2" />
+                Browse Templates
+              </Button>
+            </div>
           </div>
         </section>
       </div>

frontend/src/pages/PlaygroundRedirect.tsx

@@ -0,0 +1,100 @@
+import { useEffect } from 'react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { 
+  MessageSquare,
+  Bot,
+  ArrowRight,
+  Zap
+} from 'lucide-react'
+
+export function Playground() {
+  useEffect(() => {
+    // Auto-redirect to Quick Chat after 3 seconds if user doesn't choose
+    const timer = setTimeout(() => {
+      window.location.href = '/chat'
+    }, 5000)
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  const options = [
+    {
+      title: 'Quick Chat',
+      description: 'Simple AI conversations with no configuration needed',
+      href: '/chat',
+      icon: MessageSquare,
+      color: 'bg-blue-600',
+      recommended: true
+    },
+    {
+      title: 'Build Assistant',
+      description: 'Create a custom AI assistant with specialized skills',
+      href: '/assistant-builder',
+      icon: Bot,
+      color: 'bg-purple-600',
+      recommended: false
+    }
+  ]
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-6">
+      <div className="max-w-4xl w-full">
+        <div className="text-center mb-12">
+          <div className="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
+            <Zap className="h-8 w-8 text-white" />
+          </div>
+          <h1 className="text-3xl font-bold mb-4">Choose Your Experience</h1>
+          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            The Playground has been redesigned! Choose the experience that best fits your needs.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+          {options.map((option) => (
+            <Card
+              key={option.title}
+              className={`cursor-pointer hover:shadow-xl transition-all duration-300 hover:-translate-y-2 ${
+                option.recommended ? 'ring-2 ring-blue-200 bg-blue-50' : ''
+              }`}
+              onClick={() => window.location.href = option.href}
+            >
+              <CardContent className="p-8 text-center space-y-6">
+                {option.recommended && (
+                  <div className="bg-blue-600 text-white text-xs px-3 py-1 rounded-full inline-block mb-4">
+                    Recommended for most users
+                  </div>
+                )}
+                <div className={`w-16 h-16 ${option.color} rounded-2xl flex items-center justify-center mx-auto`}>
+                  <option.icon className="h-8 w-8 text-white" />
+                </div>
+                <div>
+                  <h3 className="font-bold text-2xl mb-3">{option.title}</h3>
+                  <p className="text-gray-600 leading-relaxed">{option.description}</p>
+                </div>
+                <Button size="lg" className="w-full">
+                  Continue
+                  <ArrowRight className="h-4 w-4 ml-2" />
+                </Button>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <div className="text-center">
+          <p className="text-sm text-gray-500 mb-4">
+            This page will automatically redirect to Quick Chat in a few seconds
+          </p>
+          <div className="flex items-center justify-center gap-4">
+            <Button variant="outline" onClick={() => window.location.href = '/'}>
+              Back to Home
+            </Button>
+            <Button onClick={() => window.location.href = '/chat'}>
+              Go to Quick Chat
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/SimpleChat.tsx

@@ -0,0 +1,316 @@
+import { useState, useEffect, useRef } from 'react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Textarea } from '@/components/ui/textarea'
+import { 
+  Send, 
+  Bot, 
+  User, 
+  MessageSquare,
+  Zap,
+  Plus,
+  Settings,
+  Sparkles
+} from 'lucide-react'
+import { Chat } from '@/components/ui/chat'
+
+interface Message {
+  id: string
+  role: 'user' | 'assistant' | 'system'
+  content: string
+  timestamp: Date
+}
+
+export function SimpleChat() {
+  const [messages, setMessages] = useState<Message[]>([])
+  const [input, setInput] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [selectedModel, setSelectedModel] = useState('Qwen/Qwen3-30B-A3B')
+  const [models, setModels] = useState<any[]>([])
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  useEffect(() => {
+    fetchModels()
+    loadChatHistory()
+  }, [])
+
+  const fetchModels = async () => {
+    try {
+      const baseUrl = `${window.location.protocol}//${window.location.host}`
+      const res = await fetch(`${baseUrl}/models`)
+      if (res.ok) {
+        const data = await res.json()
+        setModels(data.models || [])
+      }
+    } catch (error) {
+      console.error('Failed to fetch models:', error)
+    }
+  }
+
+  const loadChatHistory = () => {
+    try {
+      const saved = localStorage.getItem('simpleChatHistory')
+      if (saved) {
+        const history = JSON.parse(saved)
+        setMessages(history.map((msg: any) => ({
+          ...msg,
+          timestamp: new Date(msg.timestamp)
+        })))
+      }
+    } catch (error) {
+      console.error('Failed to load chat history:', error)
+    }
+  }
+
+  const saveChatHistory = (msgs: Message[]) => {
+    try {
+      localStorage.setItem('simpleChatHistory', JSON.stringify(msgs))
+    } catch (error) {
+      console.error('Failed to save chat history:', error)
+    }
+  }
+
+  const sendMessage = async () => {
+    if (!input.trim()) return
+
+    const userMessage: Message = {
+      id: `user_${Date.now()}`,
+      role: 'user',
+      content: input.trim(),
+      timestamp: new Date()
+    }
+
+    const newMessages = [...messages, userMessage]
+    setMessages(newMessages)
+    setInput('')
+    setIsLoading(true)
+
+    try {
+      const baseUrl = `${window.location.protocol}//${window.location.host}`
+      const response = await fetch(`${baseUrl}/chat/completions`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          messages: newMessages.map(msg => ({
+            role: msg.role,
+            content: msg.content
+          })),
+          temperature: 0.7,
+          max_tokens: 2000
+        })
+      })
+
+      if (response.ok) {
+        const data = await response.json()
+        const assistantMessage: Message = {
+          id: `assistant_${Date.now()}`,
+          role: 'assistant',
+          content: data.choices[0]?.message?.content || 'No response received',
+          timestamp: new Date()
+        }
+
+        const finalMessages = [...newMessages, assistantMessage]
+        setMessages(finalMessages)
+        saveChatHistory(finalMessages)
+      } else {
+        throw new Error(`HTTP ${response.status}`)
+      }
+    } catch (error) {
+      console.error('Chat error:', error)
+      const errorMessage: Message = {
+        id: `error_${Date.now()}`,
+        role: 'assistant',
+        content: 'Sorry, I encountered an error. Please try again.',
+        timestamp: new Date()
+      }
+      const finalMessages = [...newMessages, errorMessage]
+      setMessages(finalMessages)
+      saveChatHistory(finalMessages)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      sendMessage()
+    }
+  }
+
+  const clearChat = () => {
+    setMessages([])
+    localStorage.removeItem('simpleChatHistory')
+  }
+
+  const createAssistantFromChat = () => {
+    // Save current conversation as starting point for assistant
+    const conversation = messages.slice(-10) // Last 10 messages
+    localStorage.setItem('assistantBuilderContext', JSON.stringify({
+      messages: conversation,
+      model: selectedModel
+    }))
+    window.location.href = '/assistant-builder'
+  }
+
+  const quickPrompts = [
+    "Help me write a professional email",
+    "Explain quantum computing simply", 
+    "Create a workout plan",
+    "Review my code for bugs"
+  ]
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <div className="border-b bg-background/95 backdrop-blur">
+        <div className="max-w-4xl mx-auto px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                <MessageSquare className="h-5 w-5 text-white" />
+              </div>
+              <div>
+                <h1 className="text-xl font-semibold">Quick Chat</h1>
+                <p className="text-sm text-muted-foreground">
+                  Simple AI conversations - no setup required
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <Badge variant="outline" className="text-xs">
+                {selectedModel.split('/').pop()}
+              </Badge>
+              <Button variant="outline" size="sm" onClick={clearChat}>
+                <Plus className="h-4 w-4 mr-1" />
+                New Chat
+              </Button>
+              {messages.length > 0 && (
+                <Button size="sm" onClick={createAssistantFromChat}>
+                  <Sparkles className="h-4 w-4 mr-1" />
+                  Create Assistant
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-4xl mx-auto px-6 py-6">
+        <div className="flex flex-col h-[calc(100vh-200px)]">
+          
+          {/* Messages Area */}
+          <div className="flex-1 mb-6 overflow-hidden">
+            <Card className="h-full">
+              <CardContent className="h-full p-0">
+                <div className="h-full p-6 overflow-y-auto">
+                  {messages.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center h-full text-center">
+                      <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
+                        <Bot className="h-8 w-8 text-blue-600" />
+                      </div>
+                      <h3 className="text-lg font-medium mb-2">Start a conversation</h3>
+                      <p className="text-muted-foreground mb-6 max-w-md">
+                        Ask me anything or try one of these suggestions to get started
+                      </p>
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-w-2xl">
+                        {quickPrompts.map((prompt, index) => (
+                          <Button
+                            key={index}
+                            variant="outline"
+                            className="text-left h-auto py-3 px-4"
+                            onClick={() => setInput(prompt)}
+                          >
+                            <div className="text-sm">{prompt}</div>
+                          </Button>
+                        ))}
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="space-y-6">
+                      {messages.map((message) => (
+                        <div key={message.id} className={`flex gap-4 ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+                          {message.role === 'assistant' && (
+                            <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
+                              <Bot className="h-4 w-4 text-white" />
+                            </div>
+                          )}
+                          <div className={`max-w-[80%] p-4 rounded-lg ${
+                            message.role === 'user'
+                              ? 'bg-blue-600 text-white'
+                              : 'bg-gray-100 text-gray-900'
+                          }`}>
+                            <div className="prose prose-sm max-w-none">
+                              <Chat messages={[message]} />
+                            </div>
+                          </div>
+                          {message.role === 'user' && (
+                            <div className="w-8 h-8 bg-gray-600 rounded-full flex items-center justify-center">
+                              <User className="h-4 w-4 text-white" />
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                      {isLoading && (
+                        <div className="flex gap-4 justify-start">
+                          <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
+                            <Bot className="h-4 w-4 text-white" />
+                          </div>
+                          <div className="bg-gray-100 rounded-lg p-4">
+                            <div className="flex space-x-1">
+                              <div className="w-2 h-2 bg-gray-400 rounded-full animate-pulse"></div>
+                              <div className="w-2 h-2 bg-gray-400 rounded-full animate-pulse" style={{ animationDelay: '0.2s' }}></div>
+                              <div className="w-2 h-2 bg-gray-400 rounded-full animate-pulse" style={{ animationDelay: '0.4s' }}></div>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Input Area */}
+          <div className="space-y-4">
+            <Card>
+              <CardContent className="p-4">
+                <div className="flex gap-3">
+                  <Textarea
+                    ref={textareaRef}
+                    placeholder="Type your message..."
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    onKeyPress={handleKeyPress}
+                    className="flex-1 min-h-[60px] resize-none"
+                    disabled={isLoading}
+                  />
+                  <Button 
+                    onClick={sendMessage}
+                    disabled={isLoading || !input.trim()}
+                    size="lg"
+                    className="shrink-0"
+                  >
+                    {isLoading ? (
+                      <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                    ) : (
+                      <Send className="h-4 w-4" />
+                    )}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+            
+            <div className="text-center">
+              <p className="text-xs text-muted-foreground">
+                Press Enter to send, Shift+Enter for new line
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}