AI CMS Auto-Connect
CMS Auto-Connect is an AI-powered tool that analyzes your visual design and automatically maps it to a WordPress CMS structure. It detects pages, repeating patterns, navigation menus, headers, footers, and content fields, then creates the full collection and field configuration for you. What would take hours of manual CMS setup happens in seconds.
The system supports three WordPress export modes: standard Page templates, ACF Blocks, and Elementor Widgets. It handles custom post types, taxonomy loops, repeaters, WooCommerce page types, and nested field structures. After analysis, it writes everything directly into the CMS store, ready for export.
Prerequisites
- An active Flowmo project with at least one designed page on the canvas.
- A Flowmo account signed in.
- Your design should be complete (or nearly complete). CMS Auto-Connect works best when it can analyze finished layouts with real content structure. Connecting a blank page will not produce meaningful results.
How to Access CMS Auto-Connect
CMS Auto-Connect is triggered through the Settings Agent assistant. There are several ways to reach it:
- Smart Router (automatic). Type a prompt that mentions CMS, WordPress, publishing, or connecting fields. Phrases like "connect CMS," "map WordPress fields," "connect elementor," "acf block," or "go live" are automatically routed to the Settings Agent, which launches the CMS wizard.
- Direct action. In the AI chat panel, switch the assistant mode to Settings Agent and type "connect CMS" or "auto connect."
- Right-click a page. Select a page element on the canvas, then use the AI assistant with a CMS-related prompt. The assistant detects that you selected a page and offers to run auto-connect on it.
Step-by-Step: Running CMS Auto-Connect
Step 1: Launch the Wizard
When you trigger CMS Auto-Connect, the AI displays the CMS Auto Connect AI wizard card in the chat panel. The card has two tabs: Setup and Selection.
Step 2: Configure Options (Setup Tab)
The Setup tab shows three toggle switches that control what the AI analyzes:
| Option | Description |
|---|---|
| Header & Footer | When enabled, the AI identifies root-level elements that serve as site-wide headers and footers and maps them as page parts. |
| Dynamic Menus | When enabled, the AI detects navigation structures (nav elements, menu lists) and creates menu configurations with template item IDs and submenu containers. |
| Auto-Repeaters | When enabled, the AI identifies repeating patterns (card grids, testimonial lists, team member rows) and converts them into CMS collections with the first item as the template. |
All three are enabled by default. Click Select Elements to proceed to the Selection tab.
Step 3: Choose Pages and Elements (Selection Tab)
The Selection tab displays a scrollable list of your project's pages and root frames. Each item shows:
- A checkbox to include or exclude it from the analysis.
- The element name as it appears in your project layers.
- An Already Mapped badge if the page already has a CMS collection connected.
- A View on Canvas button (pointer icon) that selects the element on the canvas so you can confirm it visually.
- A Set to Page button for root frames that are not yet designated as pages.
Use the search field at the top to filter by name. Toggle Show already mapped to reveal pages that already have connections (hidden by default to keep the list focused on unmapped content).
Click Select all visible to check everything at once, or pick individual pages.
Tip: In Block or Widget export mode, the list shows individual sections within each page rather than full pages. Each section becomes its own ACF Block or Elementor Widget.
Step 4: Run the Analysis
Click the Start button (with the lightning bolt icon) to begin. The AI:
- Reads the engine subtree for every selected page, capturing the full element hierarchy, types, names, classes, and properties.
- Builds a selection summary including page names, respIds, export mode, project type, and the current CMS store snapshot.
- Sends the context to the AI model along with detailed instructions about WordPress field types, collection kinds, repeater detection rules, and naming conventions.
- Parses the response into a structured plan containing collections, fields, page configs, menus, page parts, and ignored element IDs.
- Applies the plan by writing collections, fields, menus, page configs, and mark-connections into the CMS store.
A streaming progress message keeps you updated during processing.
Step 5: Review the Results
After the AI finishes, you will see a summary message listing:
- How many collections were created (page, post-type, repeater, block, widget).
- How many fields were mapped within each collection.
- Any menus that were detected.
- Which elements were assigned as header and footer page parts.
- Any page configs for special page types (archive, search, WooCommerce).
The CMS panel in the designer (accessible from the CMS mode toggle) now shows all the generated collections, fields, and connections. Visual highlight classes are applied to connected elements on the canvas so you can see at a glance which elements are mapped.
How Field Detection Works
The AI analyzes each element in the subtree and maps it to the appropriate field type:
| Element Pattern | CMS Field Type |
|---|---|
| Text content (headings, paragraphs) | text or wysiwyg |
| Images | image |
| Links and buttons | url (or page-url for post-type loops) |
| Button labels | text |
| Background images | image with background connection type |
| Author names, dates, excerpts | Native WordPress fields (page-author, page-date, page-excerpt) |
Repeater Detection
When Auto-Repeaters is enabled, the AI looks for containers with two or more structurally similar children. For example, a "Cards Container" with three card elements that each have an image, heading, and paragraph. The AI:
- Identifies the first child as the template element.
- Creates a nested collection with
kind: "repeater"and sets itsframeIdto the template element. - Adds all sibling elements (the second and third card) to the ignored elements list so they do not get duplicate field mappings.
- Registers the template in
markConnectionsso the engine knows to treat it as a repeating item.
Post-Type Detection
For content-driven grids (blog feeds, portfolio items, product listings), the AI creates post-type collections instead of repeaters. These include:
- wpQuery configuration (
post_type,posts_per_page). - CPT supports (title, editor, thumbnail, custom-fields, excerpt, author).
- Archive page configs linking to the archive page template.
- Taxonomy associations when categories or tags are present.
Export Mode Differences
Page Mode (Default)
Each page becomes a collection with kind: "page". Fields map to native WordPress fields or ACF custom fields. Repeating sections become nested repeater collections.
Block Mode
Each section within a page becomes a separate collection with kind: "block". The AI splits pages into their section-level children and creates one ACF Block per section. Post-type collections and page configs still work alongside blocks.
Widget Mode (Elementor)
Similar to Block mode, but each section becomes a collection with kind: "widget" for Elementor Widget export. The structure and field mapping logic is the same.
Tips for Better Results
- Name your elements clearly. The AI uses element names to understand intent. A frame named "Hero Section" produces better mappings than one named "Frame 42."
- Keep your design structure clean. Use proper parent-child nesting. Cards inside a container are easier to detect as repeaters than cards scattered across different groups.
- Run on complete designs. The more content structure the AI can see, the more accurate its field detection. Placeholder text and dummy images still work fine.
- Use the right export mode. Set your export mode (Page, Block, or Elementor) in project settings before running Auto-Connect. The AI reads this setting and adjusts its entire mapping strategy accordingly.
- Check the CMS panel after running. Open the CMS mode in the designer to review and fine-tune the generated collections and fields. You can rename fields, change types, add missing connections, or remove incorrect ones.
Common Issues
| Problem | Solution |
|---|---|
| No pages appear in the wizard | Make sure your root frames are set as pages (right-click a frame and select "Set as Page," or use the Set to Page button in the wizard). |
| Fields are mapped to the wrong elements | The AI relies on element structure and naming. Rename ambiguous elements and re-run. You can also manually adjust connections in the CMS panel. |
| Repeating items not detected | Ensure the repeating children are direct siblings inside the same parent container. If they are nested at different levels, the AI may not recognize the pattern. |
| Header/footer not detected | The AI looks for root-level elements with names like "header," "nav," "navbar," or "footer." Rename your header/footer elements to match these conventions. |
| "Already Mapped" pages are skipped | This is intentional. Toggle Show already mapped and re-select those pages if you want to re-analyze them. |
| Block/Widget mode shows sections, not pages | This is expected behavior. In Block and Widget export modes, each section is treated as an independent unit. The wizard displays sections so you can select which ones to convert. |