Visualizing AI Agent Workflows with MarinaBox — Openthropic: A New Interactive UI

Introduction

In the pursuit of building smarter and more human-like AI agents, monitoring their actions and understanding their decision-making processes is critical. At MarinaBox, we’ve taken a step forward by introducing an interactive UI that brings the AI agent’s workflow to life.

This UI complements the powerful Langgraph-based architecture discussed earlier, allowing users to:

• Provide a prompt to the agent.
• Observe actions taken on the browser in real-time.
• Monitor logs of how different nodes in the graph interact to achieve the desired solution.

Image 1: This image shows the starting point of the Agent workflow. On top you have the session Id, the Browser session on the left is where you would see the agent at work, on the right you will see the logs of the agents and will be able to monitors the nodes and their action. On the bottom you have promp bar to give a task to your agent.

Key Features of the UI

1. Real-Time Browser View
   Watch the agent navigate through web tasks directly in the UI. Whether it’s Claude’s Vision node describing the page or Claude’s Computer node performing the next action, the browser view updates live.
2. Comprehensive Logs Panel
   Dive into detailed logs showing the interaction between nodes like:

• Claude the Vision Guy: Describing what’s on the page.
• Sam the Thinker: Deciding the next step based on observations.
• Should Continue: Deciding whether to proceed or end the workflow.
• Claude the Computer Guy: Executing the action.

Image 2: This is the Agent working on the prompt : “Go to Amazon.com and search for t-shirts”

1. Seamless Prompt Integration
   Enter prompts directly into the UI, triggering the agent’s workflow. You can see how the agent processes the task from the thinking stage to execution.
2. Intuitive Interface
   The UI is designed to be accessible, even for first-time users. It provides an overview of the graph-based decision process, making it easy to follow the agent’s logic.

How to run it locally

The UI seamlessly integrates with the MarinaBox SDK. Here’s how you can try it:

1. Clone the MarinaBox repository.
2. Run the frontend : npm run dev
3. Run the backend server :
4. Run the openthropic.py file.
5. Enter your prompt and watch the agent in action.

Why This Matters

By enabling users to visualize AI workflows, this UI not only improves debugging and monitoring but also provides invaluable insights into how nodes collaborate to solve tasks. It serves as a tool for both developers and researchers to iterate on AI decision-making strategies more effectively.

Conclusion

This UI transforms MarinaBox from a powerful toolkit into a comprehensive visualization platform, allowing users to experience the full potential of AI agents in action. Whether you’re experimenting with Claude Computer-Use or building your custom nodes, this interface bridges the gap between code and execution.

Try it yourself and let us know your thoughts. We’re excited to see how you’ll leverage this UI to push AI agent capabilities even further!