AI API Providers Showcase - 30+ Providers, Benchmarks, and Interactive Tools.
A comprehensive, production-ready Next.js 15 application showcasing 30 AI API providers with advanced features including interactive charts, pricing calculator, benchmarks dashboard, and API playground.
- ✨ Features
- 🛠️ Technologies Used
- 🚀 Getting Started
- 🌐 Deployment
- 🧪 Testing
- 📂 Project Structure
- 🤖 Providers Included
- 📊 Data Structure
- Modern Design: Dark-mode compatible UI built with Tailwind CSS with gradient accents
- Responsive Layout: Works seamlessly on desktop, tablet, and mobile devices
- Search & Filter: Real-time search with category filtering and advanced sidebar filters
- Category System: Visual categorization (Cloud Giant, Specialized, Local/Open-Source, Router/Gateway, Emerging/Niche)
- Featured Providers: Highlighted section for popular providers with hover animations
- Quick Compare: Select up to 3 providers for instant comparison on home page
- Compare Tool: Side-by-side comparison of up to 4 providers with detailed metrics
- Pricing Calculator: Interactive cost estimator with sliders, presets, and real-time calculations
- Benchmarks Dashboard: Performance metrics with interactive Recharts visualizations (bar, radar, scatter)
- API Playground: Mocked API testing interface with multiple modes (chat, code, summarize)
- Market Overview: Interactive dashboard with market insights, trends, and recommendations
- Providers Page: Advanced filtering by category, features, and sorting options
- Pie Charts: Provider category distribution
- Line Charts: Price trend analysis
- Bar Charts: Response latency comparisons
- Radar Charts: Multi-dimensional capability analysis
- Scatter Plots: Price vs performance analysis
- Progress Bars: Individual metric visualizations
- Zustand Stores: Efficient client-side state management
- Theme Store: Dark/light mode with localStorage persistence
- Compare Store: Provider selection management
- Calculator Store: Pricing calculator state
- Dynamic Routes: Individual detail pages for each provider
- Similar Providers: Recommendations based on category
- Code Examples: Sample API calls in Python
- Comprehensive Info: Use cases, pricing, models, setup steps, and more
- SEO Optimized: Metadata and semantic HTML for better search engine visibility
- Static Generation: Fast page loads with Next.js App Router
- Next.js 15: React framework with App Router
- TypeScript: Type-safe development
- Tailwind CSS: Utility-first CSS framework
- Zustand: Lightweight state management
- Recharts: Beautiful, composable charts
- Lucide React: Modern icon library
- Framer Motion: Smooth animations (ready to integrate)
- Fuse.js: Fuzzy search (ready to integrate)
- Node.js 18+ installed
- npm, yarn, or pnpm package manager
- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser
npm run build
npm start# Install Vercel CLI
npm i -g vercel
# Deploy
vercel --prodOr use the deployment script:
./deploy.sh- Push to GitHub:
git remote add origin https://github.com/YOUR_USERNAME/ai-api-providers.git
git push -u origin main- Import on Vercel
See DEPLOYMENT.md for detailed instructions.
Run the test checklist:
npm run build # Verify build succeedsSee TESTING.md for comprehensive testing guide.
View Detailed Directory Map
├── app/
│ ├── [slug]/ # Dynamic provider detail pages
│ ├── about/ # About page
│ ├── benchmarks/ # Performance benchmarks page
│ ├── calculator/ # Pricing calculator page
│ ├── compare/ # Compare providers page
│ ├── contact/ # Contact page
│ ├── market-overview/ # Market insights dashboard
│ ├── playground/ # API playground (mocked)
│ ├── providers/ # All providers with filters
│ ├── sources/ # References and citations
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout with navigation
│ └── page.tsx # Home page with search
├── data/
│ └── providers.ts # Provider data (28 providers)
├── lib/
│ └── stores.ts # Zustand state management stores
├── package.json
├── tailwind.config.ts
└── tsconfig.json
The application includes detailed information for 30 AI API providers:
- Anthropic (Claude)
- AWS Bedrock
- Chutes AI
- Claude Code
- DeepSeek
- Fireworks AI
- Synthetic
- GCP Vertex AI
- Glama
- Google Gemini
- Groq
- Human Relay Provider
- LM Studio
- MegaLLM (12 models)
- MiniMax
- Mistral AI
- Ollama
- OpenAI
- OpenAI Compatible
- OpenRouter
- OVHcloud AI Endpoints
- Requesty
- Unbound
- v0
- Vercel AI Gateway
- Agentrouter
- Virtual Quota Fallback
- VS Code Language Model API
- xAI (Grok)
- NEW: Cohere, Together AI, Replicate, Hugging Face, Perplexity AI, AI21 Labs
Each provider includes:
- Name and description
- Use cases
- Documentation links
- Pricing (free and paid tiers)
- Available models
- API key requirements
- Base URL
- Setup instructions
- Additional details
To add or modify providers, edit /data/providers.ts. The data structure is:
{
name: string;
slug: string;
description: string;
useCases: string[];
docsUrl: string;
pricing: { free: string; paid: string };
models: { free: string[]; paid: string[] };
apiKeyName: string;
baseUrl: string;
setupSteps: string[];
other: string;
}Last Security Audit: February 20, 2026 Status: ✅ Fully Secured
| Issue | Status | Details |
|---|---|---|
| Next.js Vulnerabilities | ✅ Fixed | Upgraded from 15.0.7 to 15.1.8+ |
| API Key Exposure | ✅ Fixed | Server-side storage implemented |
| Client-to-API Calls | ✅ Fixed | Server proxy added |
| Missing Security Headers | ✅ Fixed | CSP + headers configured |
| Input Validation | ✅ Fixed | Zod schemas on all routes |
- ✅ Server-side rendering (SSR)
- ✅ Static generation for better performance
- ✅ TypeScript strict mode
- ✅ Environment variable validation
- ✅ Error boundaries for graceful failures
- ✅ Security headers (CSP, X-Frame-Options)
- ✅ No client-side API keys
- ✅ Proper error handling (no info leakage)
This project is open source and available for educational purposes.
Pricing and features are subject to change. Always verify current information on official provider websites before making decisions.
AI-VIBE-CHAT-V4 - The Ultimate AI Provider Hub
This repository provides a streamlined approach to modern development needs, enabling developers to build robust applications with minimal complexity and maximum efficiency.
# Clone the repository
git clone https://github.com/mk-knight23/AI-VIBE-CHAT-V4
cd AI-VIBE-CHAT-V4
# Install dependencies
npm install
# Start development server
npm run dev