Algorithm Visualizer powered by webMCP

• 

  Visualize and track the code line by line with AI

• 

  Fix with AI with MCP inputs

• 

  Generate Inputs for the code with context from webMCP

• 

  Generate code with inputs and place it with editable mode for AI using webMCP tooling

Inspiration

Debugging algorithms is still too text-heavy. I wanted agents and humans to collaborate inside a live visual workspace, not just chat about code.

What it does

This Algorithm Visualizer runs Python algorithms, traces variables, and dynamically visualizes arrays, heaps, graphs, trees, DP tables, maps, sets, and scalars. WebMCP tools let an AI agent inspect the workspace, run code, read frames, control playback, configure visuals, and propose code/input changes for human review. It is a human-agent collaborative app powered by WebMCP.

How we built it

Built with React, Vite, Monaco Editor, Pyodide, Web Workers, and WebMCP. The app runs Python in an isolated worker, traces execution state, compiles variables into visual scenes, and exposes browser-native agent tools through document.modelContext.registerTool(...).

We added six WebMCP tools so an agent can inspect the workspace, run the current visualization, read the active frame, control playback, configure visual mappings, and propose Python code/input changes through a human-reviewed red/green diff. Extended Walkthrough available here: https://youtu.be/4DDhY_lC7WI

Key files to explore in the repo include:

• playgroundWebMCP.js
• RuntimePlayground.jsx
• AIFixReview.jsx
• RuntimePlayground.css

Challenges we ran into

The hardest parts were keeping agent actions safe, handling large code/input context, and making generic visualizers work across very different data structures.

Accomplishments that we're proud of

The agent can operate the app through real structured tools instead of screen guessing. Code/input edits are review-gated with red/green diffs, while visual/playback changes can happen dynamically.

What we learned

WebMCP works best when tools are small, structured, and grounded in the visible UI state. Good agent collaboration needs boundaries as much as capability.

What's next for Agentic Algorithm Visualizer

Add more automatic structure inference, richer heap/tree/graph layouts, hosted cloud AI providers, and shareable visualization sessions.

Built With

• aiagents
• algorithmvisualization
• css
• datastructures
• html
• javascript
• monacoeditor
• ollama
• pyodide
• python
• react
• vite
• webmcp
• webworkers