AI Chat Application

🔗 GitHub: https://github.com/4xush/wechat-ai

Full-stack AI chat application with JWT authentication, Google OAuth, multi-workspace organization, and real-time SSE streaming for AI responses.

🎯 Features

• 🔐 Authentication - Memory-only tokens + HTTP-only cookies for XSS protection + Google OAuth
• 🏢 Multi-Workspace - Organize chats into separate workspaces
• 💬 Real-Time Chat - Token-by-token streaming AI responses
• 🔍 Web Search - AI agent with Tavily web search tool
• 💾 Persistent Memory - Full conversation history across sessions
• 🎨 Modern UI - Premium dark theme with Framer Motion animations
• 🛡️ Production-Ready - Helmet security, rate limiting, input sanitization, XSS protection
• 🐳 Docker Ready - Docker Compose for easy deployment

Project Structure

welaunch/
├── backend/              # Node.js + Express + TypeScript API
│   ├── src/
│   │   ├── controllers/  # HTTP request handlers
│   │   ├── services/     # Business logic & AI agents
│   │   ├── routes/       # API route definitions
│   │   ├── middleware/   # Auth, validation, rate limiting
│   │   ├── db/models/    # MongoDB schemas
│   │   └── config/       # Environment & API config
│   └── package.json
│
└── frontend/             # Next.js 15 + TypeScript + Tailwind
    ├── app/              # Next.js pages (App Router)
    │   ├── chat/         # Main chat interface
    │   ├── login/        # Authentication pages
    │   └── signup/
    ├── components/       # React components
    │   ├── chat/         # Chat UI components
    │   ├── workspace/    # Workspace selector
    │   ├── layout/       # Sidebar & layout
    │   └── ui/           # shadcn/ui components
    ├── lib/
    │   ├── api/          # API client with auto-refresh
    │   └── stores/       # Zustand state management
    └── types/            # TypeScript interfaces

Backend

Production-grade REST API with:

• Auth: JWT + bcrypt + Google OAuth (Passport.js)
• Database: MongoDB with Mongoose ODM
• AI Integration: OpenRouter + LangChain agents
• Tool Calling: Web search via Tavily API
• Streaming: Server-Sent Events (SSE) for real-time responses
• Security: Helmet headers, rate limiting, CORS, input sanitization (10k char limit), Zod validation, bcrypt hashing
• Architecture: Controllers → Services → Models pattern

See backend/README.md for API documentation.

Frontend

Modern Next.js application with:

• Framework: Next.js 15 with App Router
• Styling: Tailwind CSS with custom premium dark theme
• UI: shadcn/ui components + Framer Motion animations
• State: Zustand for auth, workspace, and chat management
• Streaming: EventSource API for SSE token-by-token display
• Notifications: Sonner toast for real-time feedback (success, errors, rate limits)
• TypeScript: Full type safety throughout
• UX: Smooth animations, mobile-responsive, loading states, error handling

See frontend/README.md for setup guide.

Quick Start

Prerequisites

• Node.js 18+
• MongoDB database

1. Clone Repository

git clone https://github.com/4xush/wechat-ai.git
cd wechat-ai

2. Backend Setup

cd backend
npm install
cp .env.example .env
# Edit .env with your API keys
npm run dev

Backend runs on http://localhost:3000

3. Frontend Setup

cd ../frontend
npm install
npm run dev

Frontend runs on http://localhost:5173

4. Environment Variables

Backend: Copy .env.example to .env and configure. See backend/README.md for full details.

Required keys:

• MONGODB_URI - MongoDB connection string
• OPENROUTER_API_KEY - OpenRouter API key
• WEB_SEARCH_API_KEY - Tavily API key
• ACCESS_TOKEN_SECRET / REFRESH_TOKEN_SECRET - JWT secrets (min 32 chars)

Frontend (.env.local):

NEXT_PUBLIC_API_URL=http://localhost:3000/api
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id  # Optional

Generate secure JWT secrets:

node -e "console.log(require('crypto').randomBytes(64).toString('hex'))"

Tech Stack

Backend

• Runtime: Node.js 18+
• Framework: Express
• Language: TypeScript
• Database: MongoDB + Mongoose
• AI: OpenRouter API, LangChain, Tavily
• Auth: JWT + bcrypt + Passport.js (Google OAuth)
• Validation: Zod
• Security: Helmet, express-rate-limit, CORS, input sanitization

Frontend

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI: shadcn/ui + Lucide icons + Framer Motion
• State: Zustand
• Streaming: EventSource (SSE)
• OAuth: Google Sign-In (@react-oauth/google)

API Endpoints

Authentication

• POST /api/auth/signup - Create account
• POST /api/auth/login - Login
• GET /api/auth/google - Google OAuth login (redirects)
• GET /api/auth/google/callback - Google OAuth callback
• POST /api/auth/refresh - Refresh access token
• POST /api/auth/logout - Logout
• GET /api/auth/config - Get OAuth client IDs

Workspaces

• GET /api/workspaces - List workspaces
• POST /api/workspaces - Create workspace
• GET /api/workspaces/:id/chats - List chats

Chats

• POST /api/workspaces/:wid/chats - Create chat
• POST /api/workspaces/:wid/chats/:cid/messages - Send message (SSE stream)
• GET /api/workspaces/:wid/chats/:cid/messages - Get message history

Architecture Highlights

Backend

• Production-Grade Auth: Access tokens in memory only, refresh tokens in HTTP-only cookies (prevents XSS)
• SSE Streaming: Real-time token-by-token AI responses
• Agent System: LangChain agents with tool calling
• Rate Limiting: Configurable per-endpoint protection
• Graceful Shutdown: Proper cleanup of connections

Frontend

• Secure Auth: Access tokens stored in memory only (XSS-proof)
• Session Persistence: Refresh from HTTP-only cookie on page load
• Auto-Refresh: Automatic token refresh every 12 minutes
• Real-Time UI: Token-by-token message streaming
• Responsive Design: Mobile-friendly interface
• Error Handling: User-friendly error messages

Development

# Backend
cd backend
npm run dev          # Development with hot-reload
npm run build        # TypeScript compilation
npm start            # Production mode

# Frontend
cd frontend
npm run dev          # Development server (port 5173)
npm run build        # Production build
npm start            # Production server
npm run lint         # ESLint check

Deployment

Docker Deploy:

# Clone repository
git clone https://github.com/4xush/wechat-ai.git
cd wechat-ai

# Copy and configure environment
cp .env.example .env
# Edit .env with your MongoDB URI and API keys

# Start all services
docker-compose up -d

# View logs
docker-compose logs -f

# Stop services
docker-compose down

Known Limitations

⚠️ Cross-Origin Cookie (Google OAuth): When deploying frontend and backend on different domains (e.g., Vercel + Render), Google OAuth sessions may not persist across page refresh due to browser third-party cookie restrictions. Email/password login works normally. For full OAuth persistence, deploy both on the same domain or use a custom domain.

Upcoming Features (Delayed)

⚠️ These features are currently delayed and will be implemented in future releases.

• Message Encryption — End-to-end encryption for chat messages
• Redis Caching — Cache chat history for faster retrieval
• Thinking Indicator — Visual indicator when AI is processing
• Web Search Indicator — Show when AI is searching the web for information