How to build a Generative AI App with no coding experience

Alex Austin
6 min readMar 27, 2023

--

I enjoy learning by doing and it can be challenging to determine where to start. This simple tutorial will show you step-by-step how to create a Generative AI Application and requires no prior knowledge. Following these steps should take ~30–60 minutes and you will end with a working AI application!

For this tutorial, we’ll use OpenAI, Google Cloud Functions, and Python. Don’t worry, everything you need (including the code) is below. We’ll build a simple app that uses a pre-trained transformer model (the one that powers Chat GPT) to suggest punny animal names. The app is not groundbreaking, but the concepts & code can be re-used to create any AI chatbot or recommender. Let’s get started!

Step 1: Create an OpenAI account and log in. I used ‘Continue with Google’ for simplicity, I have enough trouble remembering my existing passwords.

Enable billing by adding a payment method and setting a usage limit (if desired). Your first $5 are free and I set a hard limit of $10 just to be safe, though you can see that I’ve only used 4 cents so far.

Set-up OpenAI so we can use the AI transformer models that power Chat GPT
Input a payment method and then set a usage limit, just to be safe

Step 2: Create a secret API key and save it in a text doc, we’ll use it shortly.

Creation of an API secret key for use in our Machine Learning Application
Create a new secret key. Make sure to copy and save it somewhere on your computer.

Step 3: Create a Google Cloud account and create a new project. Google Cloud provides $300 in free credits and most services also don’t incur charges until a minimum usage is met, so you shouldn’t have to worry about billing and charges for this test app. We’ll use Cloud Functions, which includes 2 million invocations per month in the free tier.

Give your project a name and hit create. You can leave Location as is.

Step 4: Set up Google Cloud Functions: Search for Cloud Functions. Create a new function and enable required APIs when prompted.

Leave all the defaults and hit Save and then Next.

Delete the starter index.js and package.json, you won’t need it.

Choose “Activate Cloud Shell” in the top right. You may need to accept terms or authorize if prompted.

Now you have a command line terminal at the bottom of your browser window. At this point, you should feel like a hacker. Pretty cool.

Step 5: Download the code we need. The following command will download all the files you need for this sample project from Github and save a copy within your Google Cloud project. Copy this line of code:

git clone https://github.com/openai/openai-quickstart-python.git

Paste it in the command line with Ctrl + V and press Enter

Paste and press enter. You will see a similar message as it clones the code into your project.

You’ve now downloaded a copy of the code you need and saved it within your own project. By the way, the sample code was created by OpenAI as part of their Quickstart Tutorial. If interested, you can read more here.

Step 6: Update the code to reference your own OpenAI API key. Select “Open Editor” to see the files you’ve just created.

On the left, you’ll see a folder with several files. These are the one’s you’ve downloaded from github and saved in your project. Open the app.py file.

Comment out the line that starts with openai.api_key and re-write it to reference your API key (the one you created in Step 2 above). It should look like this:

openai.api_key = “yourAPIkey”

Include the double quotes around your key. In the example below, you can see that I’ve commented out the initial line of code with a hash symbol (#) and re-written it with my own key.

Step 7: Understand the code

Take a look at the app.py code (below). You don’t need to understand all of it, but lets look at a few key pieces:

Lets review 3 parts of the code for better understanding (detailed below)
  1. Take in an input from a form. Assign the variable “animal” equal to that input. In other words, the user is going to input some text into a form and we’re going to save that text to a variable called “animal” so we can use it later.
  2. Define which large language model we want to use and how we want to use it. Here, we are using “text-davinci-003” which is one of the models that powers Chat GPT 3.5
  3. Generate a prompt using the variable “animal”. This is very similar to inputting a prompt into Chat GPT, only in this case we’re designing the prompt specifically for our application’s use case. The prompt tells the LLM to suggest three animal names for a superhero, and then gives examples of the type of response we want (e.g. Cat should return an answer like “Captain Sharpclaw”). The curly brackets {} at the end of this code snippet tell the program to dynamically replace {} with the variable we provide it, which in this case is the animal provided by the user.

Step 8: Run your application

Go back to the terminal by clicking “Open Terminal”. Navigate to your application with the following command (cd stands for change directory):

cd openai-quickstart-python

Install the dependencies you need to run your app. These have already been defined in the requirements.txt file. To do this, run the command below:

python -m venv venv
. venv/bin/activate
pip install -r requirements.txt

Finally, run your application:

flask run

Your App is now running on the local port! It should look similar to the below, though the number may not be exactly the same.

Step 9: Test your application

Click on the http link, which should open your application in a new browser window. Input different animals to see what punny superhero names your application comes up with.

Step 9: Congratulate yourself

That’s it. You’ve successfully created a working AI application! Note that this URL is only accessible on your current machine because your application is hosted locally, meaning that it has not been opened up to the public internet.

If you want to dive in further, play around with the code in app.py to prototype your own ideas for new applications. Try updating the prompt text to see how it impacts the output. If you want to change the front end webpage for your application, take a look at index.html within the “templates” folder of your project.

I’ll be experimenting as well and hope to put together a follow on post to improve our app. Stay tuned for Part 2: Customize your app and make it public. In the meantime, comment below with any questions or suggestions!

--

--

Alex Austin

Learning new tech through trial and error is fun. Sometimes I write guides to help novices like me learn cool new tools.