ModelViz

Interactive analytics platform for comparing AI models across multiple providers with real-time performance metrics, cost analysis, and 3D visualisations

What It Does

ModelViz enables you to compare OpenAI, Anthropic, Google (Gemini), and Perplexity models side by side. Test prompts across multiple models simultaneously, track usage metrics, analyse costs, and visualise API performance with an immersive cyberpunk-themed interface.

The platform provides real-time analytics, cost tracking, and 3D visualisations to help developers and researchers make informed decisions about which AI models to use for their projects.

Technical Stack

Framework: Next.js 16 (App Router, Turbopack), React 19
Language: TypeScript (strict mode)
3D Graphics: @react-three/fiber, @react-three/drei
UI/Charts: Radix UI, shadcn/ui, Recharts, Monaco Editor
Styling: Tailwind CSS, Framer Motion 12

Key Pages

Playground

Test AI models with text, JSON, or code input

Dashboard

Real-time API analytics with multiple views

Analytics

Advanced insights and predictive analytics

Settings

API key management with import/export

Key Features

Multi-Provider Support

Compare OpenAI, Anthropic, Google Gemini, and Perplexity models

Real-time Analytics

Track API performance, response times, and usage patterns

Cost Analysis

Monitor and compare costs across different AI providers

3D Visualisations

Immersive cyberpunk-themed data visualisations with Three.js

Demo Mode

Test the interface without API keys

Secure Storage

API keys stored securely in browser localStorage with 90-day retention

Supported AI Models

OpenAI

  • •GPT-4o, GPT-4 Turbo
  • •GPT-3.5, o1 models

Anthropic

  • •Claude 3.5 Sonnet
  • •Claude 3 Opus & Haiku

Google

  • •Gemini 2.0 Flash
  • •Gemini 1.5 Pro & Flash

Perplexity

  • •Sonar models

Project Screenshots

Implementation Highlights

Performance & Architecture

  • •Turbopack for blazingly fast development
  • •Bundle splitting for optimal loading performance
  • •Edge-compatible API routes for global performance

Data Management

  • •LocalStorage & IndexedDB for client-side persistence
  • •90-day data retention with automatic cleanup
  • •API key import/export functionality

User Experience

  • •Cyberpunk-themed interface with 3D effects
  • •Monaco Editor for code input
  • •Responsive design for all devices

Analytics & Insights

  • •Real-time API performance tracking
  • •Cost comparison across providers
  • •Predictive analytics for usage patterns