Choose the node’s reported editor surface, drive iframe-backed f0 documents or same-window Designer artifacts with their native tools, then save and close cleanly.
Where: Connected MCP host → Flowgen project → editor-backed node
Before you start
- Connect an MCP host to the flowmo desktop app.
- Open the target Flowgen project, or pass its f0_project_id explicitly.
Key ideas
- f0 document surface: Website, video, section, 3D, ad, and design-system editors open as an iframe exposed through surface="document". They provide the normal f0 editor catalog, screenshot, HTML, and design-system calls while open.
- Designer surface: Designer is a same-window React editor, not an f0 iframe. flowgen_open_designer returns its native declarations, flowgen_invoke_designer_tool executes them, and flowgen_close_designer flushes and saves.
- One editor at a time: Only one editor-backed node can own the document surface. Opening another node saves/closes the current overlay first when possible.
- The external host remains the AI: Both paths expose deterministic editing tools. The MCP host reasons and invokes them directly instead of forwarding its prompt into another Flowmo AI turn.
- Two explicit editor surfaces: get_node and get_flow_state report
editorfor iframe-backed f0 documents anddesignerfor a Designer artifact. The former uses surface="document"; the latter uses Designer’s same-window native tool bridge. - The MCP host is the AI: flowgen_invoke_designer_tool calls the exact deterministic executors used by Designer’s own assistant. It does not forward a prompt into Flowmo AI, so there is one reasoning model, one approval path, and no nested AI turn.
Steps
- Call flowgen_get_flow_state or flowgen_get_node. An
editordescriptor selects the f0 document path; adesignerdescriptor selects the Designer path. - For
editor, call flowgen_open_node_editor, wait for ready, then list/inspect/invoke normal f0 tools with surface="document". - For
designer, call flowgen_open_designer, inspect the returned declarations, and call flowgen_invoke_designer_tool with read_document first and its arguments encoded in arguments_json. - Make targeted edits using only element ids returned by Designer reads, then invoke read_document again to verify the artifact.
- Close through the matching lifecycle: flowgen_close_node_editor for an f0 iframe document, or flowgen_close_designer for Designer.
- Resolve the node with flowgen_get_node. For an
editordescriptor use flowgen_open_node_editor and f0 tools on surface="document". For adesignerdescriptor use flowgen_open_designer, start with read_document through flowgen_invoke_designer_tool, make targeted calls using only ids that read returned, verify with another read, and call flowgen_close_designer to flush and save.
Supported iframe-backed nodes
- Document Editor and Project/Lite Editor.
- Unified Section / legacy HTML Section and image-to-layers documents.
- Video Composition and shot-backed video documents.
- 3D Scene, Ad Campaign, and Design System masters.
Designer native tools
- Document read/write and targeted element editing.
- Stylesheet, motion, interaction, fields, pages, research, and supported media tools.
- The live declarations returned by open_designer are authoritative; invoke them through invoke_designer_tool rather than guessing arguments.
Save boundary
Edits occur inside the child editor document. Closing the node editor is the handoff that captures the document, previews, HTML/CSS, or rendered outputs back into the Flowgen node and allows downstream propagation.
Designer MCP lifecycle
- flowgen_open_designer returns the live native tool declarations.
- flowgen_invoke_designer_tool takes tool_name plus arguments_json.
- Writes use the same ops, undo, preview, pages, collaboration, persistence, and billing paths as the in-app Designer.
- flowgen_get_open_designer reports identity and readiness.
- flowgen_close_designer flushes the pending document debounce before closing.
Limitations and important notes
- surface="document" is intentionally unavailable when no iframe-backed editor is open.
- Designer cannot use open_node_editor, surface="document", or run_node; its same-window surface must be open.
- Neither editor path is headless: open the node in the connected app before invoking its live tools.
- Do not describe a video-mode Document Editor as pages: it is one continuous timeline with scenes.
- Designer is not compatible with flowgen_open_node_editor, f0_invoke surface="document", f0_get_html surface="document", or flowgen_run_node.
- The Designer surface must be open in the connected browser because its live document and local tools run there.
Troubleshooting
f0_list_tools says the document surface is unavailable
Call flowgen_get_open_editor. Open the intended node and wait until documentSurfaceReady is true before listing document tools.
open_node_editor refuses a Designer node
This is correct. Call flowgen_open_designer, then flowgen_invoke_designer_tool with the declaration and arguments_json for the native Designer operation.
Edits are visible but downstream outputs did not change
Call the matching close tool and wait for save: flowgen_close_node_editor for an f0 document or flowgen_close_designer for Designer. Outputs refresh at that save boundary.