Generate a scripted/interactive web component (React/canvas/WebGL/particles) from a description — build it standalone or enhance a connected HTML section, with optional reference images, assets, a 3D model, and a design system.
Where: canvas → left rail → Add → Website → Interactive element — Add an Interactive Component node and describe the experience
Key ideas
- Standalone vs Enhance: A mode toggle: Standalone generates a fresh interactive experience from your description; Enhance layers interactivity onto an HTML section wired to the HTML (enhance) handle — that handle's content must be present before Enhance can run.
- Rich inputs: Six handles — Description, Reference Images, Assets (img/video/svg), 3D Model, HTML (enhance), and Design System — so the component can embed real media, ride a 3D model, and match brand tokens.
- Agentic build: Generation runs as a planning + multi-step build pipeline (planning, then per-step execution) and emits component HTML on the output handle.
Steps
- Add an Interactive Component node.
- Pick Standalone or Enhance with the mode toggle.
- Describe the experience in the Description field (e.g. a particle hero, a 3D viewer, a data-driven animation).
- Optionally wire reference images, assets, a 3D model, or a design system; for Enhance, connect a Section or other HTML source to the HTML handle.
- Click Generate Experience (or Enhance Section) and use the resulting component HTML output.
FAQ
Why is the Generate button disabled in Enhance mode?
Enhance needs source HTML. Connect a Section or other HTML source to the HTML handle first; until that content exists the button stays disabled.