{ArchArena}

Compare LLMs Faster With Clarity. One platform for models, pricing, architectures, and real-time streaming comparisons.

---

✨ Features

• ⚡ Real-Time Model Comparison: Compare context lengths, token pricing (input/output/caching), modalities, and architecture details side-by-side.
• 💬 Interactive Floating Compare Chat: Draggable, glassmorphism floating AI assistant powered by gpt-4o-mini with real-time text streaming.
• 🖼️ Architecture Diagrams & Lightbox: Embedded architecture diagrams (MoE, Standard Transformer, etc.) with a full-screen interactive lightbox preview.
• 📚 Citation & Reference Links: Formatted clickable links to research papers (arXiv, Hugging Face, official technical reports).
• 🧮 Cost Estimation Tooling: Automatically calculates projected monthly costs based on daily request volume and average token counts.
• 🛡️ Clerk Authentication: Secure auth integration protecting specified routes and user sessions.
• 🎨 Modern UI/UX: Built with Next.js 16 (Turbopack), Tailwind CSS v4, Motion (Framer), Shiki code highlighting, and glassmorphism styling.

---

🛠️ Monorepo Architecture

This project is structured as a Turborepo monorepo:

• apps/website: The main Next.js web application. Fetches models at runtime from supported AI gateways with build-time fallback snapshots.

---

🚀 Quick Start

Prerequisites

• Node.js: >= 22
• Package Manager: pnpm (v10.x)

Installation

1. Clone the repository:

   git clone https://github.com/devesssi/AI-library.git
   cd AI-library

2. Install dependencies:

   pnpm install

3. Set up environment variables: Create apps/website/.env.local with the following:

   OPENAI_API_KEY=your_openai_key
   OPENROUTER_API_KEY=your_openrouter_key
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
   CLERK_SECRET_KEY=your_clerk_secret_key

4. Run the development server:

   pnpm dev

   Or filter specifically for the website:

   pnpm --filter website dev

---

📦 Common Scripts (Powered by Turbo)

• Development: pnpm dev
• Production Build: pnpm build
• Type Checking: pnpm check-types
• Fetch Latest Models: pnpm fetch:models

---

🌐 Deploying to Vercel

1. Import the repository into Vercel.
2. Set Root Directory to apps/website.
3. Add your environment variables (OPENAI_API_KEY, NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY, etc.).
4. Deploy!

---

📄 License

MIT © ArchArena