NetPad: A Personal Journey into Visual Agentic AI Development

Develop agentic workflows in line with industry standards (AG-UI, A2A) visually... think Figma for Agents

By Michael Lynn • 5/22/2025

Share this article:

NetPad: A Personal Journey into Visual Agentic AI Development

Introduction

As a developer advocate and MongoDB expert, I've spent years helping developers build complex applications. But in late 2023, as the AI revolution accelerated, I found myself increasingly frustrated with the gap between the promise of agentic AI and the reality of building production-ready systems. This frustration became the catalyst for NetPad—a project that has evolved from a simple diagram editor into what I believe is the future of agentic workflow development.

The Problem That Started It All

Like many developers, I was excited about the potential of large language models (LLMs) and multi-agent systems. I dove into LangChain, explored CrewAI, and experimented with various frameworks. But as I tried to build anything beyond simple prototypes, I kept hitting the same walls:

Code-first complexity: Even simple workflows required hundreds of lines of orchestration code
Debugging nightmares: When agents failed, tracing the problem through nested function calls was painful
Team collaboration barriers: Non-technical stakeholders couldn't contribute to or even understand the workflows
Production deployment challenges: Moving from prototype to production-ready systems felt like rebuilding everything

I remember spending an entire weekend trying to debug a three-agent research workflow that worked perfectly in my local environment but failed mysteriously in production. The problem? A context variable that wasn't being passed correctly between agents. It should have been a five-minute fix, but the code-first approach made it nearly impossible to visualize the data flow.

That's when I realized we needed a different approach entirely.

The Vision: "Figma for Agentic Workflows"

The breakthrough came when I was watching my designer colleague effortlessly create complex user interfaces in Figma. She could see every component, understand the relationships at a glance, and collaborate with our entire team—developers, product managers, and stakeholders—all working together on the same visual canvas.

I thought: "What if we could build agentic AI workflows the same way?"

What if instead of writing complex orchestration code, developers could:

Visually compose agents, tools, and data flows
See the entire system at a glance, understanding relationships and dependencies
Debug visually by watching data flow through the system in real-time
Collaborate seamlessly with domain experts who understand the business logic but not the code

That vision became NetPad.

Technical Philosophy: MongoDB-First, Visual-First

From the beginning, I made several key architectural decisions that would shape NetPad's development:

1. MongoDB Atlas as the Foundation

Having worked extensively with MongoDB, I knew that the flexibility of a document database would be crucial for storing complex, evolving workflow definitions. Unlike rigid SQL schemas, MongoDB allows NetPad to store:

Arbitrary node configurations without predefined schema constraints
Dynamic properties that vary by node type
Rich metadata including execution history, user annotations, and collaboration data
Flexible relationships between workflows, templates, and user preferences

2. JSON DSL as the Universal Language

I designed NetPad around a canonical JSON Domain Specific Language (DSL) that serves as the single source of truth for all workflows:

json{
  "nodes": [
    {
      "id": "agent1",
      "type": "agent_node",
      "x": 100,
      "y": 100,
      "params": {
        "prompt": "Analyze the provided data...",
        "model": "gpt-4",
        "temperature": 0.7
      }
    }
  ],
  "edges": [
    {
      "from": "input1",
      "to": "agent1",
      "type": "data_flow"
    }
  ]
}

This approach means workflows can be:

Version controlled like code
Exported/imported between environments
Generated programmatically by AI assistants
Validated against schemas
Executed consistently across different runtime environments

3. React + Material UI for Professional UX

Rather than building yet another developer tool with a spartan interface, I chose Material UI to create a professional-grade experience that could scale from individual developers to enterprise teams. The visual interface needed to be as polished as the AI systems it would create.

The Development Journey: Key Milestones

Phase 1: The SVG Canvas Foundation (Months 1-3)

The project started as an SVG-based diagram editor. I built a custom canvas system that could handle:

Drag-and-drop shape creation
Real-time connections between nodes
Pan/zoom/selection interactions
Shape property editing

This foundation taught me the importance of separating visual representation from logical workflow definition—a principle that would prove crucial as complexity grew.

Phase 2: The Node Type System (Months 4-6)

As I added more node types—agents, tools, APIs, databases—I realized I needed a sophisticated registry system. The breakthrough was creating a modular, data-driven approach where new node types could be defined declaratively:

javascript// shapeRegistryData.js
agent_node: {
  type: 'agent_node',
  label: 'Agent Node',
  description: 'An autonomous reasoning or orchestration node',
  propertyDefs: [
    { name: 'prompt', type: 'string', section: 'Agent', multiline: true },
    { name: 'temperature', type: 'number', section: 'LLM', min: 0, max: 2 }
  ],
  ports: {
    input: [{ id: 'context_in', name: 'Context In' }],
    output: [{ id: 'tool_out', name: 'Tool Out' }]
  }
}

This system now supports 47+ node types, from basic shapes to sophisticated AI components.

Phase 3: The Execution Engine (Months 7-9)

Building a reliable workflow execution engine was perhaps the most challenging phase. I developed a port-based I/O system where:

Nodes receive inputs and produce outputs
Context flows between nodes seamlessly
Errors are captured and reported visually
State is preserved for debugging and replay

The execution engine supports both step-by-step debugging and full automation, with comprehensive logging stored in MongoDB for later analysis.

Phase 4: The mCP Integration (Months 10-12)

The Model-Component-Property (mCP) system emerged from the need to standardize how NetPad communicates with external systems. Using Zod for validation, I created a unified command interface that handles:

LLM interactions across multiple providers (OpenAI, Anthropic, Ollama)
Tool execution with proper sandboxing and error handling
Database operations including MongoDB and vector search
External API calls with authentication and retry logic

This system makes NetPad truly extensible—new capabilities can be added without modifying core execution logic.

Personal Motivations: Democratizing AI Development

Making AI Accessible to Domain Experts

One of my strongest motivations is enabling domain experts—people who understand business problems deeply but may not be programmers—to participate directly in AI solution development.

I've watched talented product managers, designers, and subject matter experts struggle to communicate their requirements to engineering teams building AI systems. With NetPad, these experts can:

Prototype workflows directly, testing their logic visually
Iterate rapidly without waiting for development cycles
Collaborate seamlessly with technical teams
Understand system behavior through visual debugging

Accelerating Developer Productivity

For developers, NetPad represents a fundamental shift from low-level orchestration code to high-level visual composition. Instead of writing boilerplate connection logic, developers can focus on the unique value of their applications:

Agent behavior and prompt engineering
Tool integration and custom capabilities
Error handling and edge cases
Performance optimization and scaling

Building for Production from Day One

Having seen too many AI prototypes fail to reach production, I designed NetPad with enterprise requirements in mind:

Security: Role-based access control, secure credential storage, audit logging
Scalability: MongoDB Atlas clustering, horizontal execution scaling
Reliability: Comprehensive error handling, state recovery, execution replay
Governance: Version control, approval workflows, compliance tracking

Technical Innovations

Visual Debugging Revolution

One of NetPad's most powerful features is its visual debugging capability. When a workflow executes, users can:

Watch data flow in real-time as connections light up
Inspect state at any node with rich data visualization
Step through execution like debugging code
Replay failures to understand what went wrong

This transforms debugging from a frustrating guessing game into a systematic investigation process.

AI-Assisted Development

NetPad itself leverages AI to help users build better workflows:

Workflow generation from natural language descriptions
Node suggestion based on context and patterns
Error diagnosis with AI-powered recommendations
Pattern recognition to suggest improvements

Semantic Tool Discovery

Using MongoDB Atlas Vector Search, NetPad can automatically discover relevant tools for agent nodes based on semantic similarity. This means agents can dynamically find and use the most appropriate tools for their current context.

The Future: Collaborative AI Development

Looking ahead, I see NetPad evolving into a comprehensive platform for collaborative AI development:

Real-Time Collaboration

Multi-user editing with real-time synchronization, allowing distributed teams to build workflows together like they would edit a Google Doc.

AI Co-Design

AI assistants that help users design better workflows, suggest optimizations, and identify potential issues before they occur.

Enterprise Integration

Deep integration with enterprise systems, supporting complex approval workflows, compliance requirements, and security policies.

Community Ecosystem

A marketplace of workflow templates, custom node types, and integration patterns contributed by the community.

Lessons Learned

1. Visual Representation Matters More Than Expected

Initially, I thought the visual interface was just a nice-to-have. I've learned that visual representation fundamentally changes how people think about and approach problems. Complex multi-agent systems become manageable when you can see the big picture.

2. MongoDB's Flexibility Is Crucial for AI Applications

The ability to store arbitrary, evolving data structures without schema migrations has been invaluable. AI applications are inherently experimental, and rigid database schemas would have slowed development significantly.

3. Developer Experience Drives Adoption

No matter how powerful the underlying technology, if the developer experience isn't excellent, adoption suffers. Investing heavily in UX, documentation, and developer tools has been essential.

4. Community Feedback Shapes Everything

The most important features and architectural decisions have come from watching real users struggle with real problems. Building in public and gathering continuous feedback has been transformative.

The Bigger Picture: Why This Matters

I believe we're at an inflection point in software development. Just as visual design tools revolutionized how we create user interfaces, visual development tools will revolutionize how we create AI systems.

NetPad represents my bet on a future where:

AI development is collaborative, not siloed
Complex systems are comprehensible, not mysterious black boxes
Innovation is accessible, not limited to ML PhD holders
Production deployment is straightforward, not a months-long engineering project

Getting Started

NetPad is open source and available at netpad.io. Whether you're a developer frustrated with current AI development tools, a domain expert wanting to prototype AI solutions, or an enterprise team needing production-ready agentic workflows, I'd love to hear your feedback and see what you build.

The future of AI development is visual, collaborative, and accessible. NetPad is my contribution to making that future a reality.

Michael Lynn is a developer advocate, MongoDB expert, and the creator of NetPad.