Use the native Website Add menu and selection controls for text, layout elements, and media while preserving the original website node, page flow, and undo history.
Where: Flowgen canvas → original Website node → open its native Website editor → Add or select an element.
Before you start
- Use an editable original Flowgen Website owner and confirm the page is writable. External MCP operations require the original node and current document revision.
Key ideas
- This edits the original website source: The Website surface writes through the node’s native document session and history. It is not an imported HTML copy and does not target whichever unrelated editor happens to be open.
- Add follows the selected layout context: Text presets and basic elements are inserted inside an eligible selected container, after selected content, or at the page root. Normal flex/grid/page flow is preserved; absolute positioning is used only when the parent is already free-positioned.
- UI media selection is not an MCP file picker: The UI can upload local files, accept supported clipboard media, use Flowgen node outputs, and open the project Asset manager. External MCP can edit the native document through its source tools but cannot pick a file from the user’s desktop or click the Asset manager.
Steps
- Open the Website editor from its owning Flowgen node and confirm the intended page before editing.
- Select the container or element that should determine insertion location. Open Add and choose a text preset or a Container, Button, Divider, Rectangle, or Circle.
- Add media by uploading local files, pasting supported clipboard media, choosing an accessible Flowgen output, or selecting an item from the project Asset manager. Wait for upload/save and confirm the inserted element appears on the intended page.
- For normal layout, let the selected parent’s flex/grid or document flow place the item. Free-positioned placement is reserved for a parent that already uses free mode; do not convert a normal layout into absolute positioning just to match a canvas coordinate.
- Select an element to open the contextual floating controls. Use Text for semantic text types/presets, and use the supported style-copy, lock/hide, ordering, and other selection actions where available.
- Use Undo/Redo to verify the native history command. After Undo/Redo, re-read or re-probe the selected element’s properties because the previous selection controls may no longer reflect the restored source.
- Navigate to another page and make a fresh selection there; selection does not carry across page navigation.
Add menu inventory
- Text presets use semantic text elements and preset styles.
- Elements include Container, Button, Divider, Rectangle, and Circle.
- Media insertion supports image, video, and audio through local upload or the project media library; clipboard and current Flowgen-node media handoffs use the same native editing session/history path.
- Inserted audio/video elements use native media attributes and responsive sizing defaults; playback and browser policies remain element/browser behavior.
External MCP route and exact limits
On the original Website node, discover live declarations with flowgen_list_node_editor_tools, then read the page using read_native_website with its original owner and current revision. Use author_native_website for supported add-element/page authoring and edit_native_website for the declared text, style, ordering, visibility, lock, or history commands. Pass exact page/element IDs returned by the read and the current revision; re-read after each write before continuing. The API can author an element from a supplied media URL, but it does not expose the Add menu’s local upload, clipboard, or Asset manager picker, and it does not automatically infer the UI’s current selection-based insertion target. For API insertion, choose the exact parentId/index from the read document. The current add-element API does not accept the UI preset’s full structured style payload; author the element, then apply supported style commands through the declared edit API.
What this phase does not claim
- Native Website only: it does not establish feature parity with the separate native Video Editor/Compositor.
- This phase does not add grouping, alignment, or snapping parity with Designer.
- A named reusable-style library is not part of this Website phase.
- Static add/media/order/duplicate/tag/style/hide and history edits are covered by mounted iframe tests; those tests do not prove live remote storage, a production upload, or every browser’s visual behavior.
Tips
- When building through MCP, read the original owner and exact page first; never substitute a similarly named website node or an imported copy.
- Prefer a current Flowgen output or a URL the caller has actually provided over guessing media paths.
Limitations and important notes
- External MCP cannot access a user’s local file picker, clipboard payload, or Asset manager selection directly.
- No direct MCP operation currently reproduces the UI Add menu’s text preset or complete element-style insertion transaction.
- The insertion target, responsive flow behavior, and selection affordances in the UI are not inferred automatically by the source API.
- Runtime-bound structural edits retain a conservative iframe rebuild fallback.
Troubleshooting
An MCP insert landed in the wrong place.
Read the original page and its parent/child order again, choose the exact parentId and insertIndex, and retry only after confirming the prior operation did not already apply.
A newly added element has no desired styling.
The current add-element tool creates its declared structure/content, not the UI preset’s complete style payload. Read the returned element and apply supported style commands using the current revision.
A local file or Asset manager item is unavailable to MCP.
Choose the file/media in the Flowmo UI, or provide an accessible URL from a connected Flowgen output; external MCP cannot browse the user’s desktop or click the asset picker.