Get started

Install & setup

Add the package, import the stylesheet, and render a verified Wire surface without extra CSS tooling.

Install

The interactive canvas, editor shells, and viewer components ship inside @aigentive/wire-react. React and React DOM 18 or newer are peer dependencies.

Terminal

npm install @aigentive/wire-react

Package CSS

Import the package stylesheet once in your client app entry, root layout, or bundled stylesheet entry. React consumers do not need to install or configure Tailwind for Wire. npm consumers do not need to point a CSS compiler at the package source.

tsx

import "@aigentive/wire-react/styles.css";

App boundaries

Wire editor surfaces are interactive React components. In server-rendered app frameworks, place the Wire component behind a client boundary and import the CSS from the app entry or root layout. In single-page build tools, import the CSS once from the application entry before rendering React.

Client boundary. Use client-only modules for WireProvider, WireCanvas, WireWorkspace, WireEditor, and WireViewer.
Stable height. The canvas reads its parent box. Give the parent a height, min-height, or grid track so pan, zoom, and fit view have real bounds.
Persist only JSON. Store WireDiagram, not viewport, selection, inspector state, callbacks, option catalog functions, or rendered output.

Light & dark mode

Wire surfaces accept colorMode="light", colorMode="dark", or colorMode="system". You can also override the package CSS variables in your app stylesheet.

tsx

<WireWorkspace
  diagram={diagram}
  onChange={setDiagram}
  colorMode="system"
/>

Verify the install

Drop this client component into an app route. If you see the trigger card with its kind chip and title, install and CSS import are wired correctly.

tsx

"use client";

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

const diagram: WireDiagram = {
  version: 1,
  id: "smoke-test",
  layout: "LR",
  nodes: [
    { id: "in", kind: "trigger", title: "It works" }
  ],
  edges: []
};

export function SmokeTest() {
  return (
    <div style={{ height: 240 }}>
      <WireProvider defaultDiagram={diagram}>
        <WireCanvas mode="view" fitView showControls={false} showMiniMap={false} />
      </WireProvider>
    </div>
  );
}

Optional tooling

Two companion packages help you author and integrate diagrams outside the React tree.

@aigentive/wire-cli. wire init, wire add, and wire export for shell-driven scaffolding and SVG/Mermaid exports.
@aigentive/wire-mcp. An MCP server (stdio + streamable HTTP) so agents can read, validate, and edit diagrams using the same canonical schema.

What’s next

You’ve got the package and styles in place. The Quickstart picks an API path and renders a working canvas. From there, the examples hub and production guide cover adoption details.

NextQuickstart