🧠 Multi-Model Up to 20 AI models simultaneously

⚡ Real-time SSE Token-by-token streaming

🔓 100% Free 24 models, zero API key needed

🔐 Encrypted AES-256-GCM key storage

🏠 Live Demo · ⚡ Quick Start · 📡 API Docs · 🤝 Contribute

---

✨ What is MirraSync?

MirraSync is an open-source multi-AI chat platform that lets you fire one prompt at up to 20 AI models simultaneously and watch their answers stream in side-by-side — no API keys required, no cost, no limits. Built for developers, researchers, and curious minds who want to see how different AI models think.

🧠 Multi-Model	⚡ Real-time	🔓 Free
Up to 20 models at once	Token-by-token SSE streaming	24 models, no key needed

---

🎯 Features

🤖 Core AI Experience

• Multi-model parallel chat — Fire 1–20 AI models simultaneously on the same prompt, responses stream independently
• Real-time SSE streaming — Token-by-token streaming into isolated columns, zero latency feel
• 32+ models across 8 providers — 24 free-to-use + 8 Pro models unlockable with your own API key
• Single model mode — Falls back to a clean classic chat UI when one model is active
• Context window control — Tune how much conversation history each model receives

🎙️ Smart Input

• File & image attachments — Drag-drop JPG, PNG, WEBP, GIF, PDF, TXT, MD, CSV, DOCX (max 10MB / 5 files)
• Voice input — Web Speech API with live transcription overlay
• Prompt Cleaner — One click: AI rewrites your prompt for clarity and shows a visual diff
• Markdown rendering — Full GitHub-Flavored Markdown with syntax-highlighted code blocks

🔐 Authentication

• Email + password with 6-digit OTP email verification
• Google OAuth one-click sign-in
• Forgot / reset password via branded email link
• Guest access — unlimited messages with rate limiting, zero sign-up required

💾 User & Conversation Management

• Full chat history stored in MySQL, grouped by date in sidebar
• Rename, pin, archive, and delete conversations
• Bring-your-own API keys — stored AES-256-GCM encrypted at rest
• Unlock Pro models just by adding your own valid provider API key
• User preferences: default models, context size, model order, theme, language

🏠 Homepage

• RAG Chatbot — AI assistant trained on project knowledge (Groq-powered)
• Animated model marquee with provider SVG logos
• Compare Plans pricing table
• Framer Motion animated feature showcase cards
• Scroll-to-top button

🎨 Design System

• Dark mode default, full light mode toggle (homepage always dark)
• 100% custom UI — no shadcn, no Tailwind, pure CSS variables
• Fully responsive — 300px to 4K, mobile-first
• Custom scrollbars, dropdowns, modals, toasts, toggles
• Framer Motion micro-animations throughout

---

🏗️ Tech Stack

Layer	Technology	Purpose
Frontend	React 18 + React Router v6	SPA routing & UI
Styling	CSS Custom Properties	Design token system
Animations	Framer Motion	Page & component transitions
State	Zustand	Lightweight global stores
Backend	Express.js (Node.js)	REST API + SSE server
ORM	Prisma	Type-safe DB access
Database	MySQL	Persistent storage
Auth	JWT + bcryptjs	Session & password security
OAuth	Google Identity Services	Social sign-in
Email	Nodemailer (Gmail SMTP)	OTP & reset emails
File Storage	Cloudinary	Image & document hosting
AI Streaming	Server-Sent Events (SSE)	Real-time token delivery
Encryption	Node.js crypto AES-256-GCM	API key at-rest encryption
Markdown	react-markdown + remark-gfm	Rich response rendering
Highlighting	react-syntax-highlighter	Code block theming

---

🤖 Supported AI Models

All 24 free models work out of the box — no API key required. Add your own key to unlock Pro tier.

🐙 GitHub Models

Model	ID	👁️ Vision	🧠 Reasoning
GPT-5	openai/gpt-5	✅	✅
Grok 3	xai/grok-3	❌	✅
DeepSeek R1 0528	deepseek/deepseek-r1-0528	❌	✅

🔵 Google AI Studio

Model	ID	👁️ Vision	🧠 Reasoning
Gemini 2.5 Flash	gemini-2.5-flash	✅	✅
Gemini 3 Flash	gemini-3-flash	✅	❌
Gemini 3.1 Flash Lite	gemini-3.1-flash-lite	✅	❌

⚡ Groq

Model	ID	👁️ Vision	🧠 Reasoning
Kimi K2 Instruct	moonshotai/kimi-k2-instruct	❌	✅
Llama 4 Scout	meta-llama/llama-4-scout-17b-16e-instruct	✅	❌
Qwen3-32B	qwen/qwen3-32b	❌	✅

🧠 Cerebras · Cohere · Mistral · OpenRouter · Cloudflare Workers AI

Cerebras

Model	ID	Note
GPT-OSS 120B	gpt-oss-120b	Fastest inference anywhere
Llama 3.1 8B	llama3.1-8b	Near-instant responses

Cohere

Model	ID	Note
Command A Reasoning	command-a-reasoning-08-2025	Exclusive reasoning model
Command A Vision	command-a-vision-07-2025	Exclusive vision model
Aya Expanse 32B	c4ai-aya-expanse-32b	23+ languages

Mistral

Model	ID	👁️
Mistral Small 3.1	mistral-small-2503	✅
Mistral Large	mistral-large-latest	✅
Codestral	codestral-latest	❌

OpenRouter

Model	ID	Note
Hermes 3 Llama 405B	nousresearch/hermes-3-llama-3.1-405b	Largest open-source LLM
Step 3.5 Flash	stepfun/step-3.5-flash	Exclusive provider
Qwen3 Coder	qwen/qwen3-coder	Coding specialist

Cloudflare Workers AI

Model	ID	Note
IBM Granite 3 8B	@ibm/granite-3-8b-instruct	Enterprise-grade IBM
Qwen QwQ 32B	@cf/qwen/qwq-32b	Reasoning specialist
GLM 4.7 Flash	@cf/zhipuai/glm-4-32b-0520	Chinese frontier AI

---

💎 Subscription Tiers

Feature	👤 Guest	🆓 Free	⭐ Pro (Soon)
Messages	Unlimited (10/min)	Unlimited (20/min)	Unlimited (highest)
Available models	10	24	32+
Active models at once	3	10	20
Chat history	❌	✅	✅
File uploads	❌	✅	✅
Custom API keys	❌	✅	✅
Pro model unlock (own key)	❌	✅	Included

---

🚀 Quick Start

Prerequisites

• Node.js 18+
• MySQL 8+ (local or cloud)
• npm / yarn

1 — Clone & Install

git clone https://github.com/Misrilal-Sah/MirraSync.git
cd MirraSync

# Backend
cd backend && npm install

# Frontend
cd ../frontend && npm install

2 — Configure Environment

# Backend
cd backend
cp .env.example .env

# Frontend
cd ../frontend
cp .env.example .env

📋 Full backend .env reference

# ─── App ───────────────────────────────────────────────────────
NODE_ENV=development
PORT=5000
FRONTEND_URL=http://localhost:3000

# ─── JWT ───────────────────────────────────────────────────────
JWT_SECRET=your_random_32_char_secret_here
JWT_EXPIRES_IN=7d

# ─── Encryption ────────────────────────────────────────────────
# Generate: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
ENCRYPTION_KEY=your_64_char_hex_key_here

# ─── Database ──────────────────────────────────────────────────
DATABASE_URL=mysql://root:password@localhost:3306/mirrasync

# ─── Google OAuth ──────────────────────────────────────────────
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

# ─── Email (Gmail) ─────────────────────────────────────────────
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_EMAIL=yourapp@gmail.com
SMTP_PASSWORD=your_gmail_app_password
SMTP_FROM_NAME=MirraSync

# ─── Cloudinary ────────────────────────────────────────────────
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# ─── AI Providers ──────────────────────────────────────────────
GITHUB_MODELS_API_KEY=github_pat_xxxxxxxxxxxx
GITHUB_MODELS_BASE_URL=https://models.github.ai/inference

GOOGLE_AI_API_KEY=AIzaSy_xxxxxxxxxxxx
GOOGLE_AI_BASE_URL=https://generativelanguage.googleapis.com/v1beta

GROQ_API_KEY=gsk_xxxxxxxxxxxx
GROQ_BASE_URL=https://api.groq.com/openai/v1

CEREBRAS_API_KEY=csk-xxxxxxxxxxxx
CEREBRAS_BASE_URL=https://api.cerebras.ai/v1

COHERE_API_KEY=your_cohere_key
COHERE_BASE_URL=https://api.cohere.com/v2

MISTRAL_API_KEY=your_mistral_key
MISTRAL_BASE_URL=https://api.mistral.ai/v1

OPENROUTER_API_KEY=sk-or-v1-xxxxxxxxxxxx
OPENROUTER_BASE_URL=https://openrouter.ai/api/v1

CLOUDFLARE_API_KEY=your_cloudflare_api_key
CLOUDFLARE_ACCOUNT_ID=your_account_id
CLOUDFLARE_BASE_URL=https://api.cloudflare.com/client/v4/accounts

📋 Frontend .env reference

REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_GOOGLE_CLIENT_ID=your_google_client_id_here

3 — Set Up Database

cd backend

# Create all tables from Prisma schema
npx prisma db push

# (Optional) Open the visual DB browser
npx prisma studio

4 — Run

# Terminal 1 — Backend (http://localhost:5000)
cd backend && npm run dev

# Terminal 2 — Frontend (http://localhost:3000)
cd frontend && npm start

Open http://localhost:3000 — you're live. 🎉

---

🗄️ Database Schema

Table	Description
User	Account info, theme, language preferences
OtpToken	Email verification & password-reset tokens
ApiKey	AES-256-GCM encrypted user-provided keys
Conversation	Chat threads with associated model list
Message	User turns + per-model AI responses
UserPreferences	Default models, context size, column order

npx prisma db push            # Apply schema (dev)
npx prisma generate           # Regenerate client after changes
npx prisma studio             # Visual DB browser
npx prisma migrate dev        # Create versioned migration
npx prisma migrate reset      # ⚠️ Wipe & reseed (destructive)

---

📡 API Documentation

Base URL: /api — all endpoints prefixed.

🔑 Authentication

Method	Endpoint	Description	Auth
POST	/auth/signup	Register with email + password	—
POST	/auth/login	Login → JWT	—
POST	/auth/verify-email	Verify 6-digit OTP	—
POST	/auth/resend-otp	Re-send OTP email	—
POST	/auth/forgot-password	Send reset link	—
POST	/auth/reset-password	Set new password	—
GET	/auth/verify-reset-token/:token	Validate reset token	—
POST	/auth/google	Google ID token → JWT	—

👤 User & Preferences

Method	Endpoint	Description
GET	/user/me	Get profile
PATCH	/user/me	Update name / theme / language
PATCH	/user/me/avatar	Update avatar URL
PATCH	/user/me/password	Change password
DELETE	/user/me	Delete account
GET	/user/me/preferences	Get AI preferences
PUT	/user/me/preferences	Save AI preferences

💬 Chat & Conversations

Method	Endpoint	Description
POST	/chat/stream	SSE — stream AI response
POST	/chat/save-user-message	Persist user message
GET	/conversations	List all conversations
POST	/conversations	Create conversation
GET	/conversations/:id	Fetch conversation + messages
PATCH	/conversations/:id	Rename / pin / update models
DELETE	/conversations/:id	Delete conversation
DELETE	/conversations	Bulk delete { ids: [] }

🔧 API Keys & Utilities

Method	Endpoint	Description
GET	/api-keys	List provider keys (masked)
PUT	/api-keys/:provider	Save / update key
POST	/api-keys/:provider/test	Validate key live
DELETE	/api-keys/:provider	Remove key
POST	/upload	Upload file → Cloudinary
POST	/prompt-cleaner	AI prompt rewrite
POST	/chatbot	RAG chatbot query
GET	/messages/registry/all	Full model registry
GET	/health	Server health check

📡 SSE Stream Event Format

event: start
data: {"modelId":"github-gpt-5","model":"GPT-5"}

event: token
data: {"token":"Hello","modelId":"github-gpt-5"}

event: done
data: {"modelId":"github-gpt-5","responseTimeMs":1234,"totalLength":450}

event: error
data: {"modelId":"github-gpt-5","code":"RATE_LIMIT","message":"Rate limit reached..."}

---

🔐 Authentication Guide

Email + Password Flow

1. Register with name, email, password
2. A 6-digit OTP is emailed (expires in 10 min)
3. Enter OTP on the verify-email page
4. JWT issued — valid for 7 days

Passwords hashed with bcrypt (12 salt rounds).

Google OAuth Setup

1. Go to console.cloud.google.com → New project
2. Enable Google Identity API
3. Create OAuth 2.0 Web Application credentials
4. Add origin: http://localhost:3000
5. Add redirect URI: http://localhost:3000
6. Copy Client ID → GOOGLE_CLIENT_ID in both .env files

Gmail SMTP App Password

1. Google Account → Security → 2-Step Verification → On
2. Search "App Passwords" → Generate for "Mail"
3. Use the 16-char password as SMTP_PASSWORD
4. Use your Gmail address as SMTP_EMAIL

---

📁 Project Structure

mirrasync/
├── backend/
│   ├── prisma/
│   │   └── schema.prisma           # DB schema
│   └── src/
│       ├── server.js               # Express entry point
│       ├── routes/                 # auth · user · chat · conversations · apiKeys · upload
│       ├── providers/
│       │   └── adapters.js         # 8-provider AI adapter layer
│       ├── models/
│       │   └── registry.js         # 32+ model definitions
│       ├── middleware/
│       │   └── auth.js             # JWT guard
│       ├── services/
│       │   └── email.js            # Nodemailer templates
│       ├── knowledge/
│       │   └── project_knowledge.txt  # RAG source document
│       └── utils/
│           ├── prisma.js · jwt.js · encryption.js
│
└── frontend/
    └── src/
        ├── App.js + index.js
        ├── pages/                  # ChatPage · AuthPages · LandingPage · LogsPage
        ├── components/
        │   ├── chat/               # ModelColumn · PromptInput · AddModelModal
        │   ├── layout/             # Sidebar
        │   ├── settings/           # SettingsModal
        │   ├── ui/                 # Shared UI primitives
        │   └── ChatbotWidget.js
        ├── stores/                 # authStore · chatStore · uiStore (Zustand)
        ├── lib/                    # api.js · modelRegistry.js
        └── styles/
            └── globals.css         # Full design token system

---

🤝 Contributing

Contributions are welcome! Here's how to get started:

1. Fork this repository
2. Create a feature branch: git checkout -b feat/amazing-feature
3. Commit your changes: git commit -m 'feat: add amazing feature'
4. Push to the branch: git push origin feat/amazing-feature
5. Open a Pull Request

Please keep PRs focused — one feature or fix per PR.

---

📄 License

Distributed under the MIT License — free to use, modify, and distribute.

---

◈ ──────────────────────────────────────────────────────────────── ◈

MirraSync — Sync Every Mind. One Prompt.

_{Made with 💜 by Misrilal Sah}