Fractal

Inspiration

We've all been there: you're having a deep, productive conversation with an AI, and suddenly you have a tangent idea. You want to explore it, but you're afraid of losing the main thread. If you ask the side question, the context shifts. If you start a new chat, you lose all the context of who you are and what you were working on. We realized that human thought isn't linear—it's fractal. Our ideas branch, diverge, and reconnect. Yet, every single chat interface today forces us into a single, vertical line. We wanted to build an AI interface that mirrors the way our brains actually work: one that creates parallel universes of thought, allows for infinite exploration, and—crucially—never forgets who we are.

What it does

Fractal is an intelligent, branching chat interface powered by a "Three-Brain" AI system.

• Branching Conversations: You can click on any message in history to create a new branch. This lets you explore "What if?" scenarios without losing your original train of thought.
• Visual Knowledge Graph: Every conversation is visualized as an interactive "Solar System" graph. Messages are nodes, and branches are orbits. You can see your entire thought process at a glance.
• Deep Personal Memory: Powered by Supermemory, Fractal builds a dynamic profile of you. It knows your job, your skills, your writing style, and your history. It doesn't just give generic answers; it gives your answers.
• Intelligent Routing: The system automatically detects what you need:
  • General questions? It uses Google Gemini.
  • Current events? It browses the web with Exa.ai.
  • Personal questions? It recalls facts from Supermemory.
• Adaptive Theming: The UI itself is alive. An AI agent analyzes your personality profile and procedurally generates a unique color theme and background aesthetic that fits you perfectly. ## How we built it We built Fractal using a modern, edge-first stack designed for speed and interactivity:
• Frontend: Next.js 16 (App Router) with React Server Components for a fast, SEO-friendly shell.
• The Brain (Orchestrator): We architected a custom Agentic Router using the Vercel AI SDK. This router uses specific system prompts to classify user intent and route queries to the correct tool (Gemini, Exa, or Memory).
• Database: We used PostgreSQL with Drizzle ORM to handle the complex, recursive data structure required for branching chat trees.
• Visualization: The graph view is built with react-force-graph-2d, providing a physics-based interactive playground for your messages.
• Styling: We used Tailwind CSS for the UI and Framer Motion for the optimistic animations that make the branching feel instant. ## Challenges we ran into
• The "Hallucinating Router": One of the biggest hurdles was getting the AI to reliably distinguish between a question that needs web search versus one that needs memory recall. Early versions would try to "Google" the user's personal childhood memories. We solved this by implementing strict tool definitions and a multi-step verification process in the orchestrator.
• Recursion Hell: Managing the state for a chat system where any node can have n children (and those children can have children) was complex. We had to design efficient recursive SQL queries and a robust frontend state management system to ensure the UI didn't break when switching deep between branches.
• Real-time Graph Performance: Rendering hundreds of nodes with physics simulation can kill browser performance. We spent a lot of time optimizing the graph engine to ensure it remained buttery smooth even with large conversation trees. ## Accomplishments that we're proud of
• Optimistic Branching: We achieved a "zero-latency" feel. When you create a branch, the UI updates instantly before the server even confirms, making the experience feel magical.
• The "It Knows Me" Factor: The integration with Supermemory is seamless. Asking "What should I work on next?" and having the AI actually reference your real-world projects and skills is a game-changing experience.
• Attributed AI: We successfully built a transparent system where the user always knows which AI is speaking—whether it's the creative writer (Gemini), the researcher (Exa), or the personal assistant (Supermemory). ## What we learned
• Context is King, but Personal Context is Emperor: RAG (Retrieval Augmented Generation) is useful, but connecting an LLM to a structured personal memory bank makes it feel significantly more intelligent and empathetic.
• Visuals Aid Metacognition: We learned that users think better when they can see their conversation structure. The graph isn't just eye candy; it helps users navigate complex problem-solving sessions.
• Agents Need Clear Lane Markers: The key to a good multi-agent system isn't more powerful models, but clearer definitions of what each model is allowed (and not allowed) to do. ## What's next for Fractal
• Multiplayer Branching: We want to enable real-time collaboration where teams can brainstorm on the same tree, creating their own branches of thought simultaneously.
• Voice-to-Graph: A mobile mode where you can walk and talk, with Fractal organizing your spoken ramblings into a structured mind map automatically.
• Deep Research Agent: Adding a "Deep Dive" mode where the AI can autonomously create hundreds of research branches while you sleep, presenting you with a curated summary tree in the morning.

Built With

• drizzle
• exa
• framermotion
• gemini
• next.js
• nextauth
• postgresql
• react
• react-force-graph-2d
• supermemory
• tailwind
• typescript
• vercel
• vercelaisdk