Agent

Let's have a look at the AI Builder interface:

1.Top bar

• UI Bakery icon - access App settings, Release history, go back to the workspace menu, or access additional links (our docs, community, booking a demo, and more)

• Connect Git - connect your Git repository

• Preview - see the real-time preview of the app you're building

• Code - see your app code and make changes to it

• Database - create and manage your primary hosted database

• Connect - connect a hosted database or your own data source right from the Builder

• Settings - manage your app settings

• Reload - refresh the iframe preview of the app without reloading the page

• Switch breakpoint - switch between a desktop & mobile layout

• Full screen preview - see the app in full screen

• Release - deploy your app or create a draft release

• Share - invite users to your app, manage their access, and make the app public

2.Agent sidebar

Displays the chat component to interact with the UI Bakery Agent.

The left side panel is resizable - you can adjust its size to suit your workflow and build more comfortably.

3.Workspace

Shows the contents of the tab selected in the header, for example, Preview, Code, Database, etc.

4.Bottom panel

• Logs - shows the current app logs

• Git - used to activate Git when you've connected your Git repo

• Command palette - to navigate the org and search for necessary components, projects, etc.

You can disable the command palette for end users, if necessary.

Chat

The Chat area is the main place where you interact with the UI Bakery Agent to build your app, either providing prompts or visual input. Here's what you can also find here:

a. Create a new chat with the Agent.

b. See the history of all chats and switch between them. You can also search them and delete the chats you don't need any more.

By default, chats get the creation date & time stamp name but after the first prompt they're automatically renamed.

c. Expands/collapses the agent sidebar.

d. Here, you type in your prompt for the Agent.

If at some point during building, you decide you want to go back to a specific app state, you can use the Revert to this checkpoint option under the prompt you need.

e. Displays the amount of usage credits you have left.

f. Picker tool - you can select an element on the page that you want to change instead of describing it in text for more minute changes.

g. Attach an image to your prompt (for example, of a similar app you want to build) for inspiration.

h. You can choose between a Fast/Smart model depending on your request. Faster model serves better for some quick edits while the Smart one is best when you want to make some complex changes.

The high-powered model requires more usage credits.

i. Click this button or press Enter to make your request.

While the agent is working, if the tab with the chat becomes inactive, you will hear a sound notification and a visual indicator will appear on the tab. This allows you to seamlessly work on other things and at the same time be aware that your prompt has been executed.

When building an app, you may get some Runtime errors—you may choose to fix or ignore them, if they're no longer actual, for example.