RepoGraph

• 

  Home page

• 

• 

• 

Inspiration Joining a new codebase is overwhelming. Existing tools force developers to scroll through endless nested folders and mentally reconstruct how everything connects. We wanted onboarding to feel like stepping into a building with a clear map — visual, guided, and interactive. RepoGraph AI was born from that idea: what if code could be explored instead of read?

What it does RepoGraph AI turns any public GitHub repo into a living, explorable map. It fetches the repository tree and uses an LLM to infer structure, purpose, complexity, and relationships. Users can switch between a Subway Map (rail lines and stations), a Bento Tile Map (complexity-sized grid tiles), and the original graph. Features include AI-guided Flight Path tours, complexity heatmaps, data-flow tracing, click-to-explain file summaries, and keyboard shortcuts.

How we built it We used Lovable and TanStack Start as the full-stack React foundation, with server functions for analysis: analyze-repo fetches the GitHub tree and asks the LLM for architecture metadata; scan-imports uses regex for token-efficient import discovery; explain-file generates on-demand summaries only when a user double-clicks a file. Layout engines (build-subway.ts, build-tiles.ts, use-canvas-transform.ts) convert the result into Subway, Tile, and pan/zoom views. The UI is kept minimal with a single Settings sheet and a TopBar view toggle.

Challenges we ran into

• Large repos caused visual clutter and lag, solved by virtualization, offscreen culling, and the cleaner Subway/Tile views.
• Hover-select flickered and buried edges, so we moved to click-to-select and CSS transitions.
• AI token costs forced us to use regex import scanning and defer LLM calls until needed.
• Mobile UI clutter was fixed by consolidating controls into one Settings sheet.
• Straight connection lines looked messy, so we moved to subway routing and finally bento-grid neighbor highlighting.

Accomplishments that we're proud of

• Three distinct visualization modes from one analysis pipeline.
• A clean mobile experience with a unified Settings sheet and keyboard shortcuts.
• Token-efficient AI usage: only two LLM calls for the whole map, plus one per file explanation.
• A guided Flight Path onboarding tour that feels like a museum walkthrough.
• A true data-flow tracing system that animates only the relevant path and dims the rest.

What we learned

• Visualization is compression: the right abstraction matters more than showing every connection.
• LLM cost is a UX constraint; designing around it produces smarter, lighter analysis.
• Interaction design beats raw data: click-to-select, consolidated controls, and keyboard shortcuts make the app feel premium.
• TanStack Start server functions are a great middle ground between UI and backend logic.

What's next for RepoGraph

• Private repository support via GitHub OAuth.
• Persistent project snapshots for team sharing.
• Diff-aware heatmaps highlighting recently changed files.
• Voice/chat-to-map commands.
• PNG, SVG, and Lottie export for presentations.

Built With

• ai
• data-visualization
• gemini
• github-api
• lovable
• react
• react-flow
• supabase
• tailwind-css
• typescript
• vite