Workflow¶

An agent run as a graph.

Canvas / Node / Edge¶

An agent run as a graph: nodes, edges, labels, pan and zoom.

Canvas / Node / Edge


API	`WorkflowCanvas(nodes, edges), agentRunGraph(message)`
AI Elements	`Canvas, Node, Edge, Controls, Panel, Toolbar`
Artifact	`ai-elements-ui`
Reference	WorkflowCanvas

Use stable node ids and edges referring to them; positions are dp. Give the canvas a bounded size. Use nodeContent/nodeToolbar/panel slots to customize.

import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import dev.ai.elements.ui.workflow.CanvasEdge
import dev.ai.elements.ui.workflow.CanvasNode
import dev.ai.elements.ui.workflow.WorkflowCanvas

@Composable
fun WorkflowCanvasExample() {
    WorkflowCanvas(nodes = listOf(CanvasNode("start", "Start"), CanvasNode("end", "Done", position = androidx.compose.ui.unit.DpOffset(0.dp, 140.dp))), edges = listOf(CanvasEdge("start", "end")), modifier = Modifier.height(320.dp))
}