NoteRootAI bridges the gap between traditional note-taking apps and advanced AI research tools.
[[Note Title]] automatically forms a relationship mapped in Neo4j.NoteRootAI is built on a robust three-tier architecture ensuring separation of concerns:
graph TD
%% Client Tier
subgraph Client [Frontend App]
UI[React UI + Tailwind]
Editor[Tiptap Editor]
LocalDB[(IndexedDB / localforage)]
Store[Zustand State]
Sandbox[Iframe Execution Sandbox]
end
%% Server Tier
subgraph Server [Express Backend]
API[Node.js REST API]
Auth[Auth Middleware]
end
%% Database Tier
subgraph Databases [Cloud Databases]
Mongo[(MongoDB Atlas)]
Neo4j[(Neo4j Graph DB)]
end
%% AI Tier
subgraph AIService [Python AI Microservice]
FastAPI[FastAPI Server]
RAG[RAG Engine]
Agent[Autonomous Agent Engine]
Chroma[(ChromaDB Vectors)]
LLM((LLM Providers\nOpenAI/Groq/Gemini/Custom))
end
%% Connections
UI <-->|State/Sync| Store
Editor --> LocalDB
Store <-->|Background Sync| API
API --> Auth
Auth <--> Mongo
Auth <--> Neo4j
Store <-->|Auto-Embed / Chat / Agent| FastAPI
Sandbox <-->|Secure API Bridge| Store
FastAPI <--> Chroma
FastAPI <--> LLM
RAG <--> Chroma
Agent <-->|Triggers Tools| Sandbox
The project uses a monorepo-style structure separated into three main services:
d:\NoteRoot2\
├── client/ # Frontend React Application
│ ├── src/
│ │ ├── components/ # UI Components (Editor, Layout, Sidebar)
│ │ ├── pages/ # Route Pages (Dashboard, Graph, Chat)
│ │ ├── stores/ # Zustand State (noteStore, authStore, settingsStore)
│ │ └── lib/ # Configs, API connections, Plugin Bridge
│ └── package.json
│
├── server/ # Node.js + Express API Backend
│ ├── src/
│ │ ├── controllers/ # Business logic (noteController)
│ │ ├── models/ # Mongoose schemas (Note)
│ │ ├── routes/ # Express API routes
│ │ ├── neo4j.ts # Graph database driver initialization
│ │ └── app.ts # Express Server setup
│ └── package.json
│
└── ai-service/ # Python FastAPI AI Microservice
├── providers/ # LLM factory (OpenAI, Gemini, Anthropic, Custom)
├── services/ # RAG, Embedding, Agent Tool definitions
├── chroma_db/ # Local persistent vector database
├── main.py # FastAPI endpoints
└── requirements.txt
This diagram explains how data moves through the system when a user interacts with the Autonomous Agent.
sequenceDiagram
actor User
participant Client as React Client
participant Sandbox as Iframe Sandbox
participant AI as FastAPI Service
participant LLM as External API (Groq/Gemini)
User->>Client: "Summarize this note and create a sub-note"
Client->>AI: Sends Agent Prompt (POST /agent/chat)
AI->>LLM: Requests Tool Execution
LLM-->>AI: Yields `read_note` Tool Call
AI-->>Client: Forwards Tool Execution Request
Client->>Sandbox: Verifies and Executes API Call securely
Sandbox-->>Client: Returns Note Content
Client->>AI: Sends back Tool Response
AI->>LLM: Feeds Content & Requests next step
LLM-->>AI: Yields `create_sub_note` Tool Call
AI-->>Client: Forwards Execution Request
Client->>Client: Updates IndexedDB Instantly
Client-->>User: Displays Success in Chat UI
flowchart TD
Start([User Opens App]) --> ThemeSync[Auto-Syncs OS Theme]
ThemeSync --> Auth{Is Logged In?}
Auth -- No --> Login[Login / Sign Up Page]
Login --> DBAuth[Authenticate via Server]
DBAuth --> Dashboard
Auth -- Yes --> Sync[Fetch Latest Notes from Cloud]
Sync --> Dashboard[Dashboard Overview]
Dashboard --> CreateNote[Create New Note]
Dashboard --> Graph[View Knowledge Graph]
Dashboard --> AIChat[Open AI Chat]
CreateNote --> Editor[Rich Text Editor]
Editor --> Paste[Drag & Drop / Paste Local Media]
Editor --> AutoSave{Auto Save}
AutoSave -- Local --> IndexedDB[(IndexedDB)]
AutoSave -- Cloud --> Mongo[(MongoDB Atlas)]
AutoSave -- Graph --> Neo4j[(Neo4j AuraDB)]
AutoSave -- Vectorize --> Chroma[(ChromaDB)]
Graph --> ViewLinks[Explore Node Relationships]
AIChat --> AskQ[Ask Agent to do work]
AskQ --> Agent[Agent uses Tools to Manipulate Vault]
Agent --> Answer[Receive contextual Answer & Updates]
/ menu for easy block insertion.[[Note Title]] automatically links nodes in the Neo4j database.localforage). A robust background queue syncs changes, including local deletions, to the cloud server gracefully.list_all_notes, read_note, create_note, create_sub_note, update_note, append_to_note, and delete_note.zustand store.NoteRootAI features a first-class plugin system that allows the community to extend the editor, AI capabilities, and UI.
Plugins are single JavaScript files hosted on public GitHub repositories. They are loaded and executed by the Plugin Runtime in a locked-down scope — no window, no document, no DOM access. Every interaction goes through a safe, typed ctx API.
// Every plugin follows this structure
function main(ctx) {
const { runtime, notes, ui, ai, theme, settings, events } = ctx;
// Register extensions into UI slots
runtime.registerExtension('note.pageActions', {
id: 'my-action',
icon: '⚡',
label: 'My Action',
onClick: async (noteId) => {
const note = await notes.getNote(noteId);
ui.showToast(`Note has ${note.title.length} chars in title!`);
}
});
}
| Extension Point | Where It Appears |
|---|---|
settings.panels |
Settings → Plugins |
note.pageActions |
Note editor top-right toolbar |
editor.bubbleButtons |
Text selection bubble menu |
editor.slashItems |
/ command menu |
layout.modals |
Modal dialogs |
layout.overlays |
Always-visible overlays |
theme.tokens |
App-wide CSS variable overrides |
| Plugin | Description |
|---|---|
sample-plugin/ |
Official reference plugin — demonstrates all extension points |
summarizer-plugin/ |
Real-world plugin — summarizes selected text using ctx.ai.chat() |
See the docs/ folder for the complete multi-page developer guide:
ctx API referenceWe are currently preparing to build Phase 4 (Community Ecosystem).
google.generativeai to google.genai SDK in the AI service, and move hardcoded API URLs to .env configs.server/:cd server
npm install
.env file in the server directory containing your MONGODB_URI and NEO4J_URI, NEO4J_USER, NEO4J_PASSWORD.npm run dev
(Runs on http://localhost:5000)
ai-service/:cd ai-service
python -m venv venv
# Windows: venv\Scripts\activate
# Mac/Linux: source venv/bin/activate
pip install -r requirements.txt
uvicorn main:app --reload
(Runs on http://localhost:8000)
client/:cd client
npm install
npm run dev
(Runs on http://localhost:5173)
http://localhost:5173 in your browser./ to see all formatting options. You can also paste or drop images instantly.