InsightMap — Turn Curiosity into Clarity

Discover, connect, and visualize knowledge — powered by Comet.

Comment

Inspiration

As a student and developer, I often find myself opening multiple tabs just to understand one topic — blogs, videos, research papers, docs — all scattered and disconnected. That’s when I discovered Perplexity Comet, an AI browser that organizes information intelligently. It inspired me to imagine:

What if we could visually explore a topic — not just read about it?

InsightMap was born from that thought — a project that transforms curiosity into visual clarity using AI-inspired topic mapping.

What it does

InsightMap lets you enter any topic — like Neural Networks or Quantum Computing — and instantly generates a beautiful, interactive knowledge map powered by AI-inspired logic. Each concept appears as a connected node, with hover popups explaining subtopics, relationships, and real-world applications.

It also includes: AI-style summaries and key takeaways Learning resources curated for students Exportable maps (as JSON) A glassy, dynamic interface inspired by Perplexity Comet’s browsing experience It’s like if Perplexity’s research brain met a visual concept map — designed for learners.

How we built it

Frontend: React + Vite Visualization: React Flow (for dynamic node & edge rendering) Animations & Interactivity: Framer Motion Styling: TailwindCSS with glassmorphism design Icons & UI: Lucide React Data Simulation: Custom “AI-inspired” topic generation engine written in JavaScript I built a function that analyzes a given topic (like machine learning or quantum computing) and generates: Core concepts Key relationships Visual node structure Short descriptions and takeaways All nodes and edges are dynamically mapped into the ReactFlow graph, giving it that agentic AI map feel — like how Comet visually organizes knowledge.

Challenges we ran into

Making ReactFlow compatible with React 19 (it required migrating from react-flow-renderer to reactflow) Ensuring smooth animations and responsive layout while keeping the design visually elegant Balancing between simplicity and “AI sophistication” — I wanted it to feel intelligent without actually relying on a backend model Managing node layouts dynamically so maps never overlap

Accomplishments that we're proud of

Designed a complete interactive AI learning tool solo — from concept to polished UI Created an intuitive visualization system that looks and feels like an AI assistant Aligned the product experience with Perplexity Comet’s mission — rethinking how humans explore and learn Built everything fully front-end in React, no backend required — fast, portable, and demo-ready

What we learned

This project taught me: How AI-driven interfaces like Comet can reshape education and research The power of visual learning — maps help retain and understand information better than linear text Deep understanding of ReactFlow, Framer Motion, and modern React animation pipelines How to transform an abstract idea (“turn curiosity into clarity”) into a real, tangible user experience

What's next for InsightMap — Turn Curiosity into Clarity:

Comet API Integration — Use the actual Perplexity API to dynamically fetch summaries and topic relationships in real-time. AI-powered generation — Integrate OpenAI API for automatic concept extraction and custom map creation. Save & Share Feature — Let users create topic collections and share them publicly. Learning Assistant Mode — Add a chat overlay that explains connections between nodes interactively (“Explain how CNN relates to Neural Networks”). Browser Extension — Bring InsightMap into the browser, allowing users to visualize any page’s topic graph with one click — just like Comet!

Built With

Share this project:

Updates