How to build a 6-figure AI app without any coding knowledge

Kyle Pham | AIpreneur

Published in

AI Creators

7 min readJan 24, 2024

Welcome back, entrepreneurs.

Since its launch in November 2022, ChatGPT has been taking the world by storm.

This has led numerous large corporations to attempt replicating its success, with developments like Google Bard, Claude, Llama, and Palm2.

However, everyone is so busy discussing about which tool will ultimately reign supreme (with OpenAI currently leading the pack)…

That they have overlooked the acutal winner of the race:

Micro-AI apps built on ChatGPT itself.

Almost every AI tools you see today, such as Copy AI, Jasper, TweetHunter, etc., are built on the foundation of ChatGPT’s technology.

And the best part?

Their focus on specific use cases (Copy AI for copywriting, TweetHuner for X growth) often places them at the top of their respective niches.

As a result, this specialization often leads to great financial success.

These developers were able to avoid the ridiculous costs and time required to develop a new Large Language Model (LLM), thanks to the free foundation provided by ChatGPT.

So if you ever plan on building one, this is what you need to know:

Basic app development
OpenAI API integration
Prompt engineering skill mastery

And you can achieve all of these without any coding knowledge

In this week’s issue of AIpreneur Club, I’ll guide you through each step.

While others charge over $149 for similar guides, you can access ours for free.

Enjoy.

Step 1: No-code Introduction

Prior to 2012, building a functioning app with integrated automation and payment systems would likely cost upwards of $1,000.

Developers aren’t cheap.

And great ones wouldn’t charge anything less than $25,000.

However, with the launch of bubble.io, a no-code, full-stack app development tool, a whole new world of possibilities opened up.

Since its inception, Bubble has came a long way.

Currently, it enables the creation of scalable SaaS businesses using tools like Stripe & PayPal for payments, Zapier for automation workflows, API connectors, Typeform, and much more.

And it’s not just simple one-function apps either.

Companies like comet.co have successfully scaled to over $10M by building on Bubble.

You see…

The gap between innovators and developers has never been narrower.

It’s only up to you whether you want to build one or not.

Now, let’s build our first simple AI app to understand the basics.

Step 2: Setting up Bubble

First, visit the Bubble platform and register for a free account.

Select ‘Create an App.’

An application assistant will guide you through setting up your website name, default font, color themes, and plug-in integrations.

For this demo, I chose to replicate the style of my main website theaipreneur.club to save time coming up with new design concept.

I have my own website at theaipreneur.club so I just copied my style from there over here.

You’ll start with a blank canvas, but Bubble offers pre-made components for easy drag-and-drop design.

(same as Wix or SquareSpace if you has ever used them before)

Navigate to the Components button on the navigation menu.

Here’s what my canvas looks after I added a header, a hero section, and a footer template from Bubble.

The only elements left to design were the input field and button.

After a quick 30 seconds of drag-and-drop and editing, I achieved this user interface.

Step 3: API Connection

Now, onto the crucial part.

To create an AI app powered by ChatGPT, you need to connect your app with OpenAI’s server.

Visit the OpenAI API site to get your own API key.

It should be looking something like this:

sk-[SERIES OF NUMBERS]

Copy and securely save this key as OpenAI won’t display it again.

Then, go to their billing site and add a minimum of $5 to activate your API key.

You won’t be charged more than that amount without notification.

And trust me, you can do a lot with $5 of OpenAI credit.

Back in Bubble, navigate to the plugin screen and install the Bubble API Connector.

There are already many YouTube tutorials out there explaining how to link apps with OpenAI using this system.

But here’s how I set it up:

Main screen

Makes sure that your ‘Key value’ is:

Bearer sk-[SERIES OF NUMBERS]

Expand the cell beneath to access another screen — The API Call screen.

Ensure that it matches this configuration:

Paste the following into the body:

{
    "model": "gpt-3.5-turbo",
    "messages": [
        {
            "role": "user",
            "content": "You are a helpful assistant."
        }
    ]
}

Don’t worry, this text doesn’t mean anything.

It’s just a placeholder that we use for our prompt setup.

Click on Intialize Call at the end.

A confirmation window like this will appear.

Hit Save.

Step 4: Prompt Enginnering

Before we get to the prompt, finish these tasks first:

Add a Group Text under the Generate button.
Add a Text element inside that group text.

In the rich text editor of this element, click on Add dynamic data and select Parent group’s text.

Now, click on the button and choose Edit Workflow.

A workflow screen like this will appear.

For step 1 in the workflow, select the OpenAI API — API POST call option that we recently set up.

A window will appear, asking for the JSON body.

i.e. the prompt that we are going to send to OpenAI.

To keep it simple, here is the prompt that we are going to use.

My business idea: [INSERT BUSINESS IDEA]
My Ideal Customer Profile: [INSERT ICP]

Role: A professional product designer

Task: Help me come up with a list of 5 premium paid product idea. The sole focus should be to maximize earnings by providing value to my ICP, having them recognize that my product would solve their pain points right from the start so that they would purchase my product.

But in order for OpenAI to read it properly, we have to change it to a JSON format.

Copy the following and paste it into the JSON body.

However, in the [INPUT PLACEHOLDER] that I put in the prompts, you must add dynamic data onto it.

Recall the input set up in the initial user interface?

In Bubble, you can include this data in the prompt (blue text).

Here’s the prompt in the screenshot above.

{
    "model": "gpt-3.5-turbo",
    "messages": [
        {
            "role": "user",
            "content": "My business idea: [INPUT BUSINESS IDEA]\nMy Ideal Customer Profile: [INPUT ICP]\n\nRole: A professional product designer\n\nTask: Help me come up with a list of 5 premium paid product ideas. The sole focus should be to maximize earnings by providing value to my ICP, having them recognize that my product would solve their pain points right from the start so that they would purchase my product. Please keep the description within 2 sentences only.\n"
        }
    ]
}

After that, here’s how I set up my step 2 inside the button workflow (blue means dynamic data)