I built a spatial 3D knowledge graph with React Three Fiber & Gemini AI 🌌

Source: Dev.to

Hey developers! 👋

I’ve always felt that standard note‑taking apps force our brains into unnatural, linear lists. Our thoughts are connected, chaotic, and spatial. So, I spent the last few weeks building an experiment to fix this.

It’s called Echo Archive.

It’s a spatial knowledge management system where your notes live in a 3D constellation.

🛠 The Tech Stack

I wanted to keep it lightweight but visually immersive.

• Frontend: React 18 + Vite
• 3D Engine: Three.js & React Three Fiber (drei)
• AI Core: Google Gemini AI (via API)
• Styling: Tailwind CSS + Lucide Icons
• Storage: LocalStorage (Privacy first, no cloud database)

🧠 The AI Integration

The coolest part was integrating Gemini. Since I’m using the gemini-2.5-flash model, I could implement:

• Auto‑Tagging: The AI reads the note and suggests categories based on context.
• Smart Continue: Writer’s block? The AI finishes your sentence.
• Abstracts: It automatically generates a TL;DR summary at the top of long notes.

🌌 The Challenge: Mobile 3D Navigation

Making a 3D orbit control feel natural on a phone screen was tricky. I had to map touch events carefully to ensure you can pan the universe with one finger and zoom with two, without accidentally triggering the text editor.

🔗 Try it out

I just released v1.0 and would love some feedback on the navigation feeling!

Live Demo:

Let me know what you think about spatial interfaces. Are they the future or just a gimmick?

Cheers!