See Your LangGraph Agent Execute in Real Time

The submission for the Hacktoberfest Weekend Challenge is a tool called LangGraphics, designed to visualize the real-time execution of agents built using LangGraph. The creator built LangGraphics for a team that was struggling with debugging their complex agent system. As the agent graph grew in size and complexity with conditional routing, reflection loops, and nested subgraphs, debugging became an arduous task.

The team had to manually reconstruct the execution path from flat log streams, making it difficult to identify which branch fired, how many times a loop ran, or which nodes failed and what state they left behind.

LangGraphics was created to address this issue by providing a simple, local, and account-free solution. To use LangGraphics, one only needs to add a single line of code to their existing LangGraph agent workflow, using the `watch` function. This line of code is all that's required to open a live visualization of the agent's execution path in a browser tab, which updates in real-time as the agent runs.

LangGraphics listens to the framework's public hooks, enabling it to track the agent's execution without modifying its behavior. The visualization is built using React and React Flow, and animates the agent's graph instead of a nested list of calls. The tool also provides an inspector panel to view what each step received and returned, along with latency, token, and cost information.

LangGraphics is open-source, and its creation was made possible due to LangGraph's open nature. By staying open, LangGraphics enables other agent frameworks built on LangGraph to work with it for free, fostering open innovation in the field.