Examples

Options

Use WireOptionCatalog with the current inspector and option panel names.

Entry points

Keep catalogs at the view layer: WireWorkspace optionCatalog, WireInspector optionCatalog, WireCanvas optionCatalog, and WireOptionPanel catalog.

tsx

import "@aigentive/wire-react/styles.css";
import {
  WireInspector,
  WireOptionPanel,
  WireProvider,
  WireWorkspace,
  type WireOptionCatalog
} from "@aigentive/wire-react";

const optionCatalog: WireOptionCatalog = {
  ai: [
    { key: "model", storage: "node", type: "select", options: ["balanced-model", "careful-model"] },
    { key: "temperature", type: "number", min: 0, max: 2, step: 0.1, width: "half" }
  ],
  action: [
    { key: "channel", type: "select", options: ["crm", "email", "chat"] }
  ]
};

export function OptionsInWorkspace({ diagram, onChange }) {
  return (
    <WireWorkspace
      diagram={diagram}
      onChange={onChange}
      optionCatalog={optionCatalog}
    />
  );
}

export function OptionsInCustomPanel({ diagram }) {
  return (
    <WireProvider defaultDiagram={diagram}>
      <WireInspector nodeId="qualify" optionCatalog={optionCatalog} />
      <WireOptionPanel nodeId="enterprise" catalog={optionCatalog} />
    </WireProvider>
  );
}

NextControlled state