ZexoChat — Frontend

The web client for ZexoChat, a personal multi-model AI chat application. A fast, single-page React interface for chatting with a rotating chain of AI models, with per-user chat history, live web search, and fully customizable theming.

Built with React, Vite, and Zustand. Pairs with the ZexoChat backend.

Features

• Two ways to chat — jump in anonymously (single free model, nothing saved) or log in with an access code for persistent history, model choice, and saved preferences.
• Automatic model fallback, made visible — if the backend has to switch models mid-conversation because of a rate limit, the UI surfaces a toast (Auto-switched: model A → model B) instead of failing silently.
• Live web search toggle — enable per-message search augmentation so replies can cite current information.
• Full appearance customization — dark/light themes, background palettes, and custom accent colors (with automatic contrast-aware text color), all synced to the user's account and restored on every device.
• Conversation history — searchable sidebar of past chats, scoped per user, with create/rename/delete.
• Admin panel (/admin) — a separate authenticated view for managing users: create accounts, regenerate access codes, suspend/reactivate users, and inspect or delete any user's conversations.
• Responsive layout — usable from mobile through desktop.

Tech stack

• React 18 + Vite
• Zustand for state management
• React Router
• Axios for API calls
• Tailwind CSS (utility layer) + custom CSS design tokens
• lucide-react for icons

Project structure

src/
├── main.jsx                 # Entry point
├── App.jsx                  # Routing (chat app vs. /admin)
├── constants.js             # Shared constants (storage keys, anonymous model id)
├── api/
│   └── client.js             # Axios instance with auth token interceptor
├── store/
│   ├── chatStore.js           # Core app state: auth, conversations, chat, appearance
│   └── adminStore.js           # Admin panel state
├── components/
│   ├── ChatWindow.jsx          # Main conversation view
│   ├── MessageBubble.jsx        # Individual message rendering
│   ├── Sidebar.jsx              # Conversation list / navigation
│   ├── ModelPicker.jsx           # Model selection dropdown
│   ├── SearchToggle.jsx          # Web search on/off control
│   ├── AppearancePanel.jsx        # Theme / accent color customization
│   ├── LoginPanel.jsx              # Access-code login form
│   └── AdminPanel.jsx               # Admin user & conversation management
└── styles/                    # Design tokens, layout, and component styles

Getting started

Prerequisites

• Node.js 18+
• The ZexoChat backend running locally or deployed

Installation

git clone <this-repo>
cd zexochat-frontend
npm install

Configuration

Copy .env.example to .env:

cp .env.example .env

Variable	Required	Description
VITE_API_URL	Yes	Base URL of the backend API (e.g. http://localhost:5000 or your deployed backend URL)

Running locally

npm run dev

The app runs on http://localhost:5173 by default.

Other scripts

npm run build     # Production build to dist/
npm run preview   # Preview the production build locally
npm run lint       # Run ESLint

Deployment

This repo includes a vercel.json configured for a Vite SPA (build output in dist/, with a catch-all rewrite to index.html for client-side routing). Set the VITE_API_URL environment variable in your Vercel project settings to point at your deployed backend.

License

This is a personal project. Use it as a reference or starting point for your own build.