🤖Build with AI

Generate an app with AI - no code required.

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.

Note that your result app may differ from the one you see here.

Step 1: Build your app with the prompt

1. On the homepage, click Create new app.

2. Paste this prompt in the chatbox:

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.

You can also paste an image of a similar app you want to build or select from a number of available ready-made templates.

1. Submit your prompt and wait while the AI creates your app.

2. Try it out in the Preview mode.

Congratulations! You've just built your first app.

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.

As a new cloud user, you'll start with a free usage credit allowance on the Free plan. Once you use it up, you need to upgrade your plan to get additional credits and continue building. You can find details about available plans on our website.

Step 2: Connect a data source

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

Option 1. Connect Data tab

You can connect a data source yourself via the Connect Data tab in the top left corner where you need to choose from a hosted database or your own. You can find more info about data sources and how to connect them on these pages: Connect a data source, List of data sources.

To create a hosted database, you simply need to select this option and give your database a name. You can manage all your hosted databases via the Database Editor tab in the left side panel.

Check out Database management to learn more about working with hosted databases.

Option 2. Ask AI

You can also 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.

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 click Enter:

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.

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.

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.

Note that restoring your app to a previous version doesn't use any credits.

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.

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.

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

1. Click the Code tab at the top.

2. Use the Search bar to look for the component you need to update (in our case, sidebar).

3. Locate the 'Acme corporation' text and change it to 'UI Bakery'.

4. Go back to the Preview tab to see the changes applied.

This action also doesn't use up any credits.

Step 5: Publish your app

Now it's time to publish your app!

Click the Release button in the top right corner of the screen. Select your version, add a description if you want, and choose the environments you want to deploy to.

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

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 [email protected]. Our team is always willing to help 🤓.