All components (244)

Agent workflow

AI · AgentWorkflowEditor · .amset-flow

What it is and when to use it

The workflow editor of an AI agent: the workflow editor with the steps of an agent already in place and translated.

When to use it

Designing how an agent works: what it does with the message, when it uses a tool, when it asks a person for permission and what it replies.
It brings six steps: user message, model, tool, condition (with "Yes" and "No"), human approval (with "Approved" and "Rejected") and reply. extraTypes adds your own.
It allows loops by default, because an agent goes back to the model after using a tool.
The rest is like WorkflowBuilder: value, onChange, runState to follow a run and readOnly.

When not to

A workflow that is not an agent's: WorkflowBuilder with your types.
It does not run the agent: it hands out the workflow; running it is the server's job.

Keyboard: that of the workflow editor, with the connections panel as the path without a mouse.

Accessibility: that of the workflow editor; the names of the steps and their outputs come out in the user's language.

Fine appearance: the --amset-flow-* variables of the workflow editor.

What it looks like

Node type

Drag a node or move it with the arrows. Press an output and then an input to connect them. Delete removes the chosen node.

<AgentWorkflowEditor
  label="Order assistant flow"
  value={flujo}
  onChange={setFlujo}
  height="26rem"
/>

Props

Import it with import { AgentWorkflowEditor } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	Which workflow it is («Customer onboarding»). Required.
`onChange`required	`(value: Workflow) => void`	—
`value`required	`Workflow`	—
`acyclic`	`boolean`	Do not allow closing loops. Off by default: an agent goes back to the model after using a tool.
`className`	`string`	Merged with the library classes; it does not replace them.
`extraTypes`	`readonly WorkflowNodeType[]`	Own node types added to an agent's (a specific tool, a subagent).
`height`	`string`	The height of the canvas. 32 rem by default.
`readOnly`	`boolean`	It can be seen and moved through, but it does not change.
`runState`	`Readonly<Record<string, NodeRunState>>`	The state of each node in a run (running, done, with an error), to follow it on the canvas.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-flow-dot`	`var(--amset-border)`
`--amset-flow-line`	`var(--amset-ink-2)`

How to change it

.amset-flow {
  --amset-flow-dot: ...;
  --amset-flow-line: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: