Introduction

This is a quick guide to show you how to create a simple app with the ChatGPT API... using ChatGPT. I had the idea for the Fortune Cookie Generator while having lunch at a Chinese resturant just after I had finished Deeplearning.io's excellent course on getting started with the ChatGPT API.

All you need to follow this guide is very basic programming skills, having ChatGPT by your side enables you to build things far more advanced than you would have previously attempted! (I strongly recommend using ChatGPT's Code Interpreter model).

If you want a preview of what I built, here is the link, and here is the code.

Contents

1. Define your project requirements
2. Get the basic project running
3. Improve the interface and UX
4. Improve the prompt

Define your project requirements

Start by defining your project's requirements:

• For a simple website you don't need to be overly specific, in fact it helps to be more generalised as ChatGPT will be able to fill in the gaps of your request.
• Don't give all of the requirements for the end result, just enough to get it working.
• Mention the limits of your knowledge and what you are confident with, this will help ChatGPT walk you through the output at the right level.

Here were my requirements:

- System displays a digital fortune cookie that has a unique message generated by a gpt-3.5 model.
- System is hosted and accessible on the internet.
- System can be refreshed to generate a new fortune cookie message.
- System generates a short fortune cookie message of one sentence length.
- System uses the OpenAI API and the API key is handled via a .env file.

Requirements are also useful for prompting ChatGPT to take the time to think through the problem instead of rushing into it. It helps to shape your request in an order:

1. Ask to review the requirements,
2. add any that might be missing,
3. write technical requirements,
4. write a plan of how they will be addressed, and
5. then work step-by-step to build the project.

At this stage it's also helpful to ask for all code to include detailed comments (this also helps think through the answer) and to include where each file fits into the folder structure (this is often missing).

Get the basic project running

Getting all of the systems, environments, and code working together is often the hardest and most frusting part of building something. It's one thing to follow a tutorial online, it's much harder when you need it to run on your machine. For this project I tried something completely new so I could learn how to build in this new way (I used Flask running in a Heroku container).

The old way would involve banging your head on docs, reading half-relevant stack overflow threads, and eventually bugging a coworker for help.

The new way is to use plain language to describe what you're having difficulty with and then dumping all of the error logs into ChatGPT.

ChatGPT won't give you a perfect result out of the gate. You need to work together to resolves your issues: ChatGPT can't read your mind and you can't explain what you don't understand. In this new world, you are the boomer trying to use the printer and ChatGPT is your child trying to fix it over FaceTime.

A few tips for this stage:

• I had issues with routing which is quite common with this approach.
• It can help to ask how to exactly to run it on your laptop and using your development environment (and how this will differ when you put it into production).
• Before you put it on the internet you want to ask if everything you have done is secure.

Improve the design and UX

Now that everything is functional you can improve the design and UX.

This is another area where ChatGPT excels. I've found it's best not to be prescriptive and let ChatGPT use it's creativity. My prompt was just "Can we make the frontend more interesting? Can we add CSS to make the page more visually appealing?" and it was able to create a colour palette in line with the fortune cookie theme. It also wrote the headline "your fortune awaits" – a fun title I would not have thought of and would have been missed if I told it exactly what to do.

You can ask also ask to add loading states and transitions. The biggest flex for ChatGPT was getting it generate the fortune cookie image in SVG! The result wasn't perfect but it still blows my mind that a language model can think spatially and create an image.

Improving the prompt

Humour is the last domain for humans, ChatGPT kinda isn't that funny. It took a few shots to get the prompt right and mixing in some feedback from ChatGPT. This is an important step as it's what your users will remember.

Changing a word or two could dramatically change the output. It would go from bland and repetitive, to overly risque and assertive. With this prompt I landed on a happy blance with 95% of the time the output was SFW:

You are a cheeky fortune cookie. Your goal is to provide short, funny, and slightly inappropriate fortunes. Keep your response to a short sentence that fits in a fortune cookie. Do not greet the user, just reply with a fortune.

And here is the finished result!.

What will you build?