Interface overview

The App Builder opens as a single workspace in your browser. This page names each part of it, so the rest of the guide can refer to them.

The header

The bar across the top holds your project identity and the main actions: the project name, save and share actions, undo and redo, and the switch between the different areas of the editor.

The tool rail

A vertical rail of icons runs down the left edge. Each icon opens a docked panel:

• Assistant: the AI helper for the App Builder. See Working with the AI Assistant.
• Datastore: your saved assets and web maps, ready to drop into the app. See Data and databases.
• Data Sources: connectors and databases, including Supabase.
• Controls and Widgets: the widgets in your app and their settings. See Widgets.
• History: the snapshots of your project. See Code editor and history.

The left region: chat and panels

The left side of the workspace holds the chat panel, where you talk to the AI Assistant, and the contextual panel for whatever rail section you have open. You can resize this region, and switch between the chat and the active panel.

The right region: preview, code, terminal

The right side is where your app comes to life, across a few tabs:

• Preview: the live app, updating as you or the AI make changes. See What is the App Builder for how the preview starts.
• Code: the code editor, where you read and edit the real files of your project.
• Workspace: the files and structure of your project.
• Terminal: the output of the development server and commands.

When your running app throws an error, an error panel opens under the preview and shows what went wrong, so you and the Assistant can fix it quickly.

Everything, by hand or with AI

The App Builder is a real IDE. You can drive it entirely by hand: edit the code, wire a widget, connect a database. The AI Assistant works on the exact same project, so you can hand off to it and take back over at any point.