Docs for @aigentive/wire-react
Build React workflow diagrams that agents can safely edit.
Install @aigentive/wire-react, render WireViewer or WireEditor, and keep every human, CLI, and MCP edit on WireDiagram plus WireAction.
@aigentive/wire-reactWireDiagramWireActionstyles.css
- @aigentive/wire-react
- React packageWireViewer, WireEditor, WireWorkspace
- WireDiagram
- Durable JSONpersist, validate, render, share
- WireAction
- Reducer actionshuman, CLI, and MCP edits
- styles.css
- No Tailwind setupCSS variables and colorMode
CanvasJSONMCP
Choose a track
Start where your work starts.
The docs are organized around real jobs: embedding Wire in React, building product editors, and letting agents create or repair diagrams.
React developers
Embed viewers, build editors, and keep app state canonical.Product teams
Use WireWorkspace or compose your own shell around provider hooks.Agent workflows
Generate, patch, validate, render, and repair diagrams with MCP or CLI.What Wire gives you
One model across UI and agents.
Component API that starts high-levelUse WireViewer, WireEditor, WireWorkspace, or WireProvider plus WireCanvas.Catalog-driven inspectorsWireOptionCatalog and WireOptionPanel give product fields without changing the schema.Agent-native docsSchema, validation, SKILL.md, and task recipes are available as machine-readable routes.Release discipline built inDocs checks cover snippets, links, package CSS, agent skill, examples, and API names.
Fast paths
Go straight to the thing you need.
These links cover the most common evaluation and implementation paths without forcing a linear tutorial.