MÖzel.See the structure
Files, classes and functions become a call graph you can pan, zoom and search. Entry points and the functions they call stand out.
VibeGraph · case study
Find your way around unfamiliar code.
VibeGraph turns a Python, JavaScript or TypeScript project into an interactive call graph. Select any function for a plain-language explanation, ask follow-up questions with the real source as context, or follow a suggested reading order through the project.
What it does
A map, a guide and someone to ask.
Built for the moment you open a repository you did not write and need to know where to start.
Ask about any function
Select a node for an explanation at beginner, intermediate or advanced depth, in technical terms or as an analogy. The chat panel answers follow-up questions with that function’s source, callers and callees as context.
Get a reading order
A learning path suggests which functions to read first. Ghost Runner walks through the graph one step at a time, with a short AI narration at each stop. Your code is never executed.
How it works
From upload to explanation.
Each stage hands a simpler, more structured result to the next.
Upload
Add source files or a project
.zip. Files are analysed in a temporary folder and cleaned up afterwards. There are no accounts and no database.Parse
Each file goes to a language plugin: Python’s built-in
astmodule for Python, tree-sitter grammars for JavaScript and TypeScript. All plugins share one analyser interface.Build the graph
Definitions and resolved calls become a NetworkX call graph, exported as the JSON that the React Flow view renders.
Explain and chat
Selecting a node sends its source, plus caller and callee context, to a language model through OpenRouter. Answers stream into the panel.
Suggest a path
A deterministic pass scores the graph, looking at entry points, public functions and highly connected hubs, to build a reading order. An optional AI pass may reorder only the first few steps, and the result is checked before it is shown.
What I built
Decisions worth a closer look.
VibeGraph is a personal project, built with the help of AI coding assistants. These are the design choices I would walk a reviewer through first.
- One graph, several languages. A plugin interface lets Python, JavaScript and TypeScript share the same graph builder, so adding a language means writing one plugin rather than another pipeline.
- AI output that gets checked. The learning path starts from a graph-based order. The AI refiner may only reorder a small window of it, and a validator repairs the result if it breaks a rule: callers before callees, every function exactly once, consecutive step numbers.
- A swappable model layer. Explanations, chat and narration moved from a single-provider setup to OpenRouter with a user-selectable model list, while the old import path kept working.
- Nothing kept on the server. Uploads live in a temporary directory during analysis and are removed afterwards, with a scheduled clean-up for anything left behind.
- A split, low-cost deployment. A stateless FastAPI backend on Fly.io that scales to zero, and a static React front end on Vercel that forwards API calls to it.
- Tests on both sides. Backend tests with pytest and front-end tests with Vitest and Testing Library.
Stack
Built with.
- Python 3.12
- FastAPI
- tree-sitter
- NetworkX
- OpenRouter
- React 19
- Vite
- React Flow
- pytest
- Vitest
- Docker
- Fly.io
- Vercel
Limits worth knowing: VibeGraph analyses code statically, so it shows how functions call each other but does not run or trace your program. Projects are added as files or a .zip; there is no GitHub import yet.