Skip to content

Building agents

The canvas builder

Wire an agent's tools and logic by hand on a React Flow node graph.

3 min read

The canvas is the node-graph view of an agent: every tool call, branch, and condition is a node you can see, connect, and edit directly. It's the same underlying graph the conversational builder produces — the canvas just gives you direct control over it.

What it is

Each node on the canvas represents one step an agent can take: a tool call (code_execution, api_call, knowledge_search, connector_action, an mcp tool, or a subagent delegation), a condition, or a data transformation. Edges between nodes represent the flow of control and data from one step to the next. Clicking a node shows its configuration — arguments, validation, and (for destructive actions) whether it sits behind an approval gate.

The canvas is built on React Flow and is desktop-only: laying out and wiring a graph by hand needs a large viewport and precise pointer control, so it isn't available on mobile. It supports graphs of up to roughly 50 nodes, which comfortably covers agents with real branching logic without becoming unwieldy to navigate.

Wiring nodes by hand

Building on the canvas means:

  • Dragging in a node for each tool or step you want the agent to have access to.
  • Connecting nodes with edges to define what happens after each step succeeds, fails, or needs a decision.
  • Configuring each node's arguments directly, rather than describing them in words.
  • Adding approval gates explicitly on any node that performs a destructive or consequential action.

This gives you precise control that a text description can't always capture — exact branching conditions, specific argument mappings between steps, and fine-grained approval placement.

Canvas vs. conversation

Both builders produce and read the same node graph, so the choice is about workflow, not capability.

Reach for the conversational builder when:

  • You're scaffolding an agent from scratch and don't yet know the exact wiring you need.
  • The logic is simple enough to describe in a sentence or two.
  • You want to iterate quickly by describing changes rather than rewiring nodes.

Drop down to the canvas when:

  • You need exact control over branching logic or how one step's output maps into the next step's arguments.
  • You're adding a node type or connector the conversation didn't cover.
  • You want to inspect precisely how a tool call, condition, or approval gate is configured before trusting it with real data.
  • The agent has grown complex enough that seeing the whole graph at once — rather than describing changes piecemeal — is the faster way to work.

In practice, most agents are built by moving between the two: start a conversation to get a working first draft, then open the canvas to refine wiring, add nodes, or verify configuration before release.

Testing from the canvas

You can run an agent directly from the canvas the same way you would from the conversational builder. The run executes through the agentic harness — a bounded, multi-turn tool-calling loop — so you see the same step-by-step behavior, argument validation, and approval gates that the deployed agent will use. Nodes update to reflect the live run, making it easy to spot exactly which step produced an unexpected result.

Still stuck? We're happy to help.

Contact support
The canvas builder · RunAIAgents · RunAIAgents