Features

Code view

In the Code tab, you can manage your app code and tweak it without prompting. Having said that, we do recommend to be careful when changing the code directly since such actions are not tracked in the release history. It will be impossible to revert to a specific checkpoint if something goes wrong.

You can right click on any folder or file to rename or delete it, and you can also add new files or folders to the existing structure. The Search bar at the top allows you to quickly search for any file you want to update.

Below all the folders, there's an AGENTS.md file—here you can add specific app-level instructions that the Agent will refer to when building an app. For example, you can give more details about your application context, specify your coding style or design guidelines, or just any other things you want the agent to apply consistently while building.

It always helps to be specific and clear in your instructions and provide examples to help the Agent better understand your preferences.

Tools

You can access app settings—either from the UI Bakery icon in the Builder or from the Workspace menu—and configure specific tool settings.

circle-check
  • Migrations

The migrations tool allows the agent to adapt the database structure if the app requirements change over time or there's some structural mismatch.

It can apply migrations either automatically or manually. If you choose the manual option (Always ask), then each time there's a migration, a prompt will appear in the chat and you can select Execute or Reject there.

circle-info

By default, the Always allow option is enabled for all new projects.

  • Screenshots

Think of this tool as the agent's eyes. The agent knows what exists in the app's schema, code, and configuration but sometimes apps behave in a different way when they're rendered. The screenshot tool allows the agent to inspect the actual UI state and make decisions based on what users really see.

For this tool, you can also choose either the automatic or manual option. If you choose Always ask, then each time the agent needs to take a screenshot, you'll see a prompt with the following options: Always allow, Allow once, and Deny once.

You can select the option that best fits your specific needs.

circle-info

By default, the Always allow option is enabled for all new projects.

  • Executing actions

This tool is more like the agent's hands or sensors. It allows the agent to safely run controlled operations to inspect your app data instead of guessing, for example, query a database, check system state, call an API, etc. The results of this action call are used only to answer the user's request.

For this tool, you can also choose either the automatic or manual option. If you choose Always ask, then each time the agent needs to make an action call, you'll see a prompt with the following options: Always allow, Allow once, and Deny once.

circle-info

By default, the Always ask option is enabled for all new projects.

  • Syncing data sources

This tool allows the agent to synchronize the data source structure to maintain an accurate schema model of your system. It is especially important in cases when:

  • A column is renamed

  • A new column is added

  • A table is removed

  • and others

Essentially, if anything changes in the database, the agent needs to synchronize those changes to avoid any possible issues.

Data source sync can happen either automatically or manually. If you choose the manual option (Always ask), then each time a data source sync is required, a prompt will appear in the chat and you can select the option that suits you.

circle-info

By default, the Always allow option is enabled for all new projects.

Multi-page apps

With the UI Bakery AI agent, you can create multi-page applications that support persistent state and URLs with query parameters.

In the URL, you can see the page you're currently on—the parameter changes when switching between pages. The app also stays on the same page after reload and works with browser back/forward navigation as well.

Actions

In your app, it's possible to create conditional actions so that you can control action execution. It can be especially useful in such cases as:

  • Not loading data until all filters have been selected

  • Fetching data only after a modal or tab is opened

  • Blocking mutations if a form is invalid or permissions are missing

  • and others

User context

The AI agent can access information about the currently logged-in user through the {{user}} context. This allows you to personalize actions, filter data, or apply user-based permissions.

Common fields include:

  • {{user.email}}

  • {{user.name}}

  • {{user.id}}

Login

If you want to add login to your app, the AI agent will suggest the following options:

  • Built-in UI Bakery auth - Users can access the app through the UI Bakery workspace login. This option is good for internal apps and you can use SSO, RBAC, audit logs, and other out-of-the-box security features.

  • Custom auth - Allows you to create your own custom login page with custom user database and auth logic within the application. This is a good choice for customer portals and similar apps where users are relevant only for this specific application.

You can choose one of these options in the prompt and the AI agent will implement the authentication.

Last updated

Was this helpful?