Iterative Editing

Two AI Surfaces

UnifyApps ships two distinct AI-assisted surfaces under the AI Create feature umbrella. Understanding the difference between them is the first step to using either effectively.

Note: AI Create is an optional feature controlled at the workspace level. When a workspace administrator turns it off, all AI options disappear from the UI. The rest of the builder — every canvas tool, component panel, and configuration option — works exactly as described elsewhere in these docs.

Opening the AI Assistant

The AI Assistant lives on the left icon rail — its icon is labelled AI Assistant (shortcut A) — alongside Design, Navigator, Data, Hierarchy and the other builder tools. Clicking its icon opens a panel that occupies the left side of the builder — the canvas shifts to the right to accommodate it.

Panel Controls

• Resize: Drag the right edge of the panel to make it wider or narrower. The panel opens at 400 px and can be between 360 px and 600 px wide (at most half the window). Your preferred width is remembered in this browser.

• Close: Click the X in the panel header, or click any other tool icon on the left rail. The panel collapses and the canvas returns to its full width. Switching tools does not clear your conversation history for the current session.

• Context chip: The chip in the chat input shows the block selected on the canvas. The assistant treats it as the target of your request.

• Canvas anchoring: The assistant panel is anchored outside the canvas frame. Canvas resets — such as switching device layouts, or the canvas reloading after an applied change — don't close the panel or clear the conversation.

Tip: A narrower assistant panel gives the canvas more room. Most requests are short, so the minimum width (360 px) is usually enough to read the assistant's responses comfortably while still seeing the canvas alongside it.

What the Assistant Already Knows

Before you type a single word, the AI Assistant reads the current state of your page and uses it as implicit context for every request. You do not need to describe the structure of your page — the assistant already has access to all of it.

Example Prompts That Use Implicit Context

Because the assistant already knows the page structure, short natural-language instructions work well. Here are a few examples:

💬 Effective AI Assistant prompts

• "Make this wider" — widens the currently selected block.

• "Add a column here" — inserts a column after the selected column in the nearest grid container.

• "Move the header section above the hero image" — reorders top-level blocks by name.

• "Change the button label to 'Submit Request'" — edits a text property of the selected button.

• "Add a card component below the stats row" — adds a new component in a relative position.

• "Remove the bottom padding from this container" — adjusts spacing on the selected block.

The Change Flow: Ask → Clarify → Plan → Approve → Apply

Every assistant interaction follows the same sequence. Understanding each step makes it easy to know what to expect and when you can act.

1. You ask: Type your request in the assistant's chat input and press Enter (or click Send). Be as specific or as high-level as you like — the assistant uses context to fill in the gaps.

2. The assistant may ask a clarifying question: When the request is ambiguous — for example, "add a section here" when there are multiple candidates — the assistant displays a clarifying question on the canvas, overlaid on the relevant area. This is not a chat bubble; it appears inline so you can point at what you mean while answering.

3. The assistant proposes a plan: After it has enough information, the assistant presents a plan: a numbered list of changes it intends to make. The plan opens over the canvas, next to the chat. Review it carefully — it describes every modification before any change is applied to your page.

4. You approve the plan: An Approve button appears at the bottom of the plan. Click it to instruct the assistant to execute all changes in the plan. Approve is active only while the plan is the latest message in the thread; older plans open read-only. If you send a new message before approving, the pending plan is cleared — the assistant treats the new message as a fresh request.

5. Changes are applied and the page refreshes: The assistant executes each item in the plan, then the builder fetches and renders the latest version of the page so you can see the result immediately. There is no intermediate "preview" step — approval means apply.

Warning: Sending any new chat message — whether a follow-up question, a refinement, or a completely new request — discards any unapproved plan. The assistant starts fresh with your new message. If you want to keep the proposed changes, approve them before continuing the conversation.

Device Scope

UnifyApps lets you configure separate layouts for desktop, tablet, and mobile. The AI Assistant knows which device layout the canvas is showing. It makes its change for that layout only, not for all layouts at once.

Note: If you ask for a change while the desktop layout is open, that's where it lands. If the change should apply on tablet or mobile too, switch to that layout, check it, and ask again if needed. See Responsive Design.

Checking Your Breakpoints After Edits

It is good practice to switch to each breakpoint after making a change through the assistant and verify the layout looks correct. Responsive settings that are inherited from a parent breakpoint can sometimes surface unexpected results when one breakpoint is modified but not the others.

AI Assistant vs. Generate App

These two surfaces share an AI engine but serve fundamentally different purposes. Choosing the wrong one costs time, so here is a clear comparison:

Pairing the Assistant with Dev Tools

The builder's Dev Tools panel (Pulse, State, Network, and Console tabs) is a natural companion to iterative AI editing. Use it to verify that the changes the assistant applied have the downstream effects you expected.

Using Pulse to Track Changes

The Pulse tab in Dev Tools logs the events, actions, state changes, data-source fetches and errors that occur on the page (see Dev Tools & Debugger). After the assistant applies a plan, Pulse records what changed. This is especially useful when the assistant modifies a binding or a property that controls data flow — you can watch the event stream to confirm the right values are being passed.

▶ Workflow: iterative edit with Pulse verification

1. Open the Dev Tools panel and navigate to the Pulse tab. Leave it open alongside the canvas.

2. In the assistant panel, type your request and approve the plan.

3. Watch the Pulse log populate as the page refreshes. Each row shows its Scope, Time, Kind, Entity and a short Message. Click a row to see its payload in the Event details panel.

4. Confirm the events match what you intended — for example, an On Click event on the correct button followed by the right actions.

5. If Pulse shows an unexpected event or missing event, refine your request in the assistant and repeat.

Using the State Tab

The State tab shows the current value of every variable and page parameter in real time. After an assistant edit that changes a binding or variable reference, switch to the State tab and interact with the page. Verify that the variable updates to the value you expect when the triggering action fires.

Tip: A productive iterative cycle looks like this: ask the assistant → approve the plan → check Pulse and State to verify → ask the assistant for the next change. Keeping Dev Tools open throughout the session catches problems immediately, before they compound across multiple edits.

Panel Behavior Reference

The following table covers common scenarios and how the assistant panel behaves in each.

Best Practices

The AI Assistant works best when you treat it as a collaborative editor rather than a one-shot generator. Small, specific requests consistently outperform large vague ones.

Be Specific About the Target

The assistant uses the selected block as the default target. Before typing a request, click the block you want to change. A specific target removes ambiguity and reduces the chance of a clarifying question.

☞ Specific vs. vague requests

Approve One Plan at a Time

The assistant can handle multi-step plans, but reviewing and approving small, focused plans keeps you in control. If a plan includes ten changes and one of them is wrong, it is harder to isolate and correct than if you had approved five two-change plans separately.

Revert if Results Are Unexpected

Each assistant change is saved as a new version of your app. If the result is not what you intended, use Revert to previous version on that assistant message. It restores the app to how it was before the message. You can then rephrase your request and try again.

Known Limitations

The AI Assistant handles layout and configuration tasks well. There are categories of changes that it cannot perform or performs with lower reliability:

• Data source creation: The assistant cannot create or connect data sources. Use the Data panel for this.

• Multi-page edits: Each session operates on the page currently open. To edit a different page, navigate to it first.

• Complex action chains: The assistant can add simple event handlers, but intricate multi-action chains with branching logic are better built manually in the Interactions section.

• One layout per request: Each change is made on the device layout you have open, not on all layouts at once. Switch to the other layouts to check them, and ask again on any layout that needs the same change.

• Custom code: The assistant does not write or modify JavaScript in custom code slots.

Warning: If you do not see the assistant icon on the left rail, AI Create is disabled for your workspace. Contact your workspace administrator to enable it. Disabling AI Create has no effect on any other builder capability.