Notion Brain

Notion MCP Challenge Submission 🧠

Notion Brain 🧠 — Visualize Your Thoughts in a 3D Cosmic Universe

This is a submission for the Notion MCP Challenge

What I Built

Notion Brain is a high-performance 3D Knowledge Graph explorer designed to turn your static Notion database into a living, breathing digital "brain." It visualizes every page as a node in a celestial system, mapping relationships and grouping content into thematic clusters based on internal page-to-page mentions.

Unlike standard linear search, Notion Brain allows you to literally "fly" through your workspace, identify forgotten connections between distant concepts, and interact with an AI-driven summary layer without ever leaving the 3D environment.

Video Demo

WATCH THE LIVE DEMO HERE

Show us the code

The project is built with a FastAPI backend and a React-Three-Fiber frontend, fully optimized for Vercel deployment and low-latency interaction.

👉 GitHub Repository: https://github.com/Snehadas2005/Notion-Brain

How I Used Notion MCP

I integrated the Notion SDK into an asynchronous Python backend to act as the "nervous system" of the application, bridging the gap between raw data and 3D visualization.

1. Relational Edge Discovery: Using the Notion integration secret, my backend performs a deep scan of the workspace to identify child_page references and page_mentions across blocks. This data is then converted into a graph of nodes and edges.
2. Multithreaded Block Retrieval: To keep the interface fluid, I implemented a ThreadPoolExecutor that fetches block content in parallel across multiple sub-pages.
3. AI Oracle Summary Layer: Once a node is targeted, the backend fetches the raw content, parses it into customized Markdown, and passes it to Google Gemini (1.5 Flash). This provides a structural summary (Overview, Key Points, Category) directly inside the 3D HUD, making massive docs instantly readable.

🎨 Design & Tech Stack

The application uses a Brutalist / Manga-inspired aesthetic to create a focused, high-contrast atmosphere:

• 3D Space: Built with @react-three/fiber and @react-three/drei.
• Animations: Orchestrated with Framer Motion and GSAP.
• Backend: FastAPI with httpx for non-blocking AI requests.
• Deployment: Fully serverless mono-repo deployment on Vercel.

Developed by: Sneha Das

Good luck to everyone in the challenge! 🚀

Source: Dev.to