Get started

Install & setup

Add the package, point Tailwind at the source, render your first canvas.

Install

The interactive canvas ships inside @aigentive/wire-react. React 18+ is required.

Terminal

npm install @aigentive/wire-react

Tailwind v4

The components ship pre-styled with Tailwind utility classes. Tell Tailwind where to find them so the classes survive purging, and opt into class-based dark mode.

css

@import "tailwindcss";

@source "../node_modules/@aigentive/wire-react";

/* opt into class-based dark mode */
@custom-variant dark (&:where(.dark, .dark *));

Light & dark mode

Wire components are theme-aware via Tailwind’s dark: variant. There’s no provider — add or remove the dark class on <html> and every component follows.

// somewhere in your app
function setTheme(theme: "light" | "dark") {
  document.documentElement.classList.toggle("dark", theme === "dark");
  window.localStorage.setItem("wire-theme", theme);
}

Verify the install

Drop this component anywhere in your app. If you see the trigger card with its kind chip and title, install + Tailwind setup are wired correctly.

tsx

"use client";

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 mental model covers how Wire’s schema, actions, and events fit together.

NextQuickstart