Production

Production usage

How to embed Wire in a product without changing the durable diagram contract.

State boundary

Your application should own WireDiagram. Wire editor state such as viewport, selection, dirty state, mode, inspector state, history, event callbacks, and option catalog functions is runtime state. Do not serialize it into the diagram.

tsx

"use client";

import { useState } from "react";
import "@aigentive/wire-react/styles.css";
import { WireWorkspace, type WireDiagram } from "@aigentive/wire-react";

export function WorkflowEditor({ initial }: { initial: WireDiagram }) {
  const [diagram, setDiagram] = useState(initial);

  return (
    <div style={{ height: "min(760px, calc(100vh - 120px))" }}>
      <WireWorkspace
        diagram={diagram}
        onChange={(next) => {
          setDiagram(next);
          void saveDiagram(next);
        }}
        colorMode="system"
      />
    </div>
  );
}

Validation before use

Validate before you persist, share, render, export, or hand a diagram to an agent. Errors should block the workflow. Warnings should remain visible so reviewers can decide whether a diagram is intentionally incomplete.

import { validate, type WireDiagram } from "@aigentive/wire-core";

export function assertReadyForShare(diagram: WireDiagram) {
  const result = validate(diagram);
  if (!result.valid) {
    throw new Error(result.issues.map((issue) => issue.message).join("\n"));
  }
  return result;
}

CSS and theme

Import @aigentive/wire-react/styles.css once. Consumers do not need Tailwind. Use CSS variables and the React customization props to align Wire with a product shell.

colorMode controls light, dark, or system color mode.
unstyled removes package visual styling where components support it.
classNames targets slots without serializing styling functions into JSON.
Persisted node and edge style fields are for durable visual semantics, not app layout state.

Client and rendering boundaries

React editor components are interactive surfaces. Keep them in client components and give their container a stable height. Static exports can use renderToSvg and toMermaid from @aigentive/wire-core.

MCP and HTTP security

Local MCP stdio should run with a storage directory scoped to the user or workspace. HTTP deployments should pin host, port, cloud URL, API key behavior, audit logging, and preview base URLs. Do not expose write tools to untrusted callers without an app-level authorization layer.

Release checklist

Area	Gate
Persistence	Persist WireDiagram only; keep viewport, selection, inspector state, option catalogs, and callbacks outside JSON.
Validation	Run validate before save, share, render, export, and agent handoff. Treat warnings as review items.
React boundary	Render editor surfaces from client components and give the canvas parent a stable height.
Styling	Import @aigentive/wire-react/styles.css once, then use CSS variables, colorMode, unstyled, and classNames.
Accessibility	Verify keyboard access for toolbar, inspector, node list, option panel, and read-only embeds.
Tooling	Keep CLI, MCP, LLM routes, examples, and package READMEs in parity with current implementation.

Next references

For implementation details, use the React component API, core API, MCP docs, CLI docs, and LLM docs.

NextReact component API