Nodus - Article Concept Mapper

Nodus is a Chrome side-panel extension that transforms any long-form content written on the web into an interactive, knowledge graph that helps you form connections and better understand the material.

Comment

Our Inspiration

After reading long articles it can be hard to understand or visualize how ideas connect. We brainstormed an idea for an easy way to turn dense pages into an interactive map of concepts, using LLMs to assist in summarizing and providing the structured JSON output.

What it does

Nodus is a chrome extension that can see whatever you are reading.

  • Chrome extension side panel that works on almost any article.
  • Extracts the main content, sends it to Gemini, and gets back JSON data structured for the frontend.
  • Shows key concepts as nodes, grouped by theme, with edges explaining how they relate.
  • Stores graphs per URL so revisiting a page instantly restores its graph.
  • Lets you explore the content by clicking nodes, with a focused explanation, and highlighting the links.

How we built it

  • Utilizing Chrome Extension MV3 with a background service worker, content script, and side panel.
  • The content script (that pulls the raw text from the article) uses @mozilla/readability (a reader extension) plus fallbacks to grab the main article text.
  • Background script calls Gemini via @google/generative-ai with a strict JSON schema for nodes and links.
  • Graph data is stored in chrome.storage.local keyed by URL.
  • Side panel is a Vite + React + TypeScript app using react-force-graph-2d for visualization.

Challenges we ran into

  • Working with agents in multiple codebases can cause issues very quickly. Agents just seem to LOVE touching files we tell them not too!
  • Content extraction across messy, non-article pages, where readability is unable to parse the text
  • Coordinating messages between background, content script, and side panel 'google(especially when scripts weren’t loaded yet) 'chrome.runtime.onMessage'

Accomplishments that we're proud of

  • A one-click pipeline from real-world web pages to interactive knowledge graphs
  • A structured prompt + validation layer that turns LLM output into reliable, structured data.
  • A side panel that feels native to Chrome, with per-URL graph caching.
  • A clean separation between extraction, orchestration, storage, and UI.

What we learned

  • Our first way time creating an MV3 extensions, service workers, and side panel
  • How to steer LLMs toward strict, machine-usable JSON instead of free-form text (prompt guidelines)
  • Getting content from webpages that don't follow conventions is difficult
  • A force directed UI can be very finnicky, and getting the spacing right can be an issue.

What's next for Nodus

  • New node/edge views
  • Source quotes grounded in the article.
  • Basic editing of nodes and edges so users can refine the graph
  • Multi-article graphs that show how different sources overlap.
  • Export options (JSON/image/embed/md) for sharing graphs.

The goal is to evolve from a demo into a lightweight tool that eventually makes it to the chrome web store!

Built With

Share this project:

Updates