Skip to main content
Back to Blog
AINext.jsStripeTutorial

Building Prompt Racer: A Real-Time AI Model Racing Platform

December 4, 202520 min read

## Project Overview

Prompt Racer is a Next.js web application that lets users race 4 leading AI models simultaneously to see which one responds fastest. The app features a no-signup pay-per-race monetization system powered by Stripe.

  • •Live URL: [prompt-racer.vercel.app](https://prompt-racer.vercel.app)
  • •GitHub: [github.com/JoeProAI/prompt-racer](https://github.com/JoeProAI/prompt-racer)

Tech Stack

Frontend - **Next.js 15.5.7** - App Router with React Server Components - **React 19.2.0** - Modern React with hooks - **TypeScript** - Type-safe development - **TailwindCSS v4** - Utility-first styling

Backend - **Next.js API Routes** - Serverless API endpoints - **OpenAI SDK** - GPT-4o integration - **Anthropic SDK** - Claude Sonnet 4.5 integration - **Google Generative AI SDK** - Gemini 2.0 Flash integration - **xAI SDK** - Grok 4.1 Fast integration - **Stripe** - Payment processing - **Next.js Cookies** - Credit tracking

The Four Racing Models

1. GPT-4o (OpenAI) - Green - Balanced speed and intelligence - Input: $2.50/M tokens, Output: $10/M tokens

2. Claude Sonnet 4.5 (Anthropic) - Purple - Long context, nuanced responses - Max Tokens: 1024 per race

3. Gemini 2.0 Flash (Google) - Blue - Experimental fast model - Multimodal capabilities

4. Grok 4.1 Fast (xAI) - Red - Optimized for speed, no reasoning overhead - 2M token context window

Multi-Model Racing Implementation

The Challenge Create a racing interface where users submit a single prompt and watch 4 AI models compete in real-time.

The Solution

1. Parallel API Calls with Promise.allSettled - All 4 models race simultaneously with no sequential bottlenecks.

2. Lazy Client Initialization - Getter functions for each AI client prevent build-time errors when env vars are missing.

3. Precise Timing - Date.now() for millisecond-accurate timing per model.

4. Graceful Error Handling - Individual try-catch blocks per model so if one fails, others continue racing.

Monetization System (No Signup Required)

Cookie-Based Credit Tracking

  • •No user authentication or database
  • •All credit data stored in httpOnly cookies
  • •Simple, fast, privacy-friendly
  • •httpOnly: true - Prevents XSS attacks
  • •sameSite: lax - CSRF protection
  • •maxAge: 1 year - Long-term storage

Pricing Tiers 1. **Free:** 3 races for new users 2. **Starter Pack:** $2.99 for 10 races ($0.30/race) 3. **Value Pack:** $4.99 for 25 races ($0.20/race) - Best Value 4. **24hr Unlimited:** $9.99 for 999 races

Key Technical Decisions

Why No User Accounts?

  • •Zero friction for new users
  • •No database costs
  • •Privacy-friendly (no PII stored)
  • •Simple architecture
  • •Fast development
  • •Credits tied to device/browser
  • •No cross-device sync

Verdict: For an MVP focused on rapid monetization, the pros outweigh cons.

Why Promise.allSettled vs Promise.all? - Promise.all fails if any promise rejects - Promise.allSettled waits for all promises regardless of failures - Perfect for racing where we want partial results even if some models fail

Cost Analysis

  • •GPT-4o: ~$0.05
  • •Claude: ~$0.04
  • •Gemini: ~$0.02
  • •Grok: ~$0.003
  • •Total Cost: ~$0.11 per race
  • •Starter Pack: $0.30 - $0.11 = $0.19 profit (63% margin)
  • •Value Pack: $0.20 - $0.11 = $0.09 profit (45% margin)

Lessons Learned

1. Simple is Better - No user accounts = 10x faster development - Cookie-based system = zero infrastructure - Stripe Checkout = payment in 1 day

2. Model API Differences - OpenAI: Most reliable, consistent naming - Anthropic: Different response structure (content array) - Google: Experimental models can change - xAI: Model naming conventions differ

3. Race Timing Matters - Need minimum display time (2s) for UX - Millisecond precision matters for credibility - Users want to see the race happen

4. Pricing Psychology - Best Value badge drives conversions - Middle tier should be most attractive - Free trials essential for conversion

Conclusion

  1. Build a real-time AI model comparison tool
  2. Implement no-signup monetization with Stripe
  3. Create a beautiful, performant Next.js app
  4. Deploy to production in 2 days
  • •Development Time: 2 days
  • •Lines of Code: ~800 LOC
  • •API Integrations: 4 AI models + Stripe
  • •Build Time: ~5 seconds

Live Demo: prompt-racer.vercel.app

This project proves that modern web development tools (Next.js, Vercel, Stripe) enable rapid MVP development with production-ready features like payments and AI integrations.

Author: Claude (Anthropic) + Joseph Gaither Date: December 2024