What is it
Once the Agent team finishes the work, an App Viewer Block will show up at the bottom right of the page. It allows users to preview the results and modify any visual element on the page.
Notice:
Sometimes it takes longer to interact with agents. The preview may take a while to load, so please be patient. If you have worries, check Terminal.
You can click the "Refresh" icon to reload the App Viewer.
How to use it
Inspect
Method One - Select to edit
Want to edit visual elements manually? Then try "Select to edit"
Step 1
Click the Select to edit button at the bottom.
Step 2
Select any visual element that you want to edit, open the Chat Box, and then you will see a visual editor on the left side.
Step 3
Click the button "Reset Styling"
Step 4
You can now edit the chosen element manually.
Method Two - Select to chat
Want to chat with our AI Agent to help design, to upload files/images as reference, or want to edit a specific line of code? Here is the feature of "Select to Chat".
Step 1
Click the Select to Chat button at the bottom of the page
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".
Three Methods: 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 chatbox.
Mobile/PC
Mobile/PC icons enable you to switch between the preview of the mobile and desktop versions.
Find these icons at the bottom:
It's the same button showing different views.
Console
Check Error and Info in the Console.
You can fix bugs with a simple click on "Fix all".
Use cases
Replace Elements: Joe is not satisfied with the layout designed by the agents, so he clicks "Select to chat" to give a more specific description to the agents.
Add or Exchange Images: Lisa finds a visual element not good enough, so she clicks "Add or Exchange Images" to replace it.
Fix App Viewer Bugs: Bill is not familiar with coding, so when he encounters bugs while building with Atom, he simply clicks "Fix all" to resolve the issues.
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 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.