Turn scattered ideas into a living, explorable constellation of knowledge.
"What if your notes could think?"
ZeroNode is an infinite canvas knowledge graph powered by AI. Type any topic, and it instantly generates a web of interconnected concepts — visualized as nodes on a canvas you can explore, expand, and chat with.
It's not a note-taking app. It's not a mind map tool. It's a thinking environment that uses AI to build the structure you didn't know you needed.
You type: "Teach me system design"
AI builds: 7 connected nodes → auto-linked by meaning → ready to explore
|
Type any topic. Watch nodes appear on the canvas in real time — streamed token by token via Server-Sent Events. No waiting. No black box. |
Every node is vectorized by Google Gemini. Nodes with >75% cosine similarity are automatically wired together with glowing edges and match percentages. |
|
Ask your graph anything. The AI answers strictly from your own nodes — no hallucinations, no out-of-scope answers. A tutor built from your own knowledge. |
Command palette powered by vector similarity. Search your nodes by meaning, not just keywords. Find what you meant, not what you typed. |
|
Hit Share — your entire graph is Base64-encoded into a URL. Anyone who opens it gets your exact graph, hydrated client-side. Zero backend required. |
Export a pristine, UI-free 1920×1080 screenshot of your canvas. Clean enough to post on Twitter. Built with |
|
5 canvas tools — Select, Pan, Add, Connect, Delete. Each changes cursor behavior, interaction mode, and canvas response in real time. |
Your graph auto-saves to localStorage with a 1.5s debounce. Refresh the page — everything is still there. No account needed. |
| Layer | Technology | Purpose |
|---|---|---|
| Framework | Next.js 16 (App Router) | Full-stack, API routes, SSR |
| Canvas | React Flow (@xyflow/react) |
Infinite canvas, nodes, edges |
| AI / LLM | Groq — LLaMA 3.1 8B Instant | Node generation, chat, expansion |
| Embeddings | Google Gemini text-embedding-004 |
Semantic linking, similarity search |
| Styling | Tailwind CSS v4 + shadcn/ui | UI components, glassmorphism |
| Streaming | Server-Sent Events (SSE) | Real-time token streaming |
| Deployment | Vercel | Zero-config deployment |
┌─────────────────────────────────────────────────────┐
│ Next.js App │
│ │
│ ┌──────────────┐ ┌──────────────────────────┐ │
│ │ React Flow │ │ API Routes │ │
│ │ Canvas │◄──►│ /api/generate-nodes │ │
│ │ │ │ /api/embed-node │ │
│ │ Nodes │ │ /api/expand-node │ │
│ │ Edges │ │ /api/chat-graph │ │
│ │ Toolbar │ └──────────┬───────────────┘ │
│ └──────────────┘ │ │
│ ▼ │
│ ┌────────────────────┐ │
│ │ External APIs │ │
│ │ Groq │ Gemini │ │
│ └────────────────────┘ │
│ │
│ localStorage ──► Auto-save graph state │
│ URL params ──► Shared graph hydration │
└─────────────────────────────────────────────────────┘
- Node.js 18+
- Free API keys from Groq and Google AI Studio
git clone https://github.com/StreetCoder02/zeronode.git
cd zeronodenpm installcp .env.local.example .env.localEdit .env.local:
GROQ_API_KEY=gsk_xxxxxxxxxxxxxxxxxxxx
GEMINI_API_KEY=AIzaSyxxxxxxxxxxxxxxxxxnpm run dev| Service | Link | Starts With |
|---|---|---|
| Groq | console.groq.com | gsk_ |
| Gemini | aistudio.google.com | AIzaSy |
1. User types a topic
│
▼
2. POST /api/generate-nodes
└─► Groq LLaMA 3.1 streams 7 nodes as SSE
│
▼
3. Nodes appear on canvas (staggered 150ms animation)
│
▼
4. POST /api/embed-node (per node)
└─► Gemini vectorizes title + description
│
▼
5. Cosine similarity computed client-side
└─► Nodes with >75% similarity auto-connected
│
▼
6. Graph saved to localStorage (debounced 1.5s)
zeronode/
├── app/
│ ├── api/
│ │ ├── generate-nodes/ # Groq SSE streaming
│ │ ├── embed-node/ # Gemini embeddings
│ │ ├── expand-node/ # AI node expansion
│ │ └── chat-graph/ # RAG chat
│ ├── app/ # Canvas app (/app)
│ └── page.tsx # Landing page (/)
├── components/
│ ├── zeronode/
│ │ ├── knowledge-graph.tsx # Main canvas
│ │ ├── knowledge-node.tsx # Node component
│ │ ├── graph-chat.tsx # AI chat panel
│ │ ├── node-editor-panel.tsx # Node editor
│ │ ├── ai-generate-modal.tsx # Generation modal
│ │ ├── canvas-toolbar.tsx # 5 tool buttons
│ │ ├── node-filter-bar.tsx # Type filter
│ │ └── command-palette.tsx # Cmd+K search
│ └── landing/ # Landing page components
├── lib/
│ ├── embeddings.ts # Cosine similarity utils
│ └── share.ts # Graph encode/decode
└── styles/
└── globals.css
📸 Screenshots coming soon — use the Export PNG button in the app to capture your own graph
- Supabase persistent storage
- Auth with GitHub login
- Export to Markdown / PDF
- Mobile touch support
- Collaborative multi-user canvas
- Public graph gallery
Pull requests are welcome. For major changes, open an issue first.
git checkout -b feature/your-feature
git commit -m "feat: add your feature"
git push origin feature/your-featureMIT © 2026 Aniruddha Pratap Singh
