What is App Viewer
Once the Agents complete their task, the App Viewer Block will appear at the bottom right of the page. This tool allows you to preview the live application and modify visual elements directly.
Note:
Agent interactions may take a moment to process. Please be patient while the preview loads.
To monitor detailed progress, check the Terminal.
You can click the Refresh icon at any time to reload the App Viewer.
How to use it
You have two ways to modify your app:
Method One - Select to edit
Use this method if you want to manually adjust visual properties.
Step 1: Click the Select to edit button at the bottom.
Step 2: Click on any visual element you want to change. A visual editor will appear on the left side.
Step 3: Click "Reset Styling" to unlock the element.
Step 4: You can now manually adjust the styling of the chosen element.
Method Two - Select to chat
Use this method to ask the AI to redesign elements, upload reference images, or edit specific code.
Step 1: Click the Select to Chat button at the bottom.
Step 2: After you select a specific visual element, you will see two options: on the left side, "Add" or "Exchange," and on the right side, "Select this element to chat."
Step 3.1: If you click "Add or exchange", then you will see three options: "Image", "Generate", and "Upload". Choose either default images, AI-generated images, or upload your own images.
Don't forget to click ✅ after the replacement finishes!
Step 3.2: If you click "Select this element to chat", then you will see a "code reference" in the chat box. This references the specific code in the chat box, allowing you to give the Agent specific instructions about that element.
Mobile/PC
Preview how your app looks on different devices:
Locate the icons at the bottom of the viewer.
Toggle between the Mobile and PC icons to switch views.
Console
Check the Console for Errors and Info. If you see errors, simply click "Fix all" to have the Agents automatically resolve the bugs.
Use cases
Refining Layouts: Joe isn't satisfied with the initial layout. He clicks "Select to chat" to give the Agents specific instructions on how to improve it.
Swapping Images: Lisa wants to change a placeholder photo. She uses "Add or Exchange" to upload her own product image.
Fixing Bugs: Bill isn't a coder. When he encounters a red error message, he simply clicks "Fix all" in the Console to resolve the issue instantly.
FAQ
Why does my App Viewer show a loading screen?
Why does my App Viewer show a loading screen?
The loading display means the website is loading. The App Viewer is functioning normally. Wait a moment for the preview to load properly.
Why does my App Viewer show red Error messages?
Why does my App Viewer show red Error messages?
Agents may encounter issues during the building process, which can occasionally cause webpage errors. Click "Fix" and the Agents will repair the error for you. Once fixed, App Viewer will preview normally, so there's no need to worry about red error messages appearing.
Why can't I remove the badge from my published webpage?
Why can't I remove the badge from my published webpage?
Badge removal requires upgrading to Pro20 or higher plans.