How to build an app with AI app builder

Hey folks! 👋

Last week, I ran a live workshop showing how you can build a fully functional HRMS onboarding app—backed by MySQL—using Veda AI inside DronaHQ. And no, we didn’t spend hours manually designing screens or writing SQL queries. We used screenshots and plain English prompts to build 80% of the app in minutes. 🙌

Here’s a step-by-step guide if you want to build along!
P.S.- I have attached the video of the live workshop (in case you want to check that out)

What you’ll learn

How to connect your own database
Generate UI from a screenshot (yep, seriously)
Bind data with a single prompt
Autogenerate forms from existing DB tables
Add actionflows using plain English
Master server-side pagination
🎁 Bonus: Apply a theme with one sentence

Before you start

Make sure you’ve got:

✅ Signed up on DronaHQ
✅ Access to DronaHQ Studio
✅ Drive link for images
✅Create a MySQL Database with an employees table. You can use the SETUP doc for data queries, or watch the workshop video for a step-by-step walkthrough on how to add a Connector.

Goal: build an employee onboarding CRUD app

Let’s jump in!

Step 1: Create a new app

Head to DronaHQ App Builder
Create a new App in the builder.
Find Veda AI in the left sidebar
Click to open it. A chat section will open of the left side.

Step 2: Generate UI from screenshot

For this apllication we are going to let Veda AI do the heavy lifting for us. You can upload screenshots, Figma exports, or even hand-drawn wireframes to generate upto 80% of the UI in seconds.

📂 Use this sample image from the provided drive link.

Your layout is ready. No drag and drop. No hustle.

Step 3: Bind data to a table

Goal here is to display the employee data in the table. To do that hover over your Table control, click on Veda AI Assist, and say:

"Bind employee data from @<DBname> <tablename>"

You can either use the query it suggests (dont forget to select the right database and the table) or navigate to Data query section → New → Connect Library → Select Database and paste this query:

SELECT * FROM <tablename>;

Pro tip: Veda AI understands your schema. You can chat with it about your DB!

Step 4: Autogenerate form

Next, we would like to insert new employee information to our existing database table. DronaHQ provides options to autogenerate forms for your table in just a few clicks.

Navigate to Screens → Click on “+” → Select “Tray”. A new tray would be created. We will not be using the templates here, instead we will select Autogenerate Forms option on the tray.

Choose your connector → table → Add Insert on click of submit → Generate Form

And bam! You get a fully wired CRUD form—ready to insert new employees into your DB.

Step 5: Add server-side pagination (for big data)

We want smooth performance when your data grows. Server-side pagination in DronaHQ lets you filter and load data directly from the backend.

Go to:
Data Queries → New → Connect Library

Pick your MySQL DB and run this query:

SELECT employee_id, name, email, phone, department, designation
FROM <tablename>
WHERE {{tablegrid.PROPERTIES.FILTERQUERY}}
LIMIT {{tablegrid.PROPERTIES.LIMIT}}
OFFSET {{tablegrid.PROPERTIES.OFFSET}};

✅ Important:
Turn ON “Server-side pagination” from the Table’s Properties Toolbar.

Step 6: Show total employees count

To display a count on top of your dashboard and add data query:

SELECT COUNT(*) as total FROM <tablename>;

Bind this to a Stats Card or Text Label control, and you’ve got live metrics.

Bonus: Apply custom UI theme in seconds

DronaHQ offers quick theme configuration across your app, easily managed through the console.
Just navigate to top-right to Setting icon → Themes → Choose your themes

Incase, you want to edit the themes configuration, head over to your Admin console → Account Settings → Themes Configuration