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:

• Conversations: your threads with the AI Builder. See Working with the AI Builder.
• Layers: the layers of your app’s map.
• Data: one panel for all your data, with two entries: your Datastore and your Supabase database. See Data and databases.
• Map Controls: the widgets in your app and their settings. See Widgets.
• GitHub: your repository, its commits and its diffs. See GitHub.
• History: the snapshots of your project. See Code editor and history.

At the bottom of the rail, Project Settings opens the settings of your app in one window, over the editor: its name, the AI models it may use, and its publication. The Publish button of the header opens the same window on Publish app. See Publishing your app.

The left region: chat and panels

The left side of the workspace holds the chat panel, where you talk to the AI Builder, 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, workspace

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, and your project’s memory.

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

The right rail

A second, narrower rail runs down the right edge, and it works on what you have selected rather than on the project as a whole:

• Style: the appearance of the selected layer.
• Popup: what your app’s visitors see when they click a feature of that layer.
• Widget parameters: the settings of the selected widget.

Select a layer in the Layers panel and the first two follow it. Click the icon of the panel already open to collapse it. With nothing selected, each panel says so rather than showing an empty form.

This mirrors the Map Builder, where the same split applies: the left rail is where things come from, the right rail is where you shape the one you picked.

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 Builder works on the exact same project, so you can hand off to it and take back over at any point.