Customize

Option catalogs

Use WireOptionCatalog to render typed editor controls without persisting runtime catalog functions.

Model

A WireOptionCatalog maps node kinds to arrays of WireOptionSpec. The catalog is runtime editor configuration. Persist option values on the WireDiagram, not the catalog itself.

import type { WireOptionCatalog } from "@aigentive/wire-react";

export const optionCatalog: WireOptionCatalog = {
  "*": [
    { key: "owner", label: "Owner", storage: "data", placeholder: "ops" }
  ],
  ai: [
    {
      key: "model",
      label: "Model",
      storage: "node",
      type: "select",
      options: ["fast-model", "balanced-model", "compact-model"]
    },
    {
      key: "temperature",
      label: "Temperature",
      storage: "data",
      type: "number",
      min: 0,
      max: 2,
      step: 0.1
    }
  ]
};

Rendering controls

WireInspector renders the relevant options for selected nodes. WireOptionPanel renders the same option controls when you want to place them in a modal, sidebar, or custom shell.

tsx

<WireProvider defaultDiagram={diagram}>
  <WireCanvas mode="edit" fitView optionCatalog={optionCatalog} />
  <WireInspector optionCatalog={optionCatalog} />
</WireProvider>

Storage rules

storage	Writes to	Use when
node	Top-level node field	Use for durable fields such as model, tone, title, prompt, or kind-specific data.
data	node.data.options	Default for product-specific configuration values.
metadata	diagram metadata	Use for diagram-level settings outside individual node options.

Agent use

Agents should patch serializable option values with node.patch, apply_actions, or raw JSON edits. They should not invent catalog functions or change the public option API. For a runnable UI example, see Options.

NextOptions example