DEV Community

Cover image for Notion Brain
Sneha Das
Sneha Das Subscriber

Posted on

Notion Brain

#devchallenge #notionchallenge #mcp #ai

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.

New Dual-Mode Access: To make the app incredibly frictionless to test, I built a secondary "Easy Mode" connection flow. Users who don't want to create an integration token can simply paste a public Notion Page URL. The application will dynamically extract the page ID, mathematically crawl the document tree recursively, and build a bespoke 3D graph out of just that document's sub-pages!

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. Dual-Mode Relational Discovery: Using the Notion SDK, the backend either performs a flat workspace-wide search (via API Token) or a recursive top-down tree search (via Public Link). It hunts for child_page references and page_mentions inside blocks, mapping them into spatial nodes and edges.
  2. Multithreaded & Optimized Block Retrieval: To keep the interface fluid and prevent timeouts on massively nested Notion pages, I implemented a ThreadPoolExecutor that safely fetches nested child block content in parallel. I also added recursion constraints to the internal Markdown parser to guarantee high speeds regardless of document depth.
  3. AI Oracle Summary Layer: Once a node is targeted, the backend fetches the raw content, transforms Notion blocks into customized Markdown, and passes it to Google Gemini. 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! 🚀

Top comments (0)