Examples

Edge inspection

Inspect and patch current edge fields without changing the durable app contract.

tsx
import "@aigentive/wire-react/styles.css";
import { useState } from "react";
import { WireCanvas, WireInspector, WireProvider } from "@aigentive/wire-react";

export function EdgeInspector({ diagram, optionCatalog }) {
  const [edgeId, setEdgeId] = useState("edge-qualify-route");

  return (
    <WireProvider
      defaultDiagram={diagram}
      onEvent={(event) => {
        if (event.type === "edge.click") setEdgeId(event.edgeId);
      }}
    >
      <WireCanvas mode="edit" fitView inspectOnEdgeClick />
      <WireInspector edgeId={edgeId} optionCatalog={optionCatalog} />
    </WireProvider>
  );
}
NextAccessibility