A production-ready, well-optimized full-stack AI platform built on Next.js and powered by the Google Gemini API. It features full multimodal capabilities, live data visualization with auto-switching charts, interactive code playgrounds with live execution, and a smooth, theme-aware chat workspace.
Check out the live demo of the application here.
- Framework: Next.js 14 (App Router)
- AI Model: Google Gemini API
- Database: MongoDB & Mongoose
- Authentication: NextAuth.js v4, bcrypt, UUID
- Media Storage: Cloudinary
- Email Delivery: Nodemailer
- State Management: Zustand (Global State)
- Styling: CSS Modules & Custom Variables (Dark/Light mode support)
- Text Streaming: Real-time, character-by-character response generation with a native typing cursor.
- Document Analysis: Direct doc (image/pdf) uploads for context-aware queries utilizing Gemini Vision.
- Text-to-Speech: Built-in audio playback for generated model responses.
- Interactive Sandboxes: Live UI component rendering directly inside chat bubbles via Sandpack.
- In-Chat Compilation: Live code execution and output testing for multiple programming languages using JDoodle.
- Recharts Integration: Renders interactive SVG charts directly in the chat.
- Auto-Formatting: Parses JSON output from the model to automatically choose between Line Charts (for trends) and Bar Charts (for categories).
- Native Theming: Uses CSS variables to instantly adapt chart colors to the active light or dark mode without needing a JS theme provider.
- Secure Authentication: Multi-provider login support (Credentials, GitHub, Discord) powered by NextAuth.js.
- Share & Export: Generate shareable conversation links via the Clipboard API or download full threads as
.mdfiles. - Native Dark Mode: Fully optimized light and dark modes with seamless, runtime-free CSS variable swapping.
Here are the specific engineering bottlenecks solved in this codebase:
Managing long-running ReadableStreams in React often leads to memory leaks or orphaned network requests if a user navigates away or wants to stop the generation. AetherBot implements a strict AbortController pattern tied to a comprehensive isGenerating state lock. This allows users to safely sever the active TCP connection mid-generation, instantly freeing up browser memory and gracefully resetting the complex UI state without corrupting the global chat history array.
Standard global state managers (like Zustand) choke when handling high-frequency LLM token streams, forcing the entire chat tree to re-render on every chunk. To solve this, streaming is handled by a custom, vanilla TypeScript StreamingService. It uses a publish-subscribe pattern and a requestAnimationFrame loop to pipe text directly into the active message component, completely bypassing the React lifecycle. It also features a dynamic speed calculator that adjusts the typing rate based on the buffer size, ensuring smooth, organic text rendering.
LLM APIs can be unpredictable due to rate limits or temporary endpoint timeouts. The backend incorporates an executeWithFailover wrapper around the Gemini utility. This architecture automatically intercepts API failures, manages intelligent retry logic, and routes to fallback models if necessary, ensuring the chat experience remains stable and uninterrupted even during API instability.
Follow these steps to get a local instance of AetherBot running on your machine:
- Node.js (v18.x or later)
- Package Manager (
npmoryarn) - MongoDB (Local instance or MongoDB Atlas cluster URI)
- Google Gemini API Key
git clone https://github.com/krazio-01/AetherBot.git
cd AetherBot
npm install
# or
yarn install
Duplicate the .env.copy template to create your local .env file:
cp .env.copy .env
Open the .env file and securely populate all the required keys.
Start the development server:
npm run dev
Open http://localhost:3000 in your browser to start chatting.
Contributions make the open-source community an amazing place to learn, inspire, and create. Any contributions are greatly appreciated.
Krazio — md.krazio@gmail.com