Creating a Web App with ChatGPT

As part of our continuous effort to learn about and implement new technologies, we decided to build a simple web app using ChatGPT to explore what it can do. The front-end was made with Webflow, and the request configuration was made with Wized - more on this below.

After a few hour's of planning and developing, here is the result:

https://recipe-factory-chatgpt.webflow.io/

It takes a few prompts and outputs a recipe - nice and simple.

Let's look at how we did it.

Planning

We started by coming up with a few ideas of what we could build. There were some really cool ones that would have taken a few days to create, so we narrowed down the list to quick and easy ones, before settling on a recipe generator.

From there we worked out what fields we wanted to have users input values into. We went with:

• Ingredients to use in the recipe.
• Ingredients to not use. You can ask to use random items, e.g. "5 random fruits and vegetables", this lets you make sure nasty cucumbers aren't added at random.
• Dietary restrictions - vegetarian, keto, etc.
• Style of cuisine - Indian, English, etc.
• Whether the recipe should be standard or creative.

From there we moved into design.

Design

The frontend was created using Webflow, which is one of the tools we use for frontend development at Propeller Digital. We went with a simple, one-page web app with some text, input fields, and a 'Generate Recipe' button.

The image in the background of a chopping board with food was generated by Midjourney, an image generation AI.

Development

Development consisted of creating a request that will be sent to OpenAI's API.

Most people are familiar with the ChatGPT website, where you can enter prompts and ChatGPT will generate a reply. To enter prompts from an external source, like our website, we have to use the API, which has a few differences:

1. You have to use the API like you would any other - making a request to an endpoint with the correct headers and body.
2. The API is (usually) always online and useable, unlike the public-facing website which is often down due to the high demand for ChatGPT.
3. The API costs money to use. At the time of writing, you get $18 in free credits to use with the API, and the tests we did to get this app working amounted to about $0.40.

To get started, we had to learn about the API and what we could pass to it.

The endpoint we want is called 'Completions', where we enter a prompt and ChatGPT returns a 'predicted completion'.

The endpoint body takes several parameters, we used the following:

• model: this is the 'language model' that ChatGPT will use to create the predicted completion. There are several of them, with the main difference being speed, cost, and capability. We used the most capable one, text-davinci-003.
• temperature: this controls how 'risky' the model will be. If set to zero, it will return the same result if the same prompt is entered. The higher it goes, up to 1, the 'riskier' and more unique the result will be. We use 0 if the user selects 'Very standard' for the creativity of the recipe, .5 for 'a little creative', and .9 for 'very creative'.
• max_tokens: this is something of a 'max length' of the generated result. GPT defines tokens as 'common sequences of characters found in text.' You can learn more about them here. We went with 3400. Each model has a different max_tokens limit.
• prompt: this is the string that we are going to give to ChatGPT to predict a response for. Let's dive into that below.
  

Creating the prompt

This is where ChatGPT gets fun. We need to combine the fields we have on the page into a prompt that will be sent to ChatGPT.

The options here are limitless, and you could spend days if not weeks deciding on how to do this. After playing around with it for a while, we settled on the below, which is made up of strings and inputs from the web page:

'Create a step-by-step recipe using the all of the following ingredients, as well as adding in others as appropriate:
{{i["Recipe_Form_ListOfIngredients"]}}.

Do not use or include these ingredients:
{{i["Recipe_Form_IngredientsToExclude"]}}.

The recipe should cater to the following dietary restrictions (or not to any if 'None' is entered):
{{i["Recipe_Form_DietaryRestrictions"]}}.

The recipe should follow this culinary style:
{{i["Recipe_Form_CuisineStyle"]}}.

The other ingredients and the overall recipe should be a recipe that is {{i["Recipe_Form_CreativityLevel"]}}.

Return the result as HTML.
The result should be laid out as follows:

Start with a H2 tag where the recipe is given a name based on what is generated.

"Equipment You Will Need:" (H3 tag, list the equipment needed to prepare the recipe)

"Ingredients You Will Need:" (H3 tag, list the equipment needed to prepare the recipe)
"Steps:" (H3 tag, list the steps required to prepare the recipe)
'

Most of this is very simple: we create the prompt and make it variable using HTML input fields.

However, there is something pretty cool going on here: I am telling it, in English, where and how to use HTML.

If you inspect the results on the web all, you'll notice that it's done what I've asked: the title of the recipe is a <h2> tag, and the next three headings are <h3> tags.

Now that is awesome. As our JamStack developer Oliver pointed out, this could well be the most important thing to happen in computing: the ability to give complex instructions, both in terms of coding and linguistics, to computers, and to get a useful and (usually) accurate result.

Building the request

Sitting in between Webflow and ChatGPT is Wized, a low-code tool for building web apps using Webflow. We'll be writing more about that in the coming weeks, as it's a great tool for quickly building and testing web apps.

And that's it folks. There are some animations, there's a lottie file that plays while the request is being made, and the outcome is slapped into the page as HTML.

All in all it took a few hours and was a lot of fun.

If you have an idea for a business or startup, or any kind of web app where ChatGPT can help you, your staff, or your customers, drop me a DM or an email at ruairi@propellerdigital.agency to set up a free discovery call with me.