Agent Workflow

BackAgent WorkflowAI

100%

import { Canvas } from "@/components/ai/canvas";
import { Controls } from "@/components/ai/controls";
import { Edge } from "@/components/ai/edge";
import {
  Node,
  NodeContent,
  NodeDescription,
  NodeFooter,
  NodeHeader,
  NodeTitle,
} from "@/components/ai/node";
import { Panel } from "@/components/ai/panel";
import { Toolbar } from "@/components/ai/toolbar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ElevationProvider } from "@/components/ui/elevation";
import { IconPlaceholder } from "@/edmi/icon-placeholder";
import { edges, legend, nodes, type StepData } from "./data";

const nodeTypes = {
  step: ({ data, selected }: { data: StepData; selected?: boolean }) => (
    <>
      {data.toolbar && (
        <Toolbar isVisible={selected}>
          <Button size="icon-xs" variant="ghost" aria-label="Settings">
            <IconPlaceholder
              lucide="SettingsIcon"
              tabler="IconSettings"
              hugeicons="Settings01Icon"
              phosphor="GearIcon"
              remixicon="RiSettings3Line"
            />
          </Button>
          <Button size="icon-xs" variant="ghost" aria-label="Duplicate">
            <IconPlaceholder
              lucide="CopyIcon"
              tabler="IconCopy"
              hugeicons="Copy01Icon"
              phosphor="CopyIcon"
              remixicon="RiFileCopyLine"
            />
          </Button>
          <Button size="icon-xs" variant="ghost" aria-label="Delete">
            <IconPlaceholder
              lucide="Trash2Icon"
              tabler="IconTrash"
              hugeicons="Delete02Icon"
              phosphor="TrashIcon"
              remixicon="RiDeleteBinLine"
            />
          </Button>
        </Toolbar>
      )}
      <Node handles={data.handles} selected={selected}>
        <NodeHeader>
          <NodeTitle>{data.title}</NodeTitle>
          {data.description && (
            <NodeDescription>{data.description}</NodeDescription>
          )}
        </NodeHeader>
        {(data.body || data.badges || data.actions) && (
          <NodeContent
            className={data.badges || data.actions ? "flex gap-1.5" : undefined}
          >
            {data.badges ? (
              <>
                <Badge variant="success">{data.badges[0]}</Badge>
                <Badge variant="outline">{data.badges[1]}</Badge>
              </>
            ) : data.actions ? (
              <>
                <Button size="xs">{data.actions[0]}</Button>
                <Button size="xs" variant="outline">
                  {data.actions[1]}
                </Button>
              </>
            ) : data.bodyBadge ? (
              <Badge variant="secondary">{data.body}</Badge>
            ) : (
              <span className="font-mono text-xs">{data.body}</span>
            )}
          </NodeContent>
        )}
        {data.footer && <NodeFooter>{data.footer}</NodeFooter>}
      </Node>
    </>
  ),
};

const edgeTypes = {
  animated: Edge.Animated,
  temporary: Edge.Temporary,
};

export default function WorkflowExample() {
  return (
    <ElevationProvider mode="layered">
      <div className="h-svh min-h-96 w-full bg-background text-foreground">
        <Canvas
          edges={edges}
          edgeTypes={edgeTypes}
          nodes={nodes}
          nodeTypes={nodeTypes}
        >
          <Controls position="bottom-left" />
          <Panel position="top-left" className="px-3 py-2.5 text-xs">
            <p className="mb-1.5 font-semibold">Legend</p>
            {legend.map((item, i) => (
              <p
                key={item.label}
                className={
                  i ? "mt-1 flex items-center gap-2" : "flex items-center gap-2"
                }
              >
                <svg aria-hidden="true" height="6" width="26">
                  <path
                    d="M0 3h26"
                    stroke={item.color}
                    strokeDasharray={item.dash}
                    strokeWidth="1.6"
                  />
                </svg>
                {item.label}
              </p>
            ))}
          </Panel>
          <Panel position="top-right" className="flex items-center gap-1.5">
            <Button size="sm">
              <IconPlaceholder
                lucide="PlayIcon"
                tabler="IconPlayerPlay"
                hugeicons="PlayIcon"
                phosphor="PlayIcon"
                remixicon="RiPlayLine"
                className="size-3.5"
              />
              Run
            </Button>
            <Button size="sm" variant="outline">
              Save
            </Button>
          </Panel>
        </Canvas>
      </div>
    </ElevationProvider>
  );
}

// Sample data for the Agent workflow example. Shared by react.tsx, vue.vue and svelte.svelte: the same
// nodes and edges feed React Flow, Vue Flow and Svelte Flow.

export type StepData = {
  title: string;
  description?: string;
  /** Monospace line in the node body. */
  body?: string;
  /** `body` rendered as a secondary badge (the trigger schedule). */
  bodyBadge?: boolean;
  footer?: string;
  /** Decision answers: first = success badge, second = outline badge. */
  badges?: string[];
  /** Buttons in the body (`Approve`, `Reject`). */
  actions?: string[];
  /** Show the node toolbar while the node is selected. */
  toolbar?: boolean;
  handles: { target: boolean; source: boolean };
};

export type FlowNode = {
  id: string;
  type: "step";
  position: { x: number; y: number };
  selected?: boolean;
  data: StepData;
};

export type FlowEdge = {
  id: string;
  source: string;
  target: string;
  type?: "animated" | "temporary";
};

export const nodes: FlowNode[] = [
  {
    id: "start",
    type: "step",
    position: { x: 0, y: 110 },
    data: {
      title: "Start",
      description: "Trigger · every hour",
      body: "cron 0 * * * *",
      bodyBadge: true,
      handles: { target: false, source: true },
    },
  },
  {
    id: "drift",
    type: "step",
    position: { x: 330, y: 0 },
    data: {
      title: "Check drift",
      description: "Tool · get_prices",
      body: "MAG4 drift: 2.4%",
      footer: "412 ms",
      handles: { target: true, source: true },
    },
  },
  {
    id: "post",
    type: "step",
    position: { x: 330, y: 200 },
    data: {
      title: "Draft feed post",
      description: "Agent · writer",
      body: "Writing...",
      footer: "running",
      handles: { target: true, source: true },
    },
  },
  {
    id: "decision",
    type: "step",
    position: { x: 680, y: 0 },
    selected: true,
    data: {
      title: "Decision",
      description: "drift > 2%?",
      badges: ["yes", "no"],
      toolbar: true,
      handles: { target: true, source: true },
    },
  },
  {
    id: "approval",
    type: "step",
    position: { x: 680, y: 200 },
    data: {
      title: "Ask approval",
      description: "Human in the loop",
      actions: ["Approve", "Reject"],
      handles: { target: true, source: false },
    },
  },
];

export const edges: FlowEdge[] = [
  { id: "e1", source: "start", target: "drift", type: "animated" },
  { id: "e2", source: "start", target: "post" },
  { id: "e3", source: "drift", target: "decision", type: "animated" },
  { id: "e4", source: "drift", target: "approval", type: "temporary" },
];

export const legend = [
  { label: "active flow", color: "var(--brand)", dash: "6 5" },
  { label: "conditional", color: "var(--muted-foreground-2)", dash: "2 5" },
];

<script setup lang="ts">
import { ElevationProvider } from "@/components/ui/elevation"
import { CopyIcon, PlayIcon, SettingsIcon, Trash2Icon } from "@lucide/vue";
import { markRaw } from "vue";
import { Canvas } from "@/components/ai/canvas";
import { Controls } from "@/components/ai/controls";
import { Edge } from "@/components/ai/edge";
import {
  Node,
  NodeContent,
  NodeDescription,
  NodeFooter,
  NodeHeader,
  NodeTitle,
} from "@/components/ai/node";
import { Panel } from "@/components/ai/panel";
import { Toolbar } from "@/components/ai/toolbar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { edges, legend, nodes } from "./data";

const edgeTypes = { animated: markRaw(Edge.Animated), temporary: markRaw(Edge.Temporary) };
</script>

<template>
  <ElevationProvider mode="layered">
  <div class="h-svh min-h-96 w-full bg-background text-foreground">
    <Canvas :nodes="nodes" :edges="edges" :edge-types="edgeTypes">
      <template #node-step="{ data, selected }">
        <Toolbar v-if="data.toolbar" :is-visible="selected">
          <Button size="icon-xs" variant="ghost" aria-label="Settings"><SettingsIcon /></Button>
          <Button size="icon-xs" variant="ghost" aria-label="Duplicate"><CopyIcon /></Button>
          <Button size="icon-xs" variant="ghost" aria-label="Delete"><Trash2Icon /></Button>
        </Toolbar>
        <Node :handles="data.handles" :selected="selected">
          <NodeHeader>
            <NodeTitle>{{ data.title }}</NodeTitle>
            <NodeDescription v-if="data.description">{{ data.description }}</NodeDescription>
          </NodeHeader>
          <NodeContent v-if="data.body || data.badges || data.actions" :class="data.badges || data.actions ? 'flex gap-1.5' : undefined">
            <template v-if="data.badges">
              <Badge variant="success">{{ data.badges[0] }}</Badge>
              <Badge variant="outline">{{ data.badges[1] }}</Badge>
            </template>
            <template v-else-if="data.actions">
              <Button size="xs">{{ data.actions[0] }}</Button>
              <Button size="xs" variant="outline">{{ data.actions[1] }}</Button>
            </template>
            <Badge v-else-if="data.bodyBadge" variant="secondary">{{ data.body }}</Badge>
            <span v-else class="font-mono text-xs">{{ data.body }}</span>
          </NodeContent>
          <NodeFooter v-if="data.footer">{{ data.footer }}</NodeFooter>
        </Node>
      </template>
      <Controls position="bottom-left" />
      <Panel position="top-left" class="px-3 py-2.5 text-xs">
        <p class="mb-1.5 font-semibold">Legend</p>
        <p v-for="(item, i) in legend" :key="item.label" :class="i ? 'mt-1 flex items-center gap-2' : 'flex items-center gap-2'">
          <svg aria-hidden="true" height="6" width="26"><path d="M0 3h26" :stroke="item.color" :stroke-dasharray="item.dash" stroke-width="1.6" /></svg>
          {{ item.label }}
        </p>
      </Panel>
      <Panel position="top-right" class="flex items-center gap-1.5">
        <Button size="sm">
          <PlayIcon class="size-3.5" />
          Run
        </Button>
        <Button size="sm" variant="outline">Save</Button>
      </Panel>
    </Canvas>
  </div>
  </ElevationProvider>
</template>

// Sample data for the Agent workflow example. Shared by react.tsx, vue.vue and svelte.svelte: the same
// nodes and edges feed React Flow, Vue Flow and Svelte Flow.

export type StepData = {
  title: string;
  description?: string;
  /** Monospace line in the node body. */
  body?: string;
  /** `body` rendered as a secondary badge (the trigger schedule). */
  bodyBadge?: boolean;
  footer?: string;
  /** Decision answers: first = success badge, second = outline badge. */
  badges?: string[];
  /** Buttons in the body (`Approve`, `Reject`). */
  actions?: string[];
  /** Show the node toolbar while the node is selected. */
  toolbar?: boolean;
  handles: { target: boolean; source: boolean };
};

export type FlowNode = {
  id: string;
  type: "step";
  position: { x: number; y: number };
  selected?: boolean;
  data: StepData;
};

export type FlowEdge = {
  id: string;
  source: string;
  target: string;
  type?: "animated" | "temporary";
};

export const nodes: FlowNode[] = [
  {
    id: "start",
    type: "step",
    position: { x: 0, y: 110 },
    data: {
      title: "Start",
      description: "Trigger · every hour",
      body: "cron 0 * * * *",
      bodyBadge: true,
      handles: { target: false, source: true },
    },
  },
  {
    id: "drift",
    type: "step",
    position: { x: 330, y: 0 },
    data: {
      title: "Check drift",
      description: "Tool · get_prices",
      body: "MAG4 drift: 2.4%",
      footer: "412 ms",
      handles: { target: true, source: true },
    },
  },
  {
    id: "post",
    type: "step",
    position: { x: 330, y: 200 },
    data: {
      title: "Draft feed post",
      description: "Agent · writer",
      body: "Writing...",
      footer: "running",
      handles: { target: true, source: true },
    },
  },
  {
    id: "decision",
    type: "step",
    position: { x: 680, y: 0 },
    selected: true,
    data: {
      title: "Decision",
      description: "drift > 2%?",
      badges: ["yes", "no"],
      toolbar: true,
      handles: { target: true, source: true },
    },
  },
  {
    id: "approval",
    type: "step",
    position: { x: 680, y: 200 },
    data: {
      title: "Ask approval",
      description: "Human in the loop",
      actions: ["Approve", "Reject"],
      handles: { target: true, source: false },
    },
  },
];

export const edges: FlowEdge[] = [
  { id: "e1", source: "start", target: "drift", type: "animated" },
  { id: "e2", source: "start", target: "post" },
  { id: "e3", source: "drift", target: "decision", type: "animated" },
  { id: "e4", source: "drift", target: "approval", type: "temporary" },
];

export const legend = [
  { label: "active flow", color: "var(--brand)", dash: "6 5" },
  { label: "conditional", color: "var(--muted-foreground-2)", dash: "2 5" },
];

<script lang="ts">
  import { ElevationProvider } from "$lib/components/ui/elevation";
  import { Canvas } from "$lib/components/ai/canvas";
  import { Controls } from "$lib/components/ai/controls";
  import { Edge } from "$lib/components/ai/edge";
  import { Panel } from "$lib/components/ai/panel";
  import { Button } from "$lib/components/ui/button";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import { edges as edgeData, legend, nodes as nodeData } from "./data";
  import Step from "./svelte/step.svelte";

  const nodeTypes = { step: Step };
  const edgeTypes = { animated: Edge.Animated, temporary: Edge.Temporary };

  let nodes = $state.raw(nodeData);
  let edges = $state.raw(edgeData);
</script>

<ElevationProvider mode="layered">
<div class="h-svh min-h-96 w-full bg-background text-foreground">
  <Canvas bind:nodes bind:edges {nodeTypes} {edgeTypes}>
    <Controls position="bottom-left" />
    <Panel position="top-left" class="px-3 py-2.5 text-xs">
      <p class="mb-1.5 font-semibold">Legend</p>
      {#each legend as item, i (item.label)}
        <p class={i ? "mt-1 flex items-center gap-2" : "flex items-center gap-2"}>
          <svg aria-hidden="true" height="6" width="26">
            <path d="M0 3h26" stroke={item.color} stroke-dasharray={item.dash} stroke-width="1.6" />
          </svg>
          {item.label}
        </p>
      {/each}
    </Panel>
    <Panel position="top-right" class="flex items-center gap-1.5">
      <Button size="sm">
        <IconPlaceholder
          lucide="PlayIcon"
          tabler="IconPlayerPlay"
          hugeicons="PlayIcon"
          phosphor="PlayIcon"
          remixicon="RiPlayLine"
          class="size-3.5"
        />
        Run
      </Button>
      <Button size="sm" variant="outline">Save</Button>
    </Panel>
  </Canvas>
</div>
</ElevationProvider>

<script lang="ts">
  import { Node, NodeContent, NodeDescription, NodeFooter, NodeHeader, NodeTitle } from "$lib/components/ai/node";
  import { Toolbar } from "$lib/components/ai/toolbar";
  import { Badge } from "$lib/components/ui/badge";
  import { Button } from "$lib/components/ui/button";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";

  // Node type of the workflow (Svelte Flow node types must be components); same shape as `StepData` in data.ts.
  type StepData = {
    title: string;
    description?: string;
    body?: string;
    bodyBadge?: boolean;
    footer?: string;
    badges?: string[];
    actions?: string[];
    toolbar?: boolean;
    handles: { target: boolean; source: boolean };
  };
  let { data, selected = false }: { data: StepData; selected?: boolean } = $props();
</script>

{#if data.toolbar}
  <Toolbar isVisible={selected}>
    <Button size="icon-xs" variant="ghost" aria-label="Settings">
      <IconPlaceholder
        lucide="SettingsIcon"
        tabler="IconSettings"
        hugeicons="Settings01Icon"
        phosphor="GearIcon"
        remixicon="RiSettings3Line"
      />
    </Button>
    <Button size="icon-xs" variant="ghost" aria-label="Duplicate">
      <IconPlaceholder
        lucide="CopyIcon"
        tabler="IconCopy"
        hugeicons="Copy01Icon"
        phosphor="CopyIcon"
        remixicon="RiFileCopyLine"
      />
    </Button>
    <Button size="icon-xs" variant="ghost" aria-label="Delete">
      <IconPlaceholder
        lucide="Trash2Icon"
        tabler="IconTrash"
        hugeicons="Delete02Icon"
        phosphor="TrashIcon"
        remixicon="RiDeleteBinLine"
      />
    </Button>
  </Toolbar>
{/if}
<Node handles={data.handles} {selected}>
  <NodeHeader>
    <NodeTitle>{data.title}</NodeTitle>
    {#if data.description}<NodeDescription>{data.description}</NodeDescription>{/if}
  </NodeHeader>
  {#if data.body || data.badges || data.actions}
    <NodeContent class={data.badges || data.actions ? "flex gap-1.5" : undefined}>
      {#if data.badges}
        <Badge variant="success">{data.badges[0]}</Badge>
        <Badge variant="outline">{data.badges[1]}</Badge>
      {:else if data.actions}
        <Button size="xs">{data.actions[0]}</Button>
        <Button size="xs" variant="outline">{data.actions[1]}</Button>
      {:else if data.bodyBadge}
        <Badge variant="secondary">{data.body}</Badge>
      {:else}
        <span class="font-mono text-xs">{data.body}</span>
      {/if}
    </NodeContent>
  {/if}
  {#if data.footer}<NodeFooter>{data.footer}</NodeFooter>{/if}
</Node>

// Sample data for the Agent workflow example. Shared by react.tsx, vue.vue and svelte.svelte: the same
// nodes and edges feed React Flow, Vue Flow and Svelte Flow.

export type StepData = {
  title: string;
  description?: string;
  /** Monospace line in the node body. */
  body?: string;
  /** `body` rendered as a secondary badge (the trigger schedule). */
  bodyBadge?: boolean;
  footer?: string;
  /** Decision answers: first = success badge, second = outline badge. */
  badges?: string[];
  /** Buttons in the body (`Approve`, `Reject`). */
  actions?: string[];
  /** Show the node toolbar while the node is selected. */
  toolbar?: boolean;
  handles: { target: boolean; source: boolean };
};

export type FlowNode = {
  id: string;
  type: "step";
  position: { x: number; y: number };
  selected?: boolean;
  data: StepData;
};

export type FlowEdge = {
  id: string;
  source: string;
  target: string;
  type?: "animated" | "temporary";
};

export const nodes: FlowNode[] = [
  {
    id: "start",
    type: "step",
    position: { x: 0, y: 110 },
    data: {
      title: "Start",
      description: "Trigger · every hour",
      body: "cron 0 * * * *",
      bodyBadge: true,
      handles: { target: false, source: true },
    },
  },
  {
    id: "drift",
    type: "step",
    position: { x: 330, y: 0 },
    data: {
      title: "Check drift",
      description: "Tool · get_prices",
      body: "MAG4 drift: 2.4%",
      footer: "412 ms",
      handles: { target: true, source: true },
    },
  },
  {
    id: "post",
    type: "step",
    position: { x: 330, y: 200 },
    data: {
      title: "Draft feed post",
      description: "Agent · writer",
      body: "Writing...",
      footer: "running",
      handles: { target: true, source: true },
    },
  },
  {
    id: "decision",
    type: "step",
    position: { x: 680, y: 0 },
    selected: true,
    data: {
      title: "Decision",
      description: "drift > 2%?",
      badges: ["yes", "no"],
      toolbar: true,
      handles: { target: true, source: true },
    },
  },
  {
    id: "approval",
    type: "step",
    position: { x: 680, y: 200 },
    data: {
      title: "Ask approval",
      description: "Human in the loop",
      actions: ["Approve", "Reject"],
      handles: { target: true, source: false },
    },
  },
];

export const edges: FlowEdge[] = [
  { id: "e1", source: "start", target: "drift", type: "animated" },
  { id: "e2", source: "start", target: "post" },
  { id: "e3", source: "drift", target: "decision", type: "animated" },
  { id: "e4", source: "drift", target: "approval", type: "temporary" },
];

export const legend = [
  { label: "active flow", color: "var(--brand)", dash: "6 5" },
  { label: "conditional", color: "var(--muted-foreground-2)", dash: "2 5" },
];