MGX Docs

Appearance

MGX

Features

App Viewer ​

Basic Functions ​

App Viewer is where users can preview application build results. It's available in both Lite and Full modes. Once the Agent team successfully builds an application, an App Viewer Block will appear for users to view the preview results.

图片

You can click the "Refresh" icon to reload the App Viewer.

图片

Sometimes, the App Viewer may display a loading state—this means you need to wait for the Agent to complete the build.

If the Agent is processing, the right-side navigation will show the active blocks. You can click on them to check the status.

图片

How to use App Viewer ​

Inspect ​

  • By clicking the button in the red box shown in the figure, you can inspect any element within the app. This allows you to modify the app's presentation by analyzing key elements without writing code.

图片

  • Once you click "Inspect," a brief loading time may occur before you can interactively pick elements:

    图片

  • You can directly click on the # to select this element.

    图片

    图片

Add or exchange ​

After clicking "inspect," select "add or exchange" on the left side to directly replace the image. Choose "select" on the right side to directly select the symbol and enter it into the input box, where you can input natural language commands.

图片

  • After clicking "Add or Exchange," image replacement options will appear on the left side. You can choose from three methods: default royalty-free images, AI-generated images, or uploaded images.

    click 'add or exchange'

    After selecting an image, you can directly preview the replacement effect.

  • After clicking the ✅, the replacement command will appear in the input box once the image download is complete. You can either send it directly or add additional modification suggestions before sending.

Mobile ​

You can click the mobile icon to switch between mobile and desktop view modes.

图片

The mobile and desktop view styles are as follows:

图片

图片

Console ​

You can check Error and Info messages in the Console. If an error occurs in the App Viewer, you can also click Fix to send it to the Agent for repair.

图片

Click "Fix All" to submit all errors to the Agent, enabling the App Viewer to resume normal preview functionality.

图片

Once sent, the Agent will immediately begin fixing the bugs.

图片

Publish ​

The Publish feature provides a stable link for the current application. Clicking the Publish button opens a dropdown with an editable, publishable new link. You can modify this URL or click Publish directly.

图片

Users can select which version to publish using the version toggle next to "Connected."

Pro20+ users can remove the badge.

Use Cases ​

  • Replace Elements: Replace elements in App Viewer by selecting them and describing the desired replacement in the input box.
  • Add or Exchange Images: After selecting an element in inspect mode, click "add or exchange" to replace or add images.
  • Fix App Viewer Bugs: If bugs appear in App Viewer, click the one-click Fix button to repair them. Bug fixes must be completed to ensure proper webpage preview.
  • Publish Website: Click Publish to deploy a stable website and get a stable preview link.

FAQ ​

Why does my App Viewer show Loading?
Why does my App Viewer show red Error messages?
Why can't I remove the badge from my published webpage?