Inspiration

This wasn't exactly my first thought for a project, but after a few trials and errors, I reflected on my first SaaS project from a year ago. It was a one-stop shop for almost all types of AI content generation. It gained some attention at first, but due to its "jack of all trades" nature, it was a master of none. Then I decided to focus on one key feature: bringing all AI responses into one chat interface with a single prompt, allowing them to compete for the user's preferred response. Users would no longer need to switch between AI providers to find the one that suits their needs. With this app, a single prompt can elicit responses from one or hundreds of AIs, and users can choose which response works best for them.

What it does

ModelMix is a cutting-edge web application designed to empower users with the ability to mix and compare AI responses from a vast array of models, including OpenAI, Claude, Gemini, DeepSeek, and hundreds more via OpenRouter. This platform ensures you get the best insights by blending diverse AI perspectives into one arena.

Key Features:

Dynamic AI Comparison Arena: Users can select any combination of available AI models in the settings to participate in a real-time chat arena. After submitting a prompt or question, all selected models generate their responses concurrently, allowing for direct side-by-side comparison. Intelligent Response Selection: Users can choose the "best" response from the generated outputs, which then seamlessly integrates into the continuing conversation, ensuring a coherent and personalized chat flow. Comprehensive Analytics Dashboard: Gain valuable insights into AI model performance. The analytics section tracks which models are most frequently selected by users, providing a data-driven ranking based on user preference and effectiveness. It also monitors total conversations, top performers, and error rates. Secure User Authentication: Robust email/password authentication powered by Supabase ensures secure access to personalized settings and conversation history. Persistent Conversation History: All chat sessions are securely saved and easily searchable, allowing users to revisit past discussions and pick up where they left off across devices. Advanced AI Features: AI Debate Club: Witness AI models engage in structured, parliamentary-style debates on various topics, offering unique perspectives and dynamic interactions. AI Video Call: Engage in real-time video conversations with AI assistants, powered by Tavus technology, for interactive learning or discussion (Pro feature). Deep Research: Orchestrate AI models to generate comprehensive, long-form documents, research papers, or creative content with advanced planning, writing, and review capabilities. AI-Powered Image Generation: Leverage various image generation models (e.g., DALL-E 3, SDXL Turbo) to create stunning visuals directly from text prompts. Real-time Internet Search: Integrate live web search results into AI conversations, ensuring responses are up-to-date and contextually relevant.

*Flexible API Key Management: * Users can configure their personal API keys for various providers, or utilize global keys provided for free trial access to select models. Tiered Subscription System: Offers a "Free" tier with limited conversations and model comparisons, and a "Pro" tier that unlocks unlimited usage and premium features, managed via PayPal integration. Admin Dashboard: Superadmins have access to a powerful dashboard for user management, global API key configuration, system analytics, and activity logging.

How we built it

ModelMix is engineered for performance, scalability, and a rich user experience, utilizing a modern and robust technology stack:

Frontend: Developed with React 18 and TypeScript, ensuring a highly interactive and type-safe user interface. Styling: Leverages Tailwind CSS for rapid and consistent UI development, providing a clean, modern aesthetic inspired by leading platforms. Backend & Database: Powered by Supabase, providing a PostgreSQL database for data storage, secure user authentication (Supabase Auth), and Row Level Security (RLS) for data protection. AI Integrations: Seamlessly connects with a diverse range of AI providers: OpenAI: For advanced language models (GPT-4o) and DALL-E for image generation. Google Gemini: Utilizing Gemini Pro models for powerful conversational AI. DeepSeek: Integrating DeepSeek Chat for efficient and capable reasoning. OpenRouter: Providing access to a vast marketplace of over 400+ AI models for unparalleled comparison capabilities. Serper: For real-time internet search functionality. Imagerouter: For orchestrating various AI image generation models. Tavus: Enabling AI video call functionality. Payments: Integrates the PayPal SDK for secure processing of Pro plan subscriptions. Icons: Utilizes Lucide React for a consistent and visually appealing icon set throughout the application. Build Tool: Vite ensures a fast and optimized development and build process. Document Export: Employs jspdf for PDF export.

Challenges we ran into

Mobile Optimization: I had a lot of issues with mobile especially with the content overflow since we are dealing with concurrent content generation with multiple AI models. Making updates: Each change I make affected the current-working features making me revert back to previous versions and back-ups. Since there are a lot of features, testing them one at a time was time and resource consuming. PWA feature: It was after numerous fixes that I was able to make it work like an app for mobile devices.

Accomplishments that we're proud of

1. Learning about OpenRouter. This is an amazing platform. So blessed to learn about how it works and what I can do with it. 2. Learning bolt. The community was helpful. I learn how to better navigate it and improve my prompt engineering skills. I bet this skill will become more useful in the future with AI. 3. Learned to use many tools that sponsored this hackathon. Thank you for your generosity and opportunity to learn your features and applications.

What we learned

Vibe Coding is a skill that needs constant learning and practice. Understand how AI operates is a key to mastering it. Vibing may sound easy to the ears but it is actually a constant battle to express properly in a way that AI can understand.

What's next for ModelMix

If I receive funding, I will improve this saas app to be used commercially. I also intend to make a unified API for multimodal text, image, and video generation similar to OpenRouter and ImageRouter for developers to make use of in their own projects. Add stripe and other payment integrations. Add models for music generation. Add arena for AI orchestration to mix-and-match models to flexible use-cases such as design, full-stack, and artifacts generation.

This app will continue to expand as AI expand itself. I also want to contribute with the AI competition by adding a new arena of comparison

Built With

Share this project:

Updates