# Build with AI

This guide walks you through building, editing, and publishing an example **Employee Portal Dashboard**. \
You can try it in your browser or just read along and watch interactive videos without spending usage credits.

{% hint style="info" %}
Note that your result app may differ from the one you see here.
{% endhint %}

## Step 1: Build your app with the prompt

1. On the homepage, click **Create new app.**
2. Paste this prompt in the chatbox:

{% code overflow="wrap" %}

```
Build a modern, responsive Employee Portal Dashboard: include employee profiles, company announcements, tasks & to-dos, leave & attendance, team directory, and quick action shortcuts. Arrange content with cards, tables, and charts for clarity. Add search/filter features, realistic sample data, and interactivity.
```

{% endcode %}

{% hint style="info" %}
You can also paste an image of a similar app you want to build or select from a number of available ready-made templates.
{% endhint %}

3. Submit your prompt and wait while the AI creates your app.
4. Try it out in the **Preview** tab.

{% @arcade/embed flowId="Nj72nJ3fZ6nP9BdkhSXd" url="<https://app.arcade.software/share/Nj72nJ3fZ6nP9BdkhSXd>" %}

{% hint style="success" %}
Congratulations! You've just built your first app.
{% endhint %}

### Understanding AI usage credits

UI Bakery runs on third-party large language models (LLMs) that process your prompts and any visual images to build applications. The AI uses credits to measure the effort required to complete each task. Credits are used during the following phases:

* Planning
* Generating

More complex requests naturally require more credits.

The amount of usage credits you have left is displayed in the bottom left corner of the chatbox.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FTHEVSE3fgd7pW5D0l4Rd%2FCleanShot%202026-03-02%20at%2014.03.10%402x.png?alt=media&#x26;token=2af0eda8-c952-49e5-9de8-cae64b008f29" alt=""><figcaption></figcaption></figure>

As a new cloud user, you'll start with a free usage credit allowance on the *Free* plan.

{% hint style="info" %}
Initital credits have a one-month expiration date.
{% endhint %}

Once you use them up, you need to upgrade your plan to get additional credits and continue building. You can find details about available plans on [our website](https://uibakery.io/pricing).

## Step 2: Connect a data source

UI Bakery allows you to choose from creating & connecting a *hosted* database or connecting *your own* data source.&#x20;

### Option 1. Connect tab

You can connect a data source yourself via the **Connect** tab in the top bar.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FBNaXrsJ7cksDxr5P9C1J%2FCleanShot%202026-03-02%20at%2014.18.19%402x.png?alt=media&#x26;token=aa853762-d1fe-4efd-8121-dddcf53747f1" alt=""><figcaption></figcaption></figure>

To connect a new data source, click **Connect Data Source** in the top right corner, select the data source you need, and provide the necessary connection details.\
Check out what data sources are currently supported for connection on the [Integrations](https://docs.uibakery.io/build-with-ai/integrations) page.

{% hint style="info" %}
You can find more info about data sources and how to connect them on these pages: [Connect a data source](https://docs.uibakery.io/build-from-scratch/getting-started/connect-a-data-source), [List of data sources](https://docs.uibakery.io/reference/data-sources).
{% endhint %}

#### Database connection

UI Bakery allows you to connect multiple data sources/databases to your app, if necessary. With databases, *two connection options* are available:

* **Set as primary** - the database will be used as the primary source of data in the app. It will be shown in the *Database* panel and all app migrations will be run against it.
* **Connect** - the database will be only used for loading and modifying data. Migrations will not be run against it.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2F5BWR811wYmWqXUML4tlw%2FCleanShot%202026-03-02%20at%2014.32.26%402x.png?alt=media&#x26;token=ee8d6a25-b9ed-42e3-b703-e82876fe357c" alt=""><figcaption></figcaption></figure>

You can create and manage your primary hosted database directly in the app builder via the **Database** tab in the top bar.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2F1SiP0m79vmEDXTbvy3lh%2FCleanShot%202026-03-02%20at%2014.43.27%402x.png?alt=media&#x26;token=39d12e98-686d-44a5-977a-4641be9780bf" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Check out [Database editor](https://docs.uibakery.io/extras/ui-bakery-postgres/database-editor) to learn more about working with hosted databases.
{% endhint %}

### Option 2. Ask AI

The second option is to ask AI to connect the data source you need in the chat or it may also recognize it from the prompt and suggest this for you.

You can also paste your connection settings and the data source you want to connect into the chat (for example, username, host, port, etc.) and in the connection window you will see your credentials already pre-filled. This works for all supported data sources.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FnNyMAfnSQ5CszHnMu5HU%2FCleanShot%202026-03-02%20at%2014.54.52%402x.png?alt=media&#x26;token=4f2127df-2f07-487e-a937-0b6b667c3342" alt=""><figcaption></figcaption></figure>

## Step 3: Customize the app

After generating you first app version, you can continue refining and customizing it to fit your needs. \
For example, let's now add some color accents to make the app more vibrant and visually engaging. Paste this prompt in the chatbox and press *Enter*:

{% code overflow="wrap" fullWidth="false" %}

```
Use light blue (#3B82F6) as the primary accent color. Apply it to the active navigation tab and all action buttons (e.g., Edit Profile, Add Task). Use a lighter tint #60A5FA for hover or focus states. Keep the rest of the theme unchanged.
```

{% endcode %}

{% @arcade/embed flowId="QPRzeQaN5zuX1OSenJli" url="<https://app.arcade.software/share/QPRzeQaN5zuX1OSenJli>" %}

{% hint style="success" %}
Great! Now you know how to change the app once it has been created. You can keep refining it till you get the result you need.
{% endhint %}

### Reverting to a checkpoint

Sometimes you may change your mind about the updates you made to the app and you may want to undo them. It's totally fine, and in such cases, the easiest way is to revert your app to a specific checkpoint.

For example, let's say you are not happy with the new accent color and you want to restore the app's original color scheme. Simply select the checkpoint from before the color change and confirm. The app will automatically revert to that state.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FkLU853IG9RmvQ0GtdmnV%2FCleanShot%202026-03-02%20at%2016.33.17%402x.png?alt=media&#x26;token=df0bfb59-f774-4398-97cf-45db5f9a223f" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Note that restoring your app to a previous version doesn't use any credits.
{% endhint %}

## Step 4: Make changes in the Code

You can make any changes you need to the app with prompting but it may also be useful to know how to make changes directly in the code as well.

{% hint style="warning" %}
We do recommend caution when changing something directly in the code since these changes are not tracked in release history. Make sure you know what you're doing or you may need the AI to help you fix it.
{% endhint %}

Let's change the name of the company in the sidebar.

1. Click the **Code** tab in the top bar.
2. Use the **Search** bar to look for the component you need to update (in our case, *topbar*).
3. Locate the '*Acme Corp*' text and change it to '*UI Bakery*'.
4. Go back to the **Preview** tab to see the changes applied.

{% @arcade/embed flowId="G5VvymAFOzDzi6YdcMZe" url="<https://app.arcade.software/share/G5VvymAFOzDzi6YdcMZe>" %}

{% hint style="success" %}
This action also doesn't use up any credits.
{% endhint %}

## Step 5: Publish your app

Now it's time to publish your app!&#x20;

Click the **Release** button in the top bar, select your version, add a description if you want, and choose the environments you want to deploy to.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FfwOB5ns2g9gCvjwfwJvm%2FCleanShot%202026-03-02%20at%2016.53.53%402x.png?alt=media&#x26;token=73c33078-c744-411c-8138-9703afe24588" alt=""><figcaption></figcaption></figure>

You can also share the app with specific users or make it public from the **Share** button popup.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FmRruWygM7QTfiZDPJSIH%2FCleanShot%202026-03-02%20at%2016.56.06%402x.png?alt=media&#x26;token=c4824cfe-d6e4-4ea2-a453-d982fea9d7ac" alt=""><figcaption></figcaption></figure>

## Need help?

If you can't find something in our docs or you're just stuck and need help, feel free to contact us in the chat or at <support@uibakery.io>. Our team is always willing to help 🤓.