90sGPT

• 

• 

• 

• 

Inspiration

We wanted to combine two things we love: the nostalgic aesthetic of 90s internet culture and modern AI technology. Remember the golden age of Geocities, with its neon colors, matrix rain backgrounds, and "under construction" GIFs? We thought: what if we could bring that vibe back while solving a real problem people face today - crafting the perfect message for someone special? The result is 90sGPT, a time machine that takes you back to 1999 while giving you cutting-edge AI assistance for your romantic conversations.

What it does

90sGPT is your AI-powered wingman with a radical 90s twist. It features three main tools:

AI Rizz Generator - Enter your situation (first date, anniversary, etc.), choose a conversation style (smooth, funny, romantic, poetic, or casual), and get AI-generated message suggestions tailored to your needs. Real-time streaming responses make it feel like you're chatting with a friend.

Conversation Analyzer - Paste your existing conversation thread and get instant AI feedback on tone, vibe, and next move suggestions. Plus, you get a retro-styled "Rizz Score" meter with animated gauges that tells you how well the conversation is going.

Pickup Line Generator - Generate pickup lines by category (cheesy, clever, wholesome, or nerdy) with a spinning dice animation. Save your favorites to local storage and access them anytime - no account needed!

All wrapped in an authentic 90s aesthetic with matrix rain backgrounds, neon glow effects, retro fonts (Press Start 2P and VT323), CRT scanlines, marquee scrolling text, and window-style UI components.

How we built it

Tech Stack:

Frontend: Next.js 16 with React 19 and App Router for modern performance Styling: Tailwind CSS 4 with custom 90s theme (neon colors, shadows, animations) AI: Anthropic's Claude Sonnet 4 via Vercel AI SDK for intelligent, context-aware responses Animations: Canvas-based Matrix rain effect, CSS keyframes for retro animations Storage: Browser LocalStorage API for saving favorites (no backend needed) Package Manager: Bun for blazing-fast installs and builds Key Implementation Details:

Custom transport layer to handle streaming AI responses in real-time Manual stream parsing to display responses character-by-character for that authentic chat feel Responsive design that works on mobile, tablet, and desktop Accessibility features including keyboard navigation and ARIA labels Performance optimizations: Matrix rain runs at 30fps, animations use CSS for smooth 60fps

Challenges we ran into

AI SDK Version Hell - The AI SDK v5 had a completely different API than expected. We spent hours debugging type errors with useChat, UIMessage vs ModelMessage, and transport configurations. Eventually, we ditched the hook and built a custom streaming implementation that gave us full control.

Stream Parsing - Getting the streaming responses to display in real-time was tricky. The toTextStreamResponse() format wasn't what we initially expected, and we had to rewrite the parsing logic across all three pages to handle plain text streams correctly.

90s Aesthetic Balance - Making it look authentically 90s while still being usable was a challenge. Too much neon and animations made it hard to read; too little made it boring. We iterated on the color palette and animation speeds to find the sweet spot.

Empty Message Bug - Claude API rejected requests with empty assistant messages. We had to add filtering logic to remove empty messages before sending to the API.

Accomplishments that we're proud of

It actually works! All three features work flawlessly with real-time AI streaming Authentic 90s vibe - The matrix rain, neon glows, retro fonts, and CRT effects genuinely feel like stepping into a time machine Performance - Despite all the animations, the app runs smoothly at 60fps No backend needed - Everything runs client-side except the AI API calls, making it easy to deploy Accessibility - We didn't sacrifice usability for aesthetics - it's keyboard accessible and screen reader friendly Complete documentation - We created comprehensive README, QUICKSTART, and TESTING guides

What we learned

AI SDK Architecture - Deep dive into how modern AI SDKs handle streaming, message formats, and transport layers Stream Processing - How to parse and display streaming text responses in real-time using ReadableStream API CSS Animations - Creating performant retro effects using keyframes, transforms, and canvas TypeScript Generics - Wrestling with complex generic types in the AI SDK taught us a lot about TypeScript's type system User Experience - Balancing nostalgia with usability - making something fun without sacrificing functionality Rapid Prototyping - Going from idea to working product in record time using modern tools like Next.js and Bun

What's next for 90sGPT

More 90s Features

Sound effects (dial-up modem sounds, typing sounds, "You've got mail!") Konami code easter eggs Actual GIF animations (dancing baby, flame dividers, sparkle cursor trails) Guestbook feature where users can leave messages Enhanced AI Capabilities

Multi-language support for international users Voice input/output for hands-free use Image analysis to suggest responses based on shared photos Conversation history with search and export Social Features

Share generated messages via Web Share API Webring-style navigation to other 90s-themed projects Leaderboard for highest Rizz Scores Community-submitted pickup lines Customization

Theme switcher (different 90s color schemes) Custom fonts and animations Adjustable AI personality (more/less 90s slang) Mobile App

Native iOS/Android apps with offline mode Widget for quick access to pickup lines Notifications for conversation reminders

Built With

• hooks
• kiro
• nextjs