🤖 Sere AI — Unified Academic & Architectural AI Workspace

Live Application: sere-ai.vercel.app

Sere AI is an ultra-lean, high-performance academic and architectural workspace assistant engineered specifically for engineering students, researchers, and developers. Powered by a cyclic LangGraph state-machine engine and Google's Gemini models (gemini-3.1-flash-lite), Sere AI deconstructs complex university syllabi, generates step-by-step assignment solutions with LaTeX math, produces interactive diagrams, drafts ATS-optimized resumes, and visualizes system architectures in real time.

---

🌟 Core Philosophies & Highlights

• ⚡ Zero-Fluff Policy: Bypasses conversational filler phrases ("Certainly!", "Here is what you requested..."). Responses begin immediately with structured, high-density academic content.
• 🧩 High-Fidelity Inline Visuals: Native interactive support for Excalidraw whiteboards (roughness: 0 for clean engineering lines), Mermaid flowcharts and sequence diagrams, Vega-Lite statistical graphs, and KaTeX mathematical formulas.
• 🧠 Two-Tier Cognitive Memory: Automatically compresses chat histories in the background to build an evolving user profile and personal identity store without inflating the active prompt token window.
• 💰 Token & Credit Economy: Integrated Razorpay INR micro-recharge system (₹20→100, ₹35→200, ₹50→300, ₹60→400) with weekly free-tier credit resets and atomic transaction locks.
• 🛡️ High-Availability API Pool: Round-robin load-balancing across 23 Gemini API keys with proactive health-checking and support for custom user API keys.
• 🖨️ React-Tree Print Engine: Unique DOM-mounted print registry ensuring zero-flicker, 100% styled PDF exports for transcripts, 16:9 widescreen presentation slides, and ATS resumes.
• 📱 Progressive Web App (PWA): Fully installable standalone PWA with standalone display, push-ready architecture, and mobile-optimized touch gestures.

---

🏛️ System Architecture

Sere AI rejects rigid prompt-chaining in favor of a cyclical LangGraph StateGraph with dynamic tool routing, self-healing subagents, and automated verification loops.

The LangGraph Cyclic Loop

The primary orchestrator runs a StateGraph containing an agent node and a tool execution loop:

[START] ──> [agentNode (Gemini LLM)] ──> Tool Call Required? 
                   ▲                              │
                   │                              ▼
                   └── [toolsNode (allTools)] <── Yes
                                  │
                             No (Final Answer)
                                  │
                                  ▼
                               [END]

1. State Annotation: Maintains message history and tracks tool usage across iterations via custom LangChain reducers.
2. Planner → Generator → Verifier Subagents: Complex generation tasks (presentations, diagrams, quizzes, syllabi) branch into isolated subgraphs with independent verification before returning to the main graph.
3. Multimodal Vision Forwarding: High-resolution screenshots, handwritten question papers, and diagrams are converted to base64 WebP payloads and passed directly to multimodal vision models.

---

⚙️ Specialized Academic & Workspace Tools

Sere AI equips the central agent with 16 modular tools loaded dynamically at runtime:

Tool Key	Label	Specialized Capability
get_current_time	Time & Date Reader	Fetches accurate local Asia/Kolkata (IST) timestamp for temporal queries
generate_syllabus_notes	Syllabus to Notes	Deconstructs university syllabus topics into exam-ready structured study guides
generate_assignment_solution	Assignment Solver	Delivers step-by-step solutions with proof derivations and LaTeX math
generate_learning_explanation	Learning & Exam	Produces ELI5 analogies followed by technical deep-dives and exam tips
generate_resume	Resume Generator	Generates ATS-optimized, high-density professional Markdown resumes
generate_ppt_presentation	PPT Generator	Creates multi-slide presentation decks separated by ---slide--- delimiters
get_mail_writer_standards	Mail Writer	Drafts executive emails with structured --- to/subject/body --- blocks
generate_mermaid_diagram	Mermaid Visualizer	Synthesizes verified flowcharts, sequence, class, and ER diagrams
generate_excalidraw_design	Excalidraw UI Sketcher	Designs clean vector wireframes, database schemas, and system architectures
generate_html_component	HTML UI Builder	Generates responsive HTML components and sandboxed interactive prototypes
get_vegalite_syntax	Vega-Lite Data Charts	Renders publication-grade statistical charts and scatter plots
fetch_url_content	Web Page Reader	Real-time text extraction and summarization from any public URL
get_cognitive_memory	Cognitive Memory (Read)	Accesses user profile background and historical context
memory_updated	Cognitive Memory (Write)	Updates personal identity key/value stores in the database
generate_quiz	Quiz Generator	Builds interactive multiple-choice quizzes with client-side scoring
fetch_chat_data	Chat Data Fetcher	Reads transcript data across public or owned user sessions

---

🧠 Two-Tier Cognitive Memory System

Unlike standard chatbots that lose context the moment a thread ends or dump massive uncompressed tokens into the system prompt, Sere AI employs a two-tier cognitive memory architecture:

1. Tier 1 — Cognitive Profile (Memory.profile):
   A dense technical summary of the user's educational background, primary programming languages, active courses, and learning preferences. A non-blocking background job compresses batches of up to 5 completed chats into this profile without delaying the active stream.
2. Tier 2 — Personal Identity (Memory.personal):
   A structured key/value store tracking verified attributes (e.g. university, graduation year, target exam, preferred frameworks). Verified updates are deep-merged with strict deduplication.

---

📊 Interactive Visualizations & Streamdown Pipeline

The frontend features a custom streaming markdown pipeline (StreamdownCustom.jsx) supporting real-time rendering of visual artifacts directly inside message bubbles:

• Excalidraw Canvas: Dynamically imported vector whiteboard enforcing roughness: 0 for crisp, publication-ready diagrams with dark/light mode synchronization.
• Mermaid.js: Real-time syntax validation with automatic error recovery and fallback rendering.
• Vega-Lite: Declarative interactive data visualizations with zoom, pan, and tooltip capabilities.
• KaTeX Mathematics: Fast LaTeX mathematical typesetting for formulas, matrices, and calculus proofs.

---

🛠️ Complete Tech Stack

Frontend (Client)

• Framework: Next.js 16 (App Router, React 19)
• Styling & Animation: Tailwind CSS 4, Framer Motion 12, Lucide React
• Markdown & Streaming: streamdown, @streamdown/code, @streamdown/mermaid, @streamdown/math
• Mathematical Notation: KaTeX, rehype-katex, remark-math
• Diagrams & Visuals: @excalidraw/excalidraw, vega-embed, vega-lite, mermaid
• Authentication: @react-oauth/google

Backend & AI Infrastructure

• Runtime: Node.js (ESM), Express.js 5
• Database & ODM: MongoDB, Mongoose 9
• AI Engine & SDK: @google/genai (Native Gemini SDK) + @langchain/google-genai
• Agentic Orchestration: @langchain/langgraph, @langchain/core
• Authentication: JSON Web Tokens (JWT), bcryptjs, google-auth-library
• Payment Gateway: Razorpay API (INR micro-credits, atomic status lock)
• Asset Storage: Cloudinary SDK (WebP image upload pipeline)

---

🚀 Live Demo

• Live Web App: https://sere-ai.vercel.app

---

Next.js 16 React 19 LangGraph Gemini AI Express 5 MongoDB TailwindCSS 4 Excalidraw Mermaid PWA EdTech