App builder
The app builder, including the AI-powered editor, live preview, and debugging tools.
| The new app building experience Availability | |||
|---|---|---|---|
| Cloud | Closed beta | ||
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.
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.
- 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 development session and an app preview. Your development session and thread context is preserved if you leave or close Retool and return.
Each new thread opens a new development 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 Require approval to run functions that may modify data setting at the top of the Data tab means that you will be asked to approve each function run that modifies the data in your resource. 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.
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.
Navbar
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.
On the right side of the navbar are controls for publishing and sharing your app. Learn more in the Publishing guide.