LLM Arena | Real-Time AI Model Racing

Build this project step by step with our detailed tutorial on JavaScript Mastery YouTube. Join the JSM family!

📋 Table of Contents

1. ✨ Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🔗 Assets
6. 🚀 More

🚨 Tutorial

This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, JavaScript Mastery.

If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!

✨ Introduction

LLM Arena is a unique measuring instrument built to evaluate open-source AI models based on real data, not just vibes. Users submit a single prompt, and the arena races up to three different models side-by-side in real-time, streaming their answers and tracking exact metrics like tokens per second, time to first token, and cost. Users then vote on the winning response, dynamically updating a public leaderboard to reveal which models actually perform best for real-world tasks.

If you're getting started and need assistance or face any bugs, join our active Discord community with over 50k+ members. It's a place where people help each other out.

⚙️ Tech Stack

• Next.js is a production-ready React framework that offers server-side rendering, static site generation, and powerful routing features. It streamlines the development of full-stack web applications by providing a comprehensive ecosystem for performance optimization and API development.

• Prisma ORM is a next-generation ORM for Node.js and TypeScript that simplifies database interactions. It provides a type-safe client generated from your schema, making querying intuitive and highly efficient.

• PostgreSQL is an advanced, open-source object-relational database system recognized for its reliability and performance. It serves as the persistent storage layer for tracking votes, metrics, and the public leaderboard.

• Clerk is a specialized authentication and user management platform for React and Next.js. It offers drop-in pre-built components for secure sign-in and profile management out of the box.

• PostHog is an all-in-one product analytics platform. It provides comprehensive observability on every single model call, tracking essential usage data and user interactions across the arena.

• Arcjet is an advanced security layer built for modern applications. It locks down the API endpoints to protect against malicious bots and prompt injection attacks.

• Greptile is an AI-powered code review tool. It seamlessly reviews every pull request opened by our agent live during the development workflow to ensure code quality.

🔋 Features

👉 Real-Time Model Racing: Submit a single prompt and watch up to three open-source models stream their answers side-by-side simultaneously.

👉 Live Performance Metrics: Accurately track and display exact tokens per second, time to first token, and cost for honest model evaluation.

👉 Public Voting & Leaderboard: Vote on the best generated response to feed into a public leaderboard that ranks models based on actual user preference.

👉 Agentic Development Workflow: The entire application architecture and codebase were generated agentically using Claude Code based on a plain English specification.

👉 Full Observability: Detailed tracking and product analytics on every model call powered by PostHog.

👉 Endpoint Security: Intelligent bot protection and prompt injection defense managed by Arcjet.

👉 Live PR Reviews: Automated, AI-driven code reviews on every pull request submitted by the agent using Greptile.

And many more, including code architecture and reusability.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone [git remote URL]

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

# https://openrouter.ai/keys
OPENROUTER_API_KEY=

# Postgres connection string
DATABASE_URL=postgresql://user:password@localhost:5432/llm_arena

# https://dashboard.clerk.com -> API keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

# https://app.posthog.com -> Project settings
NEXT_PUBLIC_POSTHOG_KEY=
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

# https://app.arcjet.com -> your site -> SDK key
ARCJET_KEY=ajkey_

Replace the placeholder values with your real credentials. You can get these by signing up at: Clerk, PostHog, Arcjet, Greptile, OpenRouter, and your PostgreSQL provider.

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.

🔗 Assets

Assets, the generated specification file, and Excalidraw sketches used in the project can be found in the video kit.

🚀 More

Advance your skills with our Pro Courses

Enjoyed creating this project? Dive deeper into our PRO courses for a richer learning adventure. They're packed with detailed explanations, cool features, and exercises to boost your skills. Give it a go!