Skip to main content

App builder

The app builder, including the AI-powered editor, live preview, and debugging tools.

The app builder is the interface you use to create apps in Retool. It is available to both internal users and builders, but only builders can publish apps.

The app builder is made up of these primary areas:

  • Preview canvas: Preview and interact with the interface of your app.
  • Left panel: Use AI to build your app, investigate the connected data, and edit the code.
  • Navbar: Configure, preview, share and manage your app.

Preview canvas​

The preview canvas is the main space on which Retool places components. It shows the interface that end users of your app interact with. As you build, interact with the app on the canvas and test out key functionality.

The top of the preview canvas shows you a preview of the app URL, and several key controls.

Selection mode​

Click to open Selection mode. This mode enables you to click on a component you want to change, and prompt the agent to make scoped edits that touch your selected component only.

Theming​

Click to open the theming selector. Themes are defined at an organization-level. Choose from one of the themes, and toggle between light and dark mode. Learn more about themes.

Themes can be overridden by prompting the agent to make visual changes in the Chat tab.

Left panel​

The left panel of the app builder contains three tabs: Chat, Data, and Code.

Chat tab​

The Chat tab forms the primary development interface of your app. Use the Chat tab to describe in natural language the changes that you want to make to your app. Retool uses an AI agent to plan and execute the changes you requested.

At the bottom of the tab, there are a few key controls that help you control the prompting experience:

  • starts a new chat thread.
  • shows recent threads.
  • enables you to upload a file. Use this to provide the agent with additional context. You can also paste files and screenshots to attach a file to your message. Images can be up to 5 MB, and documents can be up to 10 MB. Each message can have up to 10 attachments.
  • Model options allow you to configure which AI model you want the agent to use. When you begin prompting, this icon shows a progress ring that indicates how much of the allowable context window you have used.

As you prompt, you will see the agent read the files in your app, reason about the logic, and begin to write code. Monitor the Chat tab as you build, because you might be asked to approve function calls that edit or add data to your data source.

Threads​

Each thread in the Chat tab is an isolated chat conversation with the agent that is tied to a building session and an app preview. Your building session and thread context is preserved if you leave or close Retool and return.

Each new thread opens a new building session. This means that when you begin a new thread, the app preview canvas resets to the latest published version of the app, and the Chat tab has a fresh context window.

When using Source Control, each thread corresponds to a distinct branch.

Publishing your app concludes a thread and disables further prompting. Open a new thread to continue iterating on your app.

Data tab​

The Data tab shows the resources connected to your app and the functions that interact with them. The Data tab is not populated until you begin building your app in the Chat tab.

The Ask to approve functions when previewing app setting at the top of the Data tab requires you to approve each function run that modifies the data in your resource while you are previewing the app. It is enabled by default. Click the toggle to turn this setting off.

Retool recommends leaving this setting enabled. Disable this setting only with extreme caution. Ensure that you are not connected to resources that contain critical data.

All functions must be approved before you publish an app. Retool will prompt you to approve them if you have not done so at publishing time.

Resources​

The Resources section contains a list of the resources that your app is connected to. Each item includes information about the type of data it accesses (such as REST API or PostgreSQL) and the name of the resource.

Functions​

The Functions section contains a list of the functions that interact with your connected resources. Each function displays the number of times it has been run during the current session.

Select a function to open the Function playground. You can use the Function playground to enter sample parameters and perform manual function runs. The panel on the right displays the code by default. Click to view a visual representation of the function.

Code tab​

The Code tab shows every file that your app uses. You can view all files, and you can edit those that do not have a icon. Learn more in the Code editing guide.

Use the Navbar to navigate between tabs. The Preview tab always appears first, and you can navigate between open function playground and code editor tabs in the navbar.

The Navbar also contains key controls for publishing and sharing your app:

  • Publish or Ask to publish creates a new release of your app.
  • copies the link of the published app to your clipboard for easy sharing.
  • opens the Version history tab. Learn more.

Version history​

The Version history tab allows you to view recent app edits in two ways:

  • The Current thread tab shows a summary of the changes that you and the agent made while the current thread was open.
  • The Publish history tab shows all published versions of your app. You can also use this tab to restore previous versions.

The button (only for protected apps) syncs changes from your connected git repository.

Capabilities and limitations​

The following tabs show a summary of the current capabilities of the app builder. Limitations describe functionality that isn't yet supported in apps but may exist in classic apps.

  • Generate and modify apps in the Chat tab by prompting the agent in natural language.
  • Upload files, such as brand guidelines or specifications, to inform what the agent builds.
  • Choose which AI model the agent uses to generate code on a per-thread basis.
  • Preview the app interface live on the canvas as the agent builds.
  • Manually edit code in the Code tab or Data tab.
  • Use the Function playground to manually run functions, view code, and visualize control flow.
  • Extend functionality with third-party npm packages.
  • Apps run on React 19 and a set of supporting libraries that power the visual experience.
  • Build apps using Retool's MCP server.