How apps work
Learn how apps work in Retool, including AI-assisted code generation, the build process, and how apps connect to your data.
| The new app building experience Availability | |||
|---|---|---|---|
| Cloud | Closed beta | ||
Explore the fundamental concepts of apps in Retool.
App editing
The primary development experience of apps is by prompting an AI agent with natural language. Use the Chat tab to generate apps, make code changes, or update the theme.
Apps also support manual code editing in the Code tab.
Learn more about the app editing experience on the App builder page.
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
Apps use resources to connect to your business data.
When prompting, you can suggest that Retool uses a particular resource by @-tagging it by name. If you don't know what resource is most appropriate, Retool investigates the schemas of available resources and intelligently suggests which one to use.
When using using the Chat tab in the app builder, Retool only explores and connects resources for which the user has Edit permission.
Learn more about data and functions on the data page.
Functions
Functions are the logic operation that Retool uses to interact with your resources. Functions are multi-step, TypeScript code with typed parameters. Functions run queries against your resources, apply business logic, and return structured results. They are serverless and run on Retool's backend.
When Retool writes a query that adds, deletes, or modifies data in one of your resources, it sends a human-in-the-loop (HITL) request to you in the Chat tab.
React-based user interface
Apps are built using React, an open-source JavaScript library developed by Meta that is most commonly used for creating user interfaces in web and mobile apps. Retool uses React 19.
In addition to React, Retool uses several libraries to power the visual experience:
- shadcn/ui: Used for most components and component styling.
- TanStack: Used for tables.
- Recharts: Used for charts.
- Lucide: Used for icons.
- Tailwind CSS: Used for theming.
- React Router: Used for multipage navigation.
Third-party packages
If you want to customize your app beyond the capabilities of these libraries, you can add public npm packages to your app. Use npm packages to add custom components, extend functionality, and tailor your app to your user needs.
Learn more about adding custom components using third-party packages.
Theming
Apps support organization-level theming. In the theme editor, you can choose color, style, and typography settings that can be applied to apps across your organization. The choices you make in the theme editor propagate to Tailwind CSS rules stored in shadcn/ui variables. You can also choose to edit these variables manually for more fine-grained control.
| Organization-level Themes Availability | |||
|---|---|---|---|
| Cloud | Generally Available | ||
| Self-hosted Edge 3.36 or later | Generally Available | ||
| Self-hosted Stable 3.33 or later | Generally Available | ||
In addition, builders can override organization-level theming by using the Chat tab to describe the visual characteristics of their app.
Learn more about theming in apps.
Governance
Retool provides a layer of governance that enables admins to control the users and user groups who can access apps, resources, workflows, and agents. To learn more, refer to the Administration and Permissions documentation.
AI Resources
Organization admins must configure one or more AI resources before builders can write prompts to create or edit apps. The following list outlines the key points of what Retool supports for AI app building:
- Admins configure their AI model provider through AI resources.
- A selection of models created by OpenAI, Anthropic, and Google Gemini are supported.
- You can also access these models through Google Vertex AI, Amazon Bedrock, and Azure OpenAI platforms.
- All organizations can use . Enterprise plan organizations can use their own keys.
- Users of OpenAI, Anthropic, and Google Gemini that also bring their own key can use an AI proxy to provide governance for their AI usage.
Custom AI provider resources are not supported in apps. Use one of the dedicated provider resources instead.
The following diagram outlines your different options for configuring AI resources.
Lifecycle
There are several methods that you can use to manage your app lifecycle in Retool.
Integrated publishing and versioning
Inside the app builder, you can use integrated versioning and publishing capabilities:
- Publish a version.
- Roll back changes by restoring an earlier version.
Learn more about publishing apps.
Source Control
Enterprise users can also utilize Source Control to version apps and track changes using a git-based workflow. Integrate Retool with your chosen source control manager, then protect your app.