Preview, Code, and application connections

Until the first commit appears in History, Preview shows an illustrated overview of the creation stages. After that, it opens the application when its browser preview is ready. If none of the project's applications has browser preview enabled, Preview explains that it is unavailable instead of showing the creation screen again, even while Amazi continues working.

Preview the running application

Preview opens a registered browser application in the isolated development runtime. Use it to:

• choose an application;
• navigate its available routes;
• switch the viewport and check responsive behavior.

For mobile apps using React Native/Expo, Preview shows the web version in the editor. Android or iOS does not run there, so features that need a phone require a separate device check. A WebView app opens a website inside a mobile wrapper: you can view the website separately, but the wrapper itself has no Preview in Amazi. See Supported applications for Android builds and iOS limitations.

Initial setup, dependency installation, or a runtime restart can keep Preview in a preparation state. A centered heading and loading bar appear, with the current status beneath the heading. If it remains unavailable, ask the agent to inspect the application build and runtime health.

A live development address is an unlisted public link. Project membership controls who can request the descriptor from Amazi, but application code must still protect sensitive pages and APIs. Never expose secrets through browser environment variables.

Point the agent at the interface

To mention a whole page, type @ in project chat and open Pages, above Integrations. The list matches the routes of the application selected in Preview. Choose a route to add its chip; clicking the chip opens the page, asking for route parameters when needed.

Selected element chips display their HTML tag (h1, p, div, span, and others) instead of a number, including in queued and sent messages. Older messages without a saved tag show the source file name. Hovering over a sent chip reveals the source reference and a reminder that the element may have changed, including when the application or file name uses non-Latin characters.

When an application has the matching Next.js or Vite JSX source-selection adapter, turn on the selection tool and choose one or more rendered elements. Amazi attaches their exact source references to the chat composer so the agent can locate them. Preview does not require an adapter. Route reporting is available only when the matching router-navigation adapter is enabled.

If selection or quick navigation is unavailable, click its crossed-out control to open a short explanation. Got it closes it; Ask the agent to check prepares a message in chat for you to review and send. You can still enter navigation paths manually. Navigation and element selection have separate adapters: working route navigation alone does not enable selection.

Inspect Code

Code reads the retained project workspace through the product API. Browse directories, open supported text or image files, and download the project source when you need an external copy. File changes from active agent work invalidate the visible file data so the editor can refresh without replacing the workspace.

Inspect application connections

The information callout on the right explains how to use the diagram. If your plan restricts access, the plan notice appears above it. The Example layout label appears at the top center of the diagram when your plan does not include actual connections.

Application connections shows registered applications, connected integrations, and observed HTTP connections. Choose Development or Production to inspect that environment. Request adapters support Node.js and Python server calls, plus browser fetch/XHR calls from Vite and Next.js applications. Click a connection to see its destinations, HTTP methods, observation counts, and latest activity.

Connection details fill the available height on the right. Scroll the request list while the heading, close button and latest-activity time stay visible.

An application without a request adapter has a warning card, even if older connections remain on the diagram. Click the card, then Ask the agent to prepare a message for connecting the matching adapter. Review and send that message in chat. Development applies saved settings; production needs a new publication. New Node.js, Python, Vite and Next.js starters include their matching adapters. Imported and existing applications can be configured through the agent.

Each publication keeps the request adapters saved with that version. To apply later adapter changes to Production, publish the updated version; existing deployments keep their previous settings.

Collection is best effort. Other runtimes, unsupported HTTP clients, WebSockets, worker requests and browser asset loads are outside coverage; a site's security policy can also block browser tracking. A missing line does not prove that applications are independent, and old traffic cannot be recovered. Without diagram access on the project owner's plan, applications and connected integrations remain visible without connections. This display restriction does not stop communication between applications or the agent's development work. Use Applications to change application capabilities and settings.

Code editing and tree actions

The Project root row stays at the top of the file tree. The menu header also shows Project root. Click it to create a file or folder, upload files directly to the root, or download the project. The root cannot be renamed or deleted. Uploads show progress and a Cancel action while files are transferring, followed by a finalization status.

Code keeps one file open. Its header shows the path, truncating long paths, and an explicit Save button when editing is available. Search files filters the tree. Expand all / Collapse all is beside search; automatic expansion and search skip ignored directories, while you can open them manually.

Right-click a file or folder to open grouped actions. Open and Reference in chat are followed by New file, New folder, Upload files, Rename, and Delete where applicable. The name-entry dialog handles creation and renaming; deletion requires confirmation. A crown indicates plan-controlled changes. Manual downloading, creating, editing, uploading, renaming, and deleting require code-management availability and the appropriate project role. This restriction does not prevent the agent from changing application files when you request development work in chat.

Save applies the current text and records a file revision. Ctrl/Cmd+S does not save project code. Unchanged content creates no empty revision. The revision message gives the number of updated project files. Switching files, leaving Code, navigating away, or closing the page warns about unsaved edits. Sending a chat prompt discards unsaved editor text so the agent starts from saved files. Active agent work temporarily blocks manual changes. If a file changed before a save, reload its current contents before retrying.

Ctrl/Cmd-click supported JavaScript or TypeScript imports to open the referenced project file. Unresolvable imports show a navigation error. This is source navigation, not a guarantee of full IDE language-server support.

Element actions

Go to element focuses the referenced preview element; Go to file opens its source location in Code. Hover opens the action popover and clicking keeps it open for touch and mouse use. Select element uses a cursor icon with click marks. While selecting or showing a focused element, it becomes a cross: click it to clear the highlight and leave selection mode. The element chips remain in the message until individually removed. Source references can become outdated when the corresponding source changes.