GPT-4o & Claude 3.5 Sonnet

What can we build today?

{/* Centered Prompt Input */}

setPrompt(e.target.value)}
                className="w-full bg-transparent border-none focus:ring-0 text-lg py-3 px-4 resize-none outline-none placeholder:text-muted-foreground/60 min-h-[56px] max-h-[200px]"
                onInput={(e) => {
                  const target = e.target as HTMLTextAreaElement;
                  target.style.height = 'inherit';
                  target.style.height = `${target.scrollHeight}px`;
                }}
              />
              
              <div className="flex items-center justify-between px-2 pb-1">
                <div className="flex items-center gap-1">
                  <Button variant="ghost" size="icon" className="rounded-xl h-9 w-9 text-muted-foreground hover:text-primary">
                    <Paperclip size={18} />
                  </Button>
                  <Button variant="ghost" size="icon" className="rounded-xl h-9 w-9 text-muted-foreground hover:text-primary">
                    <Globe size={18} />
                  </Button>
                  <div className="h-4 w-px bg-border mx-1" />
                  <Button variant="ghost" size="sm" className="rounded-xl h-8 gap-1 text-xs font-semibold text-muted-foreground hover:bg-secondary">
                    <Plus size={14} />
                    Deep Search
                  </Button>
                </div>
                
                <Button 
                  size="icon" 
                  disabled={!prompt.trim()}
                  className={`rounded-xl h-9 w-9 transition-all duration-300 ${prompt.trim() ? 'bg-primary scale-100 shadow-lg shadow-primary/25' : 'bg-muted scale-95 opacity-50'}`}
                >
                  <ArrowUp size={20} strokeWidth={2.5} />
                </Button>
              </div>
            </div>
          </motion.div>

{/* Quick Suggestions */}
          <motion.div 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.3 }}
            className="flex flex-wrap justify-center gap-2 pt-4"
          >
            {suggestions.map((item, idx) => (
              <SuggestionChip key={idx} icon={item.icon} label={item.label} />
            ))}
          </motion.div>
        </Container>
      </main>

{/* Footer / Shortcuts */}
      <footer className="py-6 text-center text-xs text-muted-foreground">
        <div className="flex items-center justify-center gap-4">
          <span className="flex items-center gap-1.5 border border-border/50 px-2 py-0.5 rounded bg-muted/30">
            <kbd className="font-sans">⌘</kbd> K to search
          </span>
          <span className="flex items-center gap-1.5 border border-border/50 px-2 py-0.5 rounded bg-muted/30">
            <kbd className="font-sans">L</kbd> for labs
          </span>
        </div>
      </footer>
    </div>
  );
}</article></body></html>

AI Chat Homepage