Build a working app with AI

As we discussed in part 1 of this vibe coding series, planning your app is crucial.

Unless you’re just tinkering about and thinking “let me see what I can do with AI”, if you’re serious about creating a useful product, you need to map things out.

During the prototyping phase, it must have been great to that quick win out of the way. You may be thinking:

“I, [insert your name], built a fully functioning app with little to no coding experience”.

Perhaps the app has a lot of rough edges, but a win is a win.

While vibe-coding a prototype makes for a great “I built an app in 4 hours” post on LinkedIn, there’s still more work to do in order to have your app ready “for the big leagues”.

Let’s start with the user interface design.

Leverage component libraries

Once the core flow makes sense, establish rules for how the interface should look and behave.

A component library provides common interface elements such as buttons, forms, dialogs, and menus. Material UI is one option for React apps. For native iOS apps, Apple provides system components via SwiftUI.

The library supplies the building blocks. Your design system determines how you use them together.

Define clear design rules

Define your fonts, colors, spacing, button styles, and page layouts. For example, choose one primary button style for the main action, a consistent width for forms, and a shared pattern for page titles and action menus. Decide how errors appear.

Keep those choices documented and available to the AI agent. Ask it to use the existing components instead of inventing a new style for each screen.

Extract reusable components

As screens multiply, identify patterns you’re repeating.

Maybe every provider card shows a photo, service category, location, and booking action. Turn that pattern into a reusable component that combines the smaller elements from your library.

Make every word earn its place

Microcopy is the small text that guides people through your app: button labels, field instructions, confirmations, and error messages.

AI can fill these spaces with vague labels, unnecessary explanations, or sales pitches (I hate that!).

As a rule of thumb, explain things to the extent that they need explaining. 

A name input field probably doesn’t need helper text under it saying “Enter your first name above” when simply being labeled “First name” will do the job.

Conversely, rather than cramming words in the title of a screen, you may want to break it up into title and subtitle.

Some other things to keep in mind regarding text:

• Use icons with intention. Familiar icons can save space. Ambiguous actions need visible labels. Give icon-only buttons accessible names, and don’t make users guess what a decorative symbol means.
• Put extra detail within reach. Tooltips and expandable help can hold secondary explanations. Keep essential instructions, costs, and consequences visible rather than hiding them behind a hover.
• Keep the voice consistent. Use the same name for the same thing throughout the app. Let personality fit the moment; a billing error doesn’t need a joke, and a settings page doesn’t need a pitch.

In fact, this is the area that I’d highly encourage you to use your own brainpower for. While you can ask ChatGPT or Claude for a second opinion, you’ll want to be thoughtful about how you’re wording things.

Time to make it sexy! The part people think about when it comes to “building with AI”.

But let’s be thoughtful about it now.

Using AI to build your app doesn’t mean the app itself needs AI features everywhere. In fact, too much “AI magic” can become a liability if things don’t work as reliably as presented.

When building Lyric Boost, I had to go through many iterations of lyric generation capabilities, before building a more fine-tuned lyric helper system that uses tiny doses of AI.

Check out the multi-step flow used in Lyric Boost:

Even then, the AI results are not perfect.

Certain lyric outputs may look good and “wow” a casual observer seeking amusement. But to the eyes and ears of a serious music artist, the value is less in “write lyrics for me” and more in “help me better phrase the lyrics I’m trying to write”, which is part of the broader goal of organizing ideas.

Therefore, the value prop of your app cannot solely be AI generation. But injecting AI powers in several small areas of your app, executed in a well thought out way really does add up.

How to connect AI to your app

With all that being said, you’ve gotta start somewhere. You too will have to generate generic AI results, before you can improve them with iteration.

Here’s what the setup process looks like:

1. Create a developer account with your AI API of choice (ex. Claude). Once you create the account, generate an API key.
2. Configure the API and store the API key and other config settings securely. For example, here’s how you’d approach when building with Lovable.

Generating and displaying AI results

With your AI API connected, build a simple flow around it. For example, a project management app could let users paste rough notes into a text box and click Generate tasks to turn them into a task list.

The configuration and flow may look like this:

1. User enters rough notes in a text box.
2. User clicks the ‘Generate tasks’ button, which triggers a prompt sent to the AI API.
3. Ther backend calls the AI API, combining the user’s notes with instructions such as “Extract the action items and return a short task list.”
4. It then sends the AI’s response back to your interface, where you display the suggested tasks.

You may want to let users review and edit the results before saving them.

If you need several outputs, such as a title, description, and tags, request structured output in JSON: named fields your app can read, check, and place into the right parts of the interface. Structured Outputs helps define that format.

Bills, bills, bills

Making your app’s chief value prop “it does AI stuff” is not only problematic for user experience.

It can lead to a surprisingly costly bill from the AI API provider.

Now, you don’t want to be a penny pincher and act too scared about API usage. But be mindful of where AI provides relevant value to users and where it ends up being decorative at best (and counter-productive at worse).

The last thing you want is every single action in your app triggering an AI API call “just because”. And god forbid, you definitely don’t want multiple AI API calls happening on page load for no value-adding reason.

There are ways to monitor and track such usage, but I’ll cover that in part 3 series where I discuss what to do beyond the MVP.

Your app’s main features are only part of the experience. Build the supporting flows people need to start using it and keep using it. Include what your MVP requires.

Get users in motion

• Sign-up, login, and recovery. If your app needs accounts, give people a reliable way to create one, sign in, log out, and reset their password. Use an established authentication service.
• Onboarding and first use. Guide people toward their first useful action, whether that’s creating a project or importing data. A helpful empty state may be enough; add setup steps only when they’re needed.

Let them manage things

• Account and profile settings. Let people update their details and manage or delete their account. If profiles are public, make clear which information others can see.
• Billing. For paid apps, provide a place to view the current plan and manage a subscription. We’ll cover payment integration later.
• Permissions. If collaboration is part of your MVP, define who can view, edit, invite, or delete. Enforce those rules beyond simply hiding buttons.
• Help and support. Give people an obvious way to get guidance or report a problem. A contact link can be enough to start.

These may be pages, modals, or steps within an existing flow. Connect them to the main experience: after signing up or finishing setup, people should know what to do next.

Your prototype may look convincing with sample data. Now make sure people can save something, come back tomorrow, and find it where they left it.

Give your data a home

Your app needs a database to remember information between visits. Some app-building platforms include one; other setups require connecting a service such as Supabase. Use your AI coding tool to identify what database the app uses and where you can inspect its records. If none is connected, ask it to guide you through setup.

Next, define what your app needs to remember. In a project tracker, that might be projects and tasks, each stored in its own table. A task could have a title, status, due date, and project ID that connects it to the right project.

Ask AI to explain the proposed structure in plain language before implementing it. Check it against the actual workflow: can a project have multiple tasks? Which fields are required? What happens to those tasks when a project is deleted?

Make the actions work

CRUD means create, read, update, and delete. These are the database operations behind familiar interface controls.

In your tracker, Add task creates a record. Opening a project reads its tasks. Changing a due date updates a record. Removing a task deletes it, or archives it if you want to preserve its history.

Connect those controls to real database operations. A task appearing on screen doesn’t prove it was saved. Check for the record in your database dashboard, then refresh the app and sign back in. If saving fails, the interface should say so and preserve what the person entered.

Keep records in the right hands

For an app with private accounts, connect records to the user or team they belong to. Enforce access through backend or database rules. Hiding an edit button doesn’t protect the underlying data.

Test with two separate accounts. Each person should be able to access their own projects while being blocked from someone else’s private records. If sharing is part of the app, check that viewers can read without gaining permission to edit or delete.

The difference between a “cool app” and software that produces business results comes down to how it supports your users and your business.

In the next article, we’ll cover user behavior tracking and interactions, along with payment setup and other integrations.