Reference

JSX facade

Author Wire diagrams as React children of <Flow>. The walker compiles the tree to canonical JSON and either renders inline SVG or hands the JSON back through onCompile.

Example

Each node component is a marker — it doesn’t render anything itself. <Flow> walks its children, compiles them to a WireDiagram, and renders SVG (default) or fires onCompile in JSON mode.

tsx

import {
  Flow,
  TriggerNode,
  AINode,
  ConditionNode,
  ActionNode,
  Note,
  Group
} from "@aigentive/wire-react";

export function SupportAgent() {
  return (
    <Flow layout="LR" id="support-agent" title="Support agent">
      <TriggerNode id="webhook" title="Webhook fires" />
      <AINode id="classify" title="Classify intent" from="webhook" model="gpt-5.4-mini" />
      <ConditionNode
        id="route"
        title="Route request"
        from="classify"
        branches={["sales", "support", "other"]}
      />
      <ActionNode id="notify-sales" title="Notify sales" from="route.sales" tone="success" />
      <ActionNode id="open-ticket" title="Open ticket"  from="route.support" tone="warning" />
      <Note id="risk-note" title="Routing risk" attachedTo="classify">
        Check confidence before routing.
      </Note>
    </Flow>
  );
}

Node components

Twelve marker components, one per kind. The compile walker maps each to a node in the canonical diagram.

Component	Wire kind	Extra props
<TriggerNode>	trigger	—
<ActionNode>	action	—
<AINode>	ai	model?, prompt?, tools?
<ToolNode>	tool	ref?
<ConditionNode>	condition	branches: string[] (required)
<HumanNode>	human	—
<MemoryNode>	memory	—
<RetrievalNode>	retrieval	—
<GuardrailNode>	guardrail	—
<EndNode>	end	—
<Note>	note	body? or children, attachedTo?
<Group>	group	children become members; parent auto-set

Base props (every node)

Every node component accepts the same base props plus its kind-specific extras. Anything you set lands verbatim on the compiled WireNode.

Prop	Type	Purpose
id	string	Stable identifier. Required if other nodes reference this one.
title	string	Display title shown in cards, lists, and SVG.
description	string	Optional subtitle / longer text rendered by some cards.
tone	"default" \| "success" \| "warning" \| "error" \| "info" \| "ai"	Visual tone for the card.
from	string \| string[]	Source node(s) for the implicit edge. Use `id.branch` from a condition.
after	string \| string[]	Alias for `from`. Pick whichever reads better.
attachedTo	string	Notes/annotations only — visual association with a target node.
parent	string	Group nesting. Set automatically when nested inside `<Group>`.
data	Record<string, unknown>	Free-form data bag. `data.options` is where most option values land.
position	{ x: number; y: number }	Manual position. Layout engine fills in when omitted.
size	{ width: number; height: number }	Manual size. Defaults to renderer-measured dimensions.

<Flow> props

The compiler decides what mode to render in and emits the canonical JSON to onCompile.

Prop	Type	Purpose
layout	"LR" \| "TB" \| "RL" \| "BT"	Layout direction (default LR).
id	string	Diagram id stamped onto the compiled JSON.
title	string	Diagram title.
mode	"svg" \| "json"	Render mode. Default `svg`. Use `json` for headless compile.
onCompile	(diagram: WireDiagram) => void	Fires once with the canonical compiled JSON. Pair with `mode="json"` to capture without rendering.
renderToSvgOptions	RenderSvgOptions	Forwarded to `renderToSvg` when in svg mode (padding, background, tone colors, etc.).
className	string	Class on the wrapping element (svg or div) for styling hooks.

Render modes

`mode="svg"`

The default. Returns server-renderable inline SVG using renderToSvg. Works in any React tree — server components, RSC, plain SPA, static export. No canvas-engine peer dependency needed.

tsx

<Flow layout="LR" renderToSvgOptions={{ padding: 32, background: "transparent" }}>
  <TriggerNode id="t" title="Tick" />
</Flow>

`mode="json"`

Renders nothing. Fires onCompile once with the canonical WireDiagram. Useful for capturing JSON to send to the MCP server, save to a backend, or hand off to WireProvider.

tsx

<Flow mode="json" onCompile={(diagram) => save(diagram)}>
  <TriggerNode id="t" title="Tick" />
</Flow>

Compile via hook

When you want the JSON without mounting <Flow> at all, useWireDiagram(element) compiles a Flow element synchronously. Pair it with WireProvider to drive your own canvas.

tsx

import { useWireDiagram, WireProvider, WireCanvas } from "@aigentive/wire-react";

function AgentPanel() {
  const diagram = useWireDiagram(
    <Flow layout="LR">
      <TriggerNode id="t" title="Tick" />
      <AINode id="plan" title="Plan" from="t" model="gpt-5.4-mini" />
    </Flow>
  );
  return (
    <WireProvider defaultDiagram={diagram}>
      <WireCanvas mode="view" fitView />
    </WireProvider>
  );
}

NextAPI · Hooks