A multimodal AI client built with React + Vite + Tailwind on the frontend and Express + MySQL on the backend. It supports chat, image analysis, and file/folder batch analysis. The app includes latency/cost display, prompt templates, conversation export (download), pin-able sessions, resizable sidebar, and a status panel.
- 🧠 Multimodal UI: Chat, Vision, and File Analyzer with a unified model selector.
- 📂 Session persistence & management: create/rename/delete, pin to top, draggable sidebar width; manual titles aren’t overwritten once history exists.
- ⚡ Message helpers: continue/retry/summarize/translate shortcuts for model replies; Enter to send, Shift+Enter for newline.
- 📝 Prompt templates: built-in and custom templates, saved locally for quick insertion.
- 📥 Export: one-click export of the current conversation to a Markdown file (download, not clipboard).
- 🌐 Status visibility: DB/network health and latency, region/IP/ISP card (collapsible).
- 💰 Cost & performance: response latency, token counts, and estimated cost displayed.
src/App.tsx– layout, sidebar, status panel.src/components/ChatInterface.tsx– chat UI, model selector, templates, export, message actions.src/components/VisionInterface.tsx– image upload/analysis.src/components/FileAnalyzer.tsx– file/folder reading and batch analysis.src/components/AboutModal.tsx– about dialog.src/services/apiService.ts– frontend API client.src/services/geminiService.ts– Gemini SDK calls (frontend).server/index.js– Express backend, MySQL init, API routes.server/schema.sql– DB schema reference (sessions, messages).
npm installCreate .env in the project root (see .env.example):
API_KEY=your_gemini_api_key
APP_PORT=3001
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=your_db_user
DB_PASSWORD=your_db_password
DB_NAME=gemini_nexus
Frontend uses VITE_API_KEY to call Gemini; backend can use API_KEY if needed. Ensure MySQL is running and the database exists; tables will auto-init on server start.
Open two terminals:
# Terminal 1: backend
npm run server # http://localhost:3001 by default
# Terminal 2: frontend
npm run dev # http://localhost:5173 by defaultnpm run build
npm run preview- Model selection: supports Gemini family (e.g., 2.0 Flash Lite, 2.5 Flash/Pro, 3 Pro Preview, etc.), selector on the top-right of each page.
- Input & send: Enter sends; Shift+Enter adds a newline. Input is disabled while generating.
- File/Folder analysis: upload text/code files, they’re stitched and sent to Gemini; results scrollable on the right.
- Image analysis: upload JPG/PNG/WebP (<=5MB); optional prompt; report area scrollable.
- Conversation export: “Export” triggers download of a
.mdfile (filename includes session id). - Pin & search: sidebar search filters titles; star to pin sessions to the top.
- Status panel: collapsible, shows DB/network latency, region/IP/ISP info.
GET /api/healthGET/POST/PATCH/DELETE /api/sessionsGET /api/sessions/:id/messagesPOST /api/messages
- DB connection issues: verify DB credentials in
.envand MySQL is running. - API Key errors: ensure
VITE_API_KEYis set and valid. - Port conflicts: change
APP_PORTor frontend dev/proxy ports if needed.
Follows the existing project license (if unspecified, treated as current default).