StackSnap: Interactive Program Visualizer

Inspiration

StackSnap was created for a more intuitive and interactive way to debug and understand complicated code. We bridge the gap between static code and dynamic runtime analysis with AI-assisted insights.

What we accomplish

StackSnap allows users to:

Trace code line-by-line: See exactly how execution flows through your script.
Inspect variable states: View local variables and the call stack at every step.
Receive AI-powered explanations: Get context-aware help from an integrated AI assistant that understands your code, current execution line, and variable states.
Multi-file support: Edit and trace complex projects across multiple files.
Interactive Visualization: Features an execution slider, stack viewer, output console, and embedded AI chat.

How we built it

After designing the end-to-end flows and integrations for an MVP, we used Trae to complete the following several core components:

Backend (tracer.py): The core execution engine uses sys.settrace to capture line-by-line data, call stack frames, and local variables, exporting it all to JSON.
Server (server.py): A local HTTP server that manages the workflow, handling code updates, execution triggers, and AI chat forwarding.
Frontend (visualizer.py): Generates a rich, interactive web interface using HTML, CSS, and JavaScript.
AI Integration (llm_call.py): Built with LangChain and the Keywords AI API to provide intelligent, context-aware code explanations and debugging assistance.

Challenges we faced

Implementing a robust execution tracer using sys.settrace that could handle multi-file projects while maintaining a seamless bridge between the Python backend and the web-based visualizer was a significant technical hurdle.