Viz-Lens

Don’t ask AI for answers. Ask it to show you how things work. VIZ-LENS is your personalised concept clarifier; through interactive visualizations, active recall quizzes, and an AI based IDE.

Comment

Inspiration

As Computer Science students ourselves, we faced a problem in our learning journey. Whenever we wanted to understand a concept or try and visualise how it works, our options were extremely limited - either approach your every busy professors, find youtube videos that may be related to the topic but are rigid and don't let you test your own variables and tinker around, or resort to books, which fail to provide an engaging visual aid. As we grew frustrated with this issue, and as we spoke to our peers and interviewed other students, we realised that almost every student faces this issue, and there's no all in one fix that's personalised to each individual student. Thus we built Viz-Lens, an end to end visualisation and concept checker platform that visualises your question for you, allows you to test your own variables and parameters, presents a quiz to check your understanding of the concept, and finally an integrated IDE that lets you code the solution and judges your solution with an AI code checker, with all of it free; not locked behind a paywall, thus addressing UN SDG 4.

What it does

VIZ-LENS is an AI-powered visualization engine that transforms abstract inputs into interactive understanding. It turns code to step-by-step execution flows, mathematical concepts to dynamic simulations; CSV datasets become intelligent dashboards, and repositories become explorable architecture diagrams. What sets it apart is active learning; since users must interact with visualizations, answer concept-based quizzes, and test their own solutions with an AI coding judge before unlocking the final answer.

How we built it

We built VIZ-LENS as a full-stack AI system combining visualization, reasoning, and evaluation:

Frontend: Next.js + Tailwind + Framer Motion for dynamic, interactive UI

Backend: Node.js + Express for orchestration and APIs

AI Layer: Gemini 3 (flash and pro) for reasoning, quiz generation, and evaluation

Visualization: Chart.js + HTML5 Canvas for rendering dynamic flows

IDE: Monaco Editor for in-app coding and validation

Deployment: Vercel (frontend) + Render (backend)

The system follows a pipeline: Parse → Structure → Visualize → Interact → Evaluate → Unlock

Challenges we ran into

Designing a system that prioritizes understanding over answers without frustrating users Converting diverse inputs (code, math, data) into meaningful, accurate visual representations Building a real-time feedback loop for quizzes and code evaluation Ensuring the UI remains intuitive despite the system’s complexity And finally managing multiple endpoints and API callds during a single interaction with the system.

Accomplishments that we're proud of

We're proud that we have successfully built a unified engine that works across code, data, and concepts. We have managed to implement a true active learning loop with enforced understanding, enabled real-time execution visualization; not just static diagrams, created a system that aligns AI with cognitive learning principles, and delivered a product that is both technically deep and highly usable.

What we learned

The biggest problem in AI today is not access to answers, but lack of intuition. AI becomes significantly more impactful when used as an orchestrator, not just a generator. Enforcing interaction (instead of instant answers) leads to better learning outcomes, and balancing power and simplicity in UX is critical for adoption.

What's next for Viz-Lens

Moving forward, we aim to integrate: Real-time adaptive teaching using live interaction (voice/video integration), Deeper repository intelligence (full system reasoning and debugging flows), Personalized learning paths based on user behavior and performance, Expanded domain coverage (system design, ML concepts, business workflows), and Collaborative learning features (shared sessions, team understanding tools). Our vision is to make VIZ-LENS the default interface for understanding complex systems, from classrooms to engineering teams.

Built With

Share this project:

Updates