RepoViz

• 

  File Summary

• 

  AI Explanation on feature workflow

Inspiration

Reading someone else's code usually feels like trying to decipher an ancient alien language... written by a caffeinated squirrel. When developers join a new project, they are hit with a "Wall of Text"—hundreds of files in a flat list. Understanding the architecture takes weeks of mental gymnastics. We realized that software isn't linear; it's a complex, interconnected network. So why do we view it as a list? We wanted to build Google Space for Code. We wanted to trade the archaeology kit for a jetpack, allowing developers to have an AI "Senior Architect" explain the madness instantly.

What it does

RepoViz transforms any GitHub repository into an interactive 3D Neural Network.

• 3D Exploration: It visualizes your codebase as a galaxy. Folders and files are glowing stars connected by dependency beams. You can fly through, zoom in, and expand/collapse folders dynamically.

• Context-Aware AI Analysis: Click on any node—whether it's a folder or a specific file—and our AI instantly generates a technical summary and a "Deep Dive" explanation of its logic.

• Multi-Agent Chat: It’s not just a chatbot. We implemented a Multi-Agent System where: The Navigator Agent scans the file tree to find relevant files for your question. The System Agent fetches the raw code from GitHub's API. The Architect Agent reads the specific code and formulates a precise solution.

How we built it

• Frontend: Built with React and Vite for blazing-fast performance.

• 3D Engine: We used Three.js and react-force-graph-3d. We implemented custom shaders and materials (MeshLambertMaterial) to create the "glowing cyberpunk" aesthetic and a dynamic starfield background.

• The Physics: We engineered a custom force-directed graph algorithm. To prevent the "exploding graph" issue, we implemented a logic where child nodes are given a random "kick" vector upon expansion to help the physics engine resolve collisions naturally.

• AI Backend: We powered the intelligence with gpt-4o-mini. We chose GPT for its massive context window and native JSON mode, which allowed our agents to communicate reliably without crashing the UI.

• Data: We utilize the GitHub Octokit API to fetch repo trees and raw file content in real-time.

Challenges we ran into

• Navigating Uncharted Territory: We ambitiousy chose tech stacks that was largely new to us. Combining Three.js physics engines with React and complex backend integration was a steep learning curve. We spent a significant amount of the hackathon just reading documentation and debugging the basics of 3D rendering, meaning we had to learn and build simultaneously under high pressure.

• Taming the "Hairball" Graph: Our first 3D renders were a disaster. When we tried to load a whole repository at once, the nodes looked incredibly messy—files were intersecting, labels were overlapping, and the structure was just a tangled ball of spaghetti. It was visually overwhelming. To fix this, we pivoted to a "Progressive Disclosure" model: we now only render the root folders initially. This ensures a clean, organized view from the start, letting users surgically expand the specific folders they want to explore.

• From "Guessing" to "Reasoning": Early in the build, the AI responses were disappointing. When we asked questions about the codebase, the AI (lacking context) would often hallucinate or give generic, unhelpful advice. It simply didn't know where to look. We realized a simple chatbot wasn't enough, so we engineered an Agentic AI System. Now, instead of guessing, our "Navigator Agent" autonomously scans the file tree to find the right files, and our "Architect Agent" reads the actual code to provide accurate, evidence-based answers.

Accomplishments that we're proud of

• The Visuals: We successfully created a UI that looks like a sci-fi movie interface but runs smoothly in the browser. The "Space" aesthetic with the starfield makes code exploration actually feel fun.

• The Agent System: We didn't just wrap ChatGPT when user try to ask a query about the codebase. We built a real workflow where the AI decides which files to read before answering. Seeing "The Navigator" agent correctly identify that it needed to read App.jsx and Sidebar.jsx to answer a question about the UI was a massive win.

• Usability: We found out how useful it is when a developer is first coming to a new codebase. You paste a URL, and it just works. No cloning, no local setup. And everything is there!

What we learned

• The Art of 3D Graph Theory: We learned that a force-directed graph isn't just about visualization—it's a delicate physics simulation. Balancing "Charge" (repulsion) against "Link Distance" (gravity) is an art form. We had to experiment extensively with the D3 force engine to find that "sweet spot" where the galaxy expands enough to be readable but doesn't explode into the void, teaching us that data visualization is as much about mathematics as it is about aesthetics.

• Agentic AI over Monolithic Models: We discovered that simply feeding a massive prompt to an LLM isn't enough for complex tasks. We learned the power of Agentic Workflows: by breaking one "smart" AI into three specialized agents (Navigator, System, and Architect), we achieved significantly higher accuracy. It taught us that the future of AI isn't just about bigger models, but about orchestrating specialized agents that can "think" and research before they speak.

What's next for RepoViz

RepoViz Pro (The "Please Feed Us" Tier): Look, we love Open Source, but we have been coding for free since the dawn of time and our wallets have gathered cobwebs. To finally break this generational curse of poverty, we are launching a subscription model. RepoViz Pro will unlock support for Unlimited Repos Upload and higher AI rate limits. Please subscribe—we would really like to upgrade our diet from "Instant Ramen" to "Instant Ramen with an Egg."

Built With

• react
• three.js
• vite