Sage AI is a minimalist, premium full-stack AI-powered chat and document intelligence workspace. Inspired by the visual elegance of Notion combined with the conversational power of ChatGPT, Sage AI features generous white space, rounded corners, subtle glassmorphism, responsive sidebar navigation, folders, and extensive chat and account management options.
It is built as a single-page application (SPA) frontend powered by a robust Express backend. To make running and testing the app seamless, the database layer operates in a dual mode—connecting to MongoDB via Mongoose if configured, or transparently falling back to a local JSON database (server/data/db.json) if MongoDB is unavailable.
Authentic login card showcasing glassmorphism, golden borders, and hover reflections.
Notion-style workspace slate displaying keyboard shortcuts, document upload badges, and live user statistics.
Premium chat rendering with markdown support, code block copy actions, and custom syntax highlighting.
Configure user display names, Dark/Light theme values, and font scale factors dynamically.
- Register & Login: Fast session authentication utilizing cryptographically secure passwords hashed with
bcryptjs. - JWT Protection: Secure API endpoints locked by JSON Web Tokens (JWT) passed in client authorization headers.
- Forgot Password: Password recovery simulation ready for email-relay setups.
- Multiple Conversations: Keep separate logs for different context streams.
- Auto-Save: Messages are saved instantly to the database.
- Pin / Favorite: Keep critical chats at the top of your sidebar (Pinned) or star them for quick indexing.
- Folders: Drag or classify conversations into folders to keep the workspace organized.
- Conversation Search: Live client-side fuzzy searching matches titles instantly.
- SSE Chunk Streaming: Responses type out in real-time using Server-Sent Events (SSE).
- Stop Generation: Interrupt active streams immediately.
- Regenerate & Continue: Restart a response or ask Sage to continue writing.
- Multi-API Support: Out-of-the-box support for both Google Gemini API (via HTTP endpoints) and OpenAI API.
- Mock Fallback: Auto-detects if API keys are missing and switches to an interactive local mock generator, rendering clean advice, markdown tables, and copyable code blocks.
- Markdown & Highlighting: Renders markdown blocks, bold/italics, bulleted lists, and tables. Injects language badges and copy-to-clipboard actions on code blocks.
- Individual Message Actions: Star important messages, edit historical prompts (re-submitting triggers updates), copy individual contents, or delete messages.
- File Uploads: Drag/attach files (PDF, TXT, images) up to 10MB using
multer. - Text Parser: The backend extracts raw text contents from uploaded PDF documents (using
pdf-parse) and text documents, feeding them into the AI prompt context.
- Theme Picker: Fluid transition between Dark Mode (default slate-navy) and Light Mode (soft grey-white).
- Font Size Adjuster: Interactive slider toggles small, medium, and large text scales.
- Display Name: Modify your display name instantly.
- Detailed Statistics: Open the Statistics panel to view total chats, total messages, estimated word counts, active folder divisions, pinned statuses, and starred messages.
- Markdown (.md): Downloads formatted markdown files.
- Text (.txt): Downloads neat logs.
- PDF Print-View: Clean print layouts hide sidebars and inputs, offering direct browser print-to-PDF formatting.
- HTML5 & CSS3: Core semantic structure styled with CSS variables and glassmorphism.
- JavaScript (Vanilla): Structured client modules managing routing and connection state.
- Marked.js: Fast markdown translation in browser.
- Highlight.js: Syntactical highlighting for code segments.
- Lucide Icons: Crisp vector icons.
- Node.js & Express.js: Asynchronous server routing and SSE channels.
- Multer: Multi-part form parser for file streams.
- JWT & BcryptJS: Encryption and token security.
- PDF-Parse: PDF character reader.
- Mongoose & MongoDB: Production database mapping.
- JSON File DB (Fallback): Local file engine (
server/data/db.json) replicating Mongoose query methods.
-
Clone and Install Dependencies:
npm install
-
Configure Environment Variables: Copy
.env.exampleto.envand adjust the variables:# Create a copy copy .env.example .envOpen
.envand fill in:PORT: (Default:5000)JWT_SECRET: (Set to a secure secret string)MONGODB_URI: (Optional. Leave empty to run the JSON file database fallback)GEMINI_API_KEYorOPENAI_API_KEY: (Optional. Provide a key to call live AI; leave empty for Mock Stream Mode)
-
Start the Application:
- Production Start:
npm start
- Development Start (with watch-mode):
npm run dev
- Production Start:
-
Access the App: Open http://localhost:5000 in your web browser.
+-----------------------+
| Client SPA |
| (HTML / CSS / JS) |
+-----------+-----------+
|
JSON HTTP/SSE Requests
|
v
+-----------+-----------+
| Express Web Server |
+-----------+-----------+
|
+------------------------+------------------------+
| |
v v
+-----------+-----------+ +-----------+-----------+
| AI Service | | Database Router |
| (Gemini/OpenAI/Mock) | | (config/db / Proxy) |
+-----------------------+ +-----------+-----------+
|
+------------------------+------------------------+
| |
v v
+-----------+-----------+ +-----------+-----------+
| Mongoose DB Adapter | | JSON File Adapter |
| (Remote/Atlas/Local)| | (server/data/db.json)|
+-----------------------+ +-----------------------+
- WebSockets Collaboration: Multi-user sharing on folder structures.
- Vector Embeddings (RAG): Index PDF uploads using database vector embeddings (like MongoDB Atlas Vector Search) for semantic indexing on large documents.
- Custom AI System Prompts: Create adjustable persona profiles inside User Settings.
- Interactive Graphs: Integrate chart.js to visually graph message frequencies and workspace statistics.