See Your LangGraph Agent Execute in Real Time

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

NOTE ON TIMING: LangGraphics isn't a weekend project. Its first commit is from January 2026. This year's rules ask for new projects built within the challenge window, so I'm not presenting this as a prize entry. I'm sharing it because the challenge asks the question this project was built to answer: who did you build it for?

What I Built

I built it for a group of people building an agent system on LangGraph.

Their graph grew the way agent systems do: conditional routing, reflection loops that retry, and subgraphs nested inside subgraphs. Eventually, debugging became the hardest part of the work. When a run went wrong, they had to reconstruct the execution path from a flat log stream. Which branch fired? How many times did the loop run? Which node actually failed, and what state did it get?

LangSmith and LangFuse are capable products, but they got in the way here. Both required accounts and API keys, data had to leave the machine (or you had to deploy a self-hosted stack first), and integrating them took real effort. They also show a tree of spans, not the graph you wrote.

The team needed something much smaller: one line, no account, no API key, fully local, and no change to the agent's behavior. That's LangGraphics.

from langgraphics import watch

graph = watch(workflow.compile())  # ← the only line you add
await graph.ainvoke({"messages": [...]})

A browser tab opens showing your graph, and it updates live as the agent runs.

Demo

Code

proactive-agent / langgraphics

Visualize live LangGraph execution and see how your agent thinks as it runs.

LangGraphics is a live visualization tool for LangGraph-based agent orchestration frameworks such as LangGraph and DeepAgents. It's especially useful when working with large networks graphs with many nodes, branching conditions, and cycles are hard to reason about from the logs alone.

Why it helps

Seeing the execution path visually makes it immediately obvious which branches were taken, where loops occurred, and where the agent got stuck or failed. It also helps when onboarding to an unfamiliar graph - a single run tells you more about the workflow than reading the graph definition ever could.

How to use

One line is all it takes - wrap the compiled graph of your agent workflow with LangGraphics' watch function before invoking it, the visualization opens in your browser automatically, tracks the agent in real time, and makes tracing easy using the inspect panel.

from langgraph.graph import StateGraph, MessagesState
from

…

View on GitHub

How I Built It

I started with the smallest version that could prove the idea: a sample agent running on a local model through Ollama, with its graph lighting up in a browser tab as it ran. LangGraph already knows the shape of a graph and reports each step as it happens, so I didn't ask anyone to annotate their code. LangGraphics just listens through the framework's public hooks, which is why it's one line to add, one line to remove, and never changes how the agent behaves. A tiny local server passes each step to a prebuilt web page, made with React and React Flow, and the page animates the graph you actually designed instead of a long nested list of calls.

Once the prototype worked, I packaged everything into a single pip install with no account, no API key, and no server to deploy, so nothing leaves your machine, and there's no reason to turn it off. From there it grew one need at a time: an inspector to see what each step received and returned, latency, token and cost numbers (with prices from the open models.dev catalog instead of a vendor API), error highlighting, replay, and finally nested subgraphs. Along the way, I deliberately left out long-term storage, dashboards, and evaluations. LangSmith and LangFuse already do those well, and adding them would have brought back the setup cost I set out to remove. Agent frameworks move fast, so automated tests run against several Python and LangGraph versions to keep it working with whatever model sits behind your nodes, whether that's a hosted API or an open-weight model on your laptop.

Why Does Open Innovation Matter?

LangGraphics exists only because LangGraph is open. Its source is public, and so are the hooks it uses to report what happens inside a run. That let me build directly on the framework instead of depending on whatever telemetry a closed runtime chose to expose, inside a dashboard I'd have to pay for. The benefit carries forward: DeepAgents works with LangGraphics for free because it's built on the same open foundation, and any future framework built on LangGraph will too. LangGraphics stays open in the same spirit. It has no backend and no telemetry, and if something's missing, you can read the code and send a PR.

---

If your LangGraph agent has outgrown your logs, run pip install langgraphics and add one line. Issues and PRs are welcome, and a ⭐ helps others find it.