A multi-model AI chat app with a glassmorphic UI. Supports Google Gemini and 45+ OpenRouter models in one interface, with persistent conversation history and OAuth authentication.
- Chat with Google Gemini and 45+ OpenRouter models from a single interface
- Real-time streaming responses with typing indicators
- Persistent conversation history via Supabase
- OAuth authentication (Google and GitHub)
- Code preview artifacts — interactive preview of generated HTML/CSS/JS
- WebGL fluid cursor animation
- Export conversations to Supabase Storage
Frontend:
- Next.js 14 (App Router), TypeScript
- Tailwind CSS
- Supabase Auth and Database
- Lucide React
Backend:
- FastAPI (Python 3.11+)
- Google Gemini API
- OpenRouter API
- Server-Sent Events (SSE streaming)
- Node.js 18+
- Python 3.11+
- Supabase project
- Google AI Studio API key (aistudio.google.com)
- OpenRouter API key (optional)
1. Clone and install
git clone https://github.com/4shil/TeaAi.git
cd TeaAi
npm install
cd backend && pip install -r requirements.txt && cd ..2. Configure Supabase
Create a project at supabase.com and run the migrations from the Supabase dashboard SQL editor (see SETUP_GUIDE.md).
3. Set environment variables
Frontend (.env.local):
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
NEXT_PUBLIC_API_URL=http://localhost:8000
Backend (backend/.env):
SUPABASE_URL=
SUPABASE_ANON_KEY=
SUPABASE_JWT_SECRET=
GOOGLE_API_KEY=
OPENROUTER_API_KEY=
4. Run
# Backend
cd backend
uvicorn main:app --reload --port 8000
# Frontend (separate terminal)
npm run devOpen http://localhost:3000.
TeaAi/
├── app/
│ ├── auth/ # OAuth callback handling
│ ├── chat/ # Main chat page
│ └── layout.tsx
├── components/
│ ├── ChatContainer.tsx
│ ├── MessageBubble.tsx
│ ├── MessageInput.tsx
│ ├── ModelSelector.tsx
│ ├── ProviderSelector.tsx
│ ├── CodePreview.tsx # Artifact rendering
│ ├── Sidebar.tsx
│ └── SplashCursor.tsx # WebGL fluid cursor
├── lib/ # Supabase client, utilities
└── backend/
├── main.py # FastAPI entrypoint, SSE streaming
└── requirements.txt
MIT