Make your own ChatGPT or GPT-3/GPT-4 mini web app in minutes with GuidedTrack

Did you know that in just a few minutes, you can make your own micro app that makes use of ChatGPT or GPT-4 / GPT-3 using GuidedTrack? And you can do this quickly and easily even if you’ve never used Guidedtrack before and even if you’ve never programmed in your life. In this simple-to-follow tutorial, we’ll show you how to do it, and we’ll also give you some examples of mini-apps we made using ChatGPT (for instance, an app that automatically shortens writing so that it can fit into a tweet, as well as a chatbot app that asks useful questions for self-reflection).

Step 1. Generate an OpenAI API key

  1. You will need to either log in to an existing OpenAI account or sign up for a new account if you don’t yet have one. Creating an account is free and takes less than one minute! Once you have an OpenAI account and are signed in, go to the OpenAI API.
  2. Click on “+ create new secret key”. The system will generate an API key that will be displayed only once. Copy the key and keep it somewhere safe, as you will need it to configure your GuidedTrack program to use ChatGPT or GPT-4 / GPT-3.

Step 2. Create and configure your GuidedTrack program

If you already have a GuidedTrack.com account, go here to login. If you don’t have a GuidedTrack account yet, go here to create one for free! Now, go to your programs page in GuidedTrack, and create a new GuidedTrack program and name it whatever you like.

Select Settings on the navigation bar, go to the Services tab and click on “+ New Service”:

Use these values to fill in these fields:

NameChatGPT API
URLhttps://api.openai.com/v1
Usernameanystring
Password… put the API key you generated in step 1 here…

Here’s how it should look once you’ve configured it properly:

When you are done, click Save.

Step 3. Writing your GuidedTrack program

Here is a fully working GuidedTrack program that will use ChatGPT to turn a longer block of text into tweet length automatically. This program will simply ask you for what text you want to turn into a tweet, then it will turn it into a tweet using ChatGPT, then it will ask if you want to generate another tweet from the same text or start over with new text.

Once you’ve completed steps 1 and 2 (described above), just copy and paste this code in your new GuidedTrack program (then hit preview), and you’ll have a working ChatGPT / GPT-3 / GPT-4 based micro web app working immediately! You can also just go here to see the code and copy it.

*label: Start

*question: Type some text below. ChatGPT will then shorten it while accurately preserving the meaning so that it can be used as a tweet that fits into the 280-character limit on Twitter. 🐦
	*type: paragraph
	*save: user_input_chatgpt

>> prompt_for_chatgpt = "Shorten this text while accurately preserving the meaning so that it can be used as a tweet that fits into the 280 character limit on Twitter: “{user_input_chatgpt}”"

*label: API Call

Thinking...

>> model_for_chatgpt = "gpt-3.5-turbo"

*program: ChatGPT API - public

*clear

*if: success_chatgpt = 1

	*{"RESPONSE FROM CHATGPT:"}*

	{response_from_chatgpt}

*if: success_chatgpt = 0

	*{"ERROR FROM THE CHATGPT API:"}*

	{error_from_chatgpt}


*question: {""}
	🔁 Generate another response for the same prompt
		*goto: API Call
	🏁 Start over
		*goto: Start

Now, so that you can understand what this code is doing to make it easier for you to modify it for your purposes, we’ll break down what it does step-by-step.

First, the GuidedTrack code prompts the user to enter the text to be shortened:

*label: Start

*question: Type some text below. ChatGPT will then shorten it while accurately preserving the meaning so that it can be used as a tweet that fits into the 280-character limit on Twitter. 🐦
	*type: paragraph
	*save: user_input_chatgpt

This is what the user will see:

Their answer will be stored in a variable that we have called user_input_chatgpt. Below is how we incorporate it into the prompt for ChatGPT.

>> prompt_for_chatgpt = "Shorten this text while accurately preserving the meaning so that it can be used as a tweet that fits into the 280 character limit on Twitter: “{user_input_chatgpt}”"

Then we invoke the special GuidedTrack subprogram ChatGPT API – public that we have created (if you’re curious what that subprogram does, just click here to see). Since calling the ChatGPT API may take a few seconds, we’re displaying some text (“Thinking…”) to give some feedback to the user of the program as they wait.

*label: API Call

Thinking...

*program: ChatGPT API - public

If everything goes well, ChatGPT API – public returns two variables:

  • success_chatgpt: which will have been set to the value 1 to indicate success
  • response_from_chatgpt: which will be ChatGPT’s response to your prompt

and if there is an error, it will return:

  • success_chatgpt: which will have been set to the value 0 to indicate an error
  • error_code_chatgpt: the error code returned by the API
  • error_type_chatgpt: description of the error in text form
  • error_from_chatgpt: a combination of error code and type

Here is where we read and display the response on the screen:

*clear

*if: success_chatgpt = 1

	*{"RESPONSE FROM CHATGPT:"}*

	{response_from_chatgpt}

*if: success_chatgpt = 0

	*{"ERROR FROM THE CHATGPT API:"}*

	{error_from_chatgpt}

This code clears the screen, checks the value of the variable success_chatgpt, and displays on the screen either ChatGPT’s response or the error that occurred.

At the end of the program, we have added some code so that the user can generate another response for the same prompt or start over: 

*question: {""}
	🔁 Generate another response for the same prompt
		*goto: API Call
	🏁 Start over
		*goto: Start

Notice that we have indented two *goto statements under either option. The first one, *goto: API Call, returns the user to the label with that same identifier (“API Call”), so right before displaying “Thinking” on the screen and sending the prompt to ChatGPT (that is, it gets ChatGPT to generate another response based on the same prompt). The second *goto will take the user to the beginning of the program so that they can enter a new text.

We ran the program in order to tweetify an overview of the novel Don Quixote, and this is one of the outputs it produces (taking a long summary of the novel and summarizing it so it fits into the length of a tweet!):

Don Quixote, a noble from La Mancha, reads so many chivalric romances that he becomes a knight-errant named Don Quixote de la Mancha, recruiting a farmer, Sancho Panza, as his squire. Don Quixote’s imagination leads him to believe he is living a knightly story, while Sancho often brings him back to reality with earthy wit. #DonQuixote

ChatGPT



You can easily share the new GuidedTrack program you made with other people! They can use it anonymously, without having to create an account on GuidedTrack (or you can require login in the settings). Click Publish in the navigation bar, and copy the URL under “Send the program link directly”. Learn more about publishing your program here. Every time your program is run, GuidedTrack saves all the data generated. Go to Data to look at it or download a csv file to see what your users did in your program.

Below is a link to the code of the program we just reviewed and two other sample programs. If you want to Preview them, you need to create your own copy and configure the ChatGPT API service as explained above.

Code of example apps made with ChatGPT:

  • Tweetify Text (program code)
  • Reflective Questions (program code): Given a life problem, ChatGPT will respond with an open-ended question that an empathetic and kind person might ask. This question should help the person with the problem reflect on their feelings, beliefs, and behaviors.
  • What would Confucious say (program code): Given a question, ChatGPT will return answers that Confucius, Buddha, and Marcus Aurelius might have given.
  • ChatGPT API – public: This is the program with the code to communicate with ChatGPT. You can make a copy of this program and tweak it meet your needs.

Please note that any app use built using OpenAI APIs must satisfy the OpenAI usage policies and must go through any review process that OpenAI requires (if they require one at the time of releasing such an app). Note also that the OpenAI API has a fee associated with it, so keep in mind when someone uses your app it will generate fees in your OpenAI account. Here is the OpenAI ChatGPT / GPT-3 / GPT-4 pricing structure. Note that the price depends on the A.I. model that you choose.

Using the program ChatGPT API – public in your own program

In the example above, we have shown how to use the “ChatGPT API – public” program from your own account. This program accepts two inputs, both of which are optional:

  • prompt_for_chatgpt: This is the message to send to ChatGPT. If you don’t set this variable prior to invoking the ChatGPT API – public program, a question will be displayed on the screen prompting the user to enter the prompt for ChatGPT:
  • model_for_chatgpt: Model to use. By default it’s set to “gpt-3.5-turbo” but you can find more information regarding the available models here, and set the value to the desired model before invoking the program. For example:
>> model_for_chatgpt = "gpt-4"

*program: ChatGPT API - public