Interactive analytics platform for comparing AI models across multiple providers with real-time performance metrics, cost analysis, and 3D visualisations.
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.
git clone https://github.com/ThomasJButler/modelviz.git
cd modelviz
npm install
npm run devOpen http://localhost:3000.
API keys are configured in the Settings page (stored securely in browser localStorage):
| Provider | Key Format | Models |
|---|---|---|
| OpenAI | sk-... |
GPT-4o, GPT-4 Turbo, GPT-3.5, o1 |
| Anthropic | sk-ant-... |
Claude 3.5 Sonnet, Claude 3 Opus/Haiku |
AIza... |
Gemini 2.0 Flash, Gemini 1.5 Pro/Flash | |
| Perplexity | pplx-... |
Sonar models |
Demo mode available without API keys for testing the interface.
| Category | Technologies |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack), React 19 |
| Language | TypeScript (strict mode) |
| Styling | Tailwind CSS, Framer Motion 12 |
| 3D Graphics | @react-three/fiber, @react-three/drei |
| Charts | Recharts |
| UI | Radix UI, shadcn/ui |
| Editor | Monaco Editor |
| Storage | LocalStorage, IndexedDB (90-day retention) |
| Page | Description |
|---|---|
| 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 |
ModelViz/
├── app/ # Next.js app router pages
│ ├── playground/ # AI playground with 3D visualisations
│ ├── dashboard/ # Real-time API analytics
│ ├── analytics/ # Advanced insights
│ └── settings/ # API configuration
├── components/ # React components
│ ├── 3d/ # 3D visualisation components
│ ├── effects/ # Cyberpunk visual effects
│ └── ui/ # UI primitives
├── lib/ # Core business logic
│ ├── api/ # API clients (OpenAI, Anthropic, Google, Perplexity)
│ ├── services/ # MetricsService, ComparisonService
│ └── utils/ # Cost calculator, utilities
└── __tests__/ # Test files
# Run development server
npm run dev
# Run tests
npm test
# Build for production
npm run build
# Type check
npm run lintOptimised for Vercel deployment. Includes:
- Turbopack for fast development
- Bundle splitting for optimal loading
- Edge-compatible API routes
MIT - see LICENSE
Thomas Butler thomasjbutler.me | GitHub