Building your canvas

How to add nodes to your canvas and connect them to your AI Product.

Your AI Product node sits at the centre of your canvas. Additional nodes extend it — giving Claude different tools, output formats, or live integrations. They only work once they're connected.

📸 Screenshot needed: A complete canvas showing an AI Product node in the centre, an MCP node connected at the top-right, and a Page outcome node connected at the bottom — with visible connection lines between them

Adding a node to the canvas

Available nodes live in the floating toolbar at the bottom of the canvas.

Find the node you want

Hover over each item in the toolbar to see a tooltip explaining what it does.

Drag it onto the canvas

Click and hold on the node item, then drag it onto the canvas. Drop it somewhere near your AI Product node — the positioning is flexible.

Configure it

Once dropped, the node appears on the canvas. Click it to open its settings in the right panel.

📸 Screenshot needed: A node mid-drag from the toolbar onto the canvas — cursor visible, node ghosted, canvas below

Drawing a connection

Once a node is on the canvas, you connect it to your AI Product by drawing a line between the two.

Every node has connection handles — small dots that appear on the edges of the node. Your AI Product has handles at the bottom. Other nodes have handles at the top.

Hover over the source node

Hover your cursor over the AI Product node. The connection handles (small dots) will become visible.

Click and drag from a handle

Click on one of the handles and drag toward the node you want to connect. A line will follow your cursor.

Drop onto the target node

Release the cursor over the target node — you'll see it highlight as you approach. The connection snaps into place.

📸 Screenshot needed: Close-up of a connection line being drawn between two nodes

Available nodes

Output nodes — what your end user receives at the end of the conversation:

Standard — a personalised streamed report, inline in the product
Page — a custom HTML output page you design in the page builder
Advisor — the AI continues as a live advisor after collection is complete

Integration nodes — extend what Claude can do:

AI Agent — a specialist AI step that produces structured analysis (scores, tiers, fields) between collection and output. Required for Page-type products.
MCP — connects any MCP-compatible server so Claude can read from and write to your tools during conversations

Reference Material (background knowledge), web search, and webhooks are not canvas nodes — they're configured in the AI Chat settings, natively available in Claude, and in the product's Webhook settings respectively.

Removing a connection

To remove a connection between two nodes, click on the line connecting them to select it, then press the Delete or Backspace key. This removes the connection but leaves both nodes on the canvas.

To remove a node entirely, click it to select it, then click the Delete button that appears on hover, or press Delete/Backspace.

What a complete product looks like

A complete, functional product typically has:

One AI Product node — configured with questions, a system prompt, and a decision model
One output node — Standard, Page, or Advisor, connected below the AI Product
Optionally: an AI Agent node — sits between the AI Product and a Page output, required for scored/structured design products
Optionally: one or more MCP nodes — for live tool access during conversations

📸 Screenshot needed: A clean, minimal example of a finished canvas — AI Product in the centre, one output node below it, with labelled callouts

The canvas auto-saves as you work, so you can build incrementally without ever losing progress.

Was this page helpful?