Agent

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

1.Header

• UI Bakery icon - access App settings, Release history, or go back to the workspace menu

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

• 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

• 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.Left side panel

a. Chat - displays the chat component to interact with the UI Bakery Agent

b. Database Editor - here you can manage all your hosted databases

c. Data sources - here you can connect your data sources and APIs

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

3.Preview/code view

Displays the preview of the app you're building or the code editor along with the app's folder structure.

4.Footer

• Additional info - links to our docs, community, booking a demo, and more

• 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 but after the first prompt they're automatically renamed.

c. 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.

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

e. 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.

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

g. 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.

h. Click Send or 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.