{
  "id": "recipe.embed-react-viewer",
  "goal": "Embed Wire diagrams in a React app with current package APIs.",
  "readFirst": [
    "/llm/react.shape.json",
    "/llm/schema/wire-diagram.json"
  ],
  "preferredPath": [
    "Install @aigentive/wire-react and @aigentive/wire-core.",
    "Import @aigentive/wire-react/styles.css once in the app entry.",
    "Use WireViewer for read-only embeds.",
    "Use WireEditor or WireWorkspace for editable embeds.",
    "Use WireProvider + WireCanvas for custom shells.",
    "Persist only WireDiagram from onChange."
  ],
  "minimalCode": [
    "import '@aigentive/wire-react/styles.css';",
    "import { WireViewer } from '@aigentive/wire-react';",
    "<WireViewer diagram={diagram} colorMode=\"system\" />"
  ],
  "styleControls": [
    "colorMode",
    "unstyled",
    "classNames",
    "CSS variables"
  ],
  "avoid": [
    "Do not require Tailwind in the consuming React app.",
    "Do not store canvas adapter nodes or edges as application state.",
    "Do not rename the package or introduce a parallel React API."
  ]
}