Agent Canvas

THE PROBLEM

Building multi-agent AI pipelines with code is powerful but slow. Developers spend hours wiring together prompts, tools, and outputs in scripts that are hard to debug and even harder to share with non-technical stakeholders. There was no visual-first tool for designing agent chains.

APPROACH

I built a drag-and-drop canvas where each node represents an AI agent with its own model, system prompt, and toolset. Edges define data flow between agents. A single 'Run' button executes the full graph — inputs stream between nodes in real time. The architecture separates the canvas (visual config) from the runtime (execution engine), allowing future export to code.

KEY DECISIONS

• 1

  Used React Flow as the canvas foundation — avoided building graph primitives from scratch.

• 2

  Made each node stateless in the UI; all state lives in a central graph store to make undo/redo trivial.

• 3

  Supported both OpenAI and Anthropic from day one — model lock-in was a top concern from beta testers.

• 4

  Added a 'trace' panel that shows each node's raw input/output to make debugging transparent.

OUTCOME

Shipped MVP on Replit in early 2025. Used by solo developers and small AI teams to prototype agentic workflows without writing boilerplate. Featured in several AI tool roundups. Roadmap includes one-click export to LangGraph and AutoGen schemas.