connect the docs

Don't just store your documents - uncover their relationships.

Comment

Inspiration

We drown in documents. Researchers juggle dozens of papers, students manage countless of course materials, and professionals in various fields deal with reports and presentations. The challenge these days isn't finding information - it's understanding how everything connects. One may not realize how rarely documents exist in isolation; they form a web of relationships, shared concepts, and patterns that together assist with understanding.

In CalHacks 12.0, I wanted to transform the passive act of storing files into an active discovery process - turning your document collection into a knowledge ecosystem you can explore in 3D.

What it does

"connect the docs" is an AI-powered document analysis tool that visualizes relationships between your files in a stunning 3D graph:

Core features:

  1. Multi-format support: Upload .txt, .docx, .csv, and .pptx files
  2. AI Analysis: OpenAI GPT-4o-mini extracts themes, identifies shared concepts, and maps
  3. relationships
  4. 3D Visualization: Your documents become an interactive galaxy where:
    • Purple nodes = Documents
    • Yellow nodes = Shared themes (concepts appearing across multiple documents)
    • Gray nodes = Unique themes (document-specific concepts)
    • Glowing edges = Connections between related content

Interactive Exploration:

  1. Hover to preview summaries and key insights
  2. Click nodes to dive deep into full analysis with:
    • Document summaries and key-points
    • Connected themes with cross-document references
    • Key quotes from the text
  3. Natural language queries - the user can ask questions like:
    • "Which documents mention climate change?"
    • "Which documents discuss machine learning?
    • The AI highlights relevant nodes and zooms to answers

Smart Controls: - Filter nodes by type (documents, shared themes, unique themes) - Dynamic labels that scale based on camera distance - Focus mode that dims unrelated nodes when exploring connections - Commands for graph manipulation ("show only document-type nodes", "turn off node labels")

How we built it

Tech stack: - Frontend: React - 3D Graphics: Three.js - AI/LLM: OpenAI GPT-4o-mini for document analysis and natural language processing - File parsing: Mammoth.js (for DOCX), PapaParse (for CSV), JSZip (PPTX)

Architecture:

  1. Document Processing Pipeline: Upload -> Parse -> Extract Text -> Send to LMM -> Generate Graph Analysis
  2. Graph Generation
  3. Real-Time Interaction:
    • Raycasting for mouse intersection detection
    • Camera controls with orbital rotation around focus points
    • Material updates in animation loop for highlighting/dimming effects
  4. AI Integration:
    • Document Analysis: GPT-4o-mini extracts themes, definitions, and relationships
    • Chatbot: Context-aware Q&A with full document access
    • Smart Highlighting: AI identifies relevant documents based on queries

Challenges we ran into

  1. 3D Graph Layout Optimization
    • Problem: initial random positioning created cluttered, hard-to-navigate graphs
    • Solution: implemented Fibonacci spiral distribution combined with force-directed physics. This created natural spacing while maintaining a geometrical structure.
  2. Performance with Large Documents
    • Problem: Processing multiple large files caused browser lag and API timeouts.
    • Solution:
      • Chunked content for API calls (limiting to 2000 chars for analysis)
      • Implemented progress indicators and async processing
      • Used streaming updates for typewriter effects
  3. AI Hallucination in Document Matching
    • Problem: AI would sometimes return document titles that didn't exist
    • Solution: Implemented fuzzy matching with multiple fallback strategies:
      • Exact match (case-insensitive)
      • Partial string matching
      • Normalized comparison with debug logging
  4. My full-stack development experience
    • Problem: I lack full stack engineering skills (along with using Git/GitHub)
    • Solution: I utilized LLM's as a resource tool and asked fellow hackers for assistance

What we learned

Technical Skills:

  • 3D Web Graphics: utilized Three.js for complex visualizations
  • LLM Integration: learned prompt engineering for structure analysis
  • React + Three.js: linked reactive UI with imperative 3D rendering
  • File format parsing: handled multiple document types with specialized libraries

Design Principles:

  • Progressive enhancement: Start simple, add complexity gradually
  • User feedback: Visual indicators (typewriter effects, flashing) improve UX
  • Performance optimization: use refs and memoization strategically
  • Accessibility: keyboard shortcuts and clear visual hierarchy

What's next for connect the docs

Long-term

  • More graph organization features: such as graph form, meaning of node size/separation distance, etc.
  • Collaborative mode: share graphs with team members
  • Custom analysis: user-defined theme extraction rules
  • Integration: browser extension for analyzing web tabs

Short-term:

  • Export/Import: save analysis results to JSON for instant demo loading
  • More file format support
  • Search history
  • Optimized user interface

Built With

Share this project:

Updates