App Viewer

What is App Viewer?

When AI Agents complete a task, the App Viewer appears at the top of the page. It lets you preview your live app and make visual edits directly — no coding required.

Before You Start

• Agent processing may take a moment — please wait patiently.
• Check the Terminal panel on the right for detailed progress. The Terminal panel displays real-time logs of what the AI Agent is doing, including file creation, code generation, and any errors encountered during the build process.
• Click the Refresh icon anytime to reload the preview.

How to Use App Viewer

Step 1: Wait for the preview to load

After Agents finish, the App Viewer loads your preview in the main preview window.

⏱️ Usually takes a few seconds to a minute.

If it takes longer than 2 minutes: Click the Refresh icon in the App Viewer toolbar. If still stuck, check the Terminal panel for errors (see Step 3 below).

Step 2: Preview your app

Once loaded, you can see your live app in the preview window.

• Desktop / Tablet / Mobile — Use the device toolbar at the top of the preview window to switch between views and test responsiveness. The toolbar displays three icons representing desktop, tablet, and mobile devices. Click each icon to see how your app looks on different screen sizes without leaving the page.
• Open in new tab— Click the arrow icon in the top-right corner of the preview window to open the preview in a separate browser tab. This is especially useful if the embedded preview is stuck or unresponsive.

Step 3: Check for errors (if something looks wrong)

If your app doesn't load or looks broken, check the Console panel for error messages.

The Console panel is located on the right side of the screen, below the Terminal tab. It displays system logs and error messages generated during the build process.

If you see red error messages, they typically include:

• A description of what went wrong
• The file and line number where the error occurred
• A stack trace to help identify the root cause

To fix the errors: (More details, please refer to: Issue Report)

• Click "Resolve" — the AI will analyze and fix all identified bugs automatically.
• The preview will reload once the fixes are applied. You can monitor the progress in real-time through the Terminal panel.

No "Resolve" button?

Click the "..." (more options) next to the Agent's latest message, then select "Feedback" to report the issue to our support team. Please include your Chat Link and a screenshot of the error.

Step 4: Modify your app

Method 1: Click to edit (recommended for visual changes)

Click any element directly in the preview window. A visual editor will appear on the left side of the screen, allowing you to adjust:

• Colors — Change text color, background color, or border color with a color picker
• Spacing — Adjust padding, margin, and gap between elements
• Typography — Modify font size, weight, and family
• Layout — Change alignment, flexbox settings, or grid properties
• Text content — Edit text directly in the editor

Once you make a change, the preview updates instantly so you can see the result in real-time.

The visual editor also includes a Library tab where you can browse and add pre-built assets such as icons, images, and UI components to your project.

Method 2: Describe in chat

Tell the AI Agent what you want to change using natural language. For example:

• "Make the background color darker"
• "Reduce the padding around the header"
• "Change the button color to blue"

The AI will understand your request and apply the changes to your app.

Quick Reference

• Refresh preview – Click the Refresh icon in the App Viewer toolbar to reload the preview window.
• Switch device view – Use the Desktop, Tablet, or Mobile icons in the preview toolbar to test how your app looks on different screen sizes.
• Open in new tab – Click the arrow icon in the top-right corner of the preview window to open the preview in a separate browser tab.
• View error logs – Check the Console panel on the right side of the screen for error messages and system logs.
• Fix errors automatically – Click the "Resolve" button in the Issue Report notification to let the AI fix all identified bugs.
• Edit visual elements – Click any element in the preview window to open the visual editor on the left side.
• Report an issue – Click "..." → "Feedback" on any Agent message to report issues to the support team.

FAQ

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. If it takes longer than 2 minutes, try clicking the Refresh icon or checking the Console panel for errors.

Why does my App Viewer show red error messages?

Agents may encounter issues during the building process, which can occasionally cause webpage errors. Click "Resolve," 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 Atoms badge from my published page?

Badge removal requires Pro or higher. You can upgrade anytime from Settings → Plans & Billing. After upgrading, the badge will be automatically removed from your published pages.

To upgrade, click your avatar in the top-right corner, select Settings, then navigate to Plans & Billing. Choose the Pro or Max plan and complete the upgrade process. Once upgraded, the Atoms badge will no longer appear on your published pages.