DragAndDropCode.com
Talk to Socrates
"I would trade all of my technology for an afternoon with Socrates”
STEVE JOBS
The Thunkable visual coding tool empowers everyone to create software and contribute to the AI revolution. In this tutorial, you’ll create a “Conversation with Socrates” app with Thunkable. You can try the app out-- its live!
Even if you have never coded before, you can complete this tutorial in less than an hour. You can run it on your phone, impress your family and friends, and join the AI revolution!
GenAI-powered apps are those that talk to LLMs like OpenAI’s ChatGPT behind the scenes. Such apps can augment the user’s questions with context, add instructions like, “talk in the first person”, and even generate sample questions for the user. The possibilities are endless— you can even setup interactive debates between AIs.
In this app, you'll add instructions so that the AI answers from Socrates perspective and in the first person. Use your prompt engineering skills to build software!
Video Tutorial
The video will walk you through the following:
-
Register for a free account at Thunkable.
-
You may begin with this starter app, which is just the visuals, or start from scratch.
-
Get an OpenAI API key.
-
Code blocks to talk with OpenAI
-
Add prompt engineering so Socrates talks in the first person
-
Add a loading icon so user knows to wait
Code a "Talk to Socrates" OpenAI generative-AI app in the visual coding language Thunkable.
Talk to Socrates
Here is a text version of the tutorial above:
Get a Free Account at Thunkable
Register for a free account at Thunkable.com.
Get an Account and Key at OpenAI.com/api
Login or get an account at openai.com. If you have an account with chatGPT you can use that. Then go to openai.com/api, choose Api keys on the left-menu, and “Create new secret key”.
Copy the key and paste it in a private document— they won’t show you the key when you revisit the page. You’ll need to also paste the key into your Thunkable app (later in this tutorial).
You need credits to use the API in your apps. Sometimes OpenAI gives free credits to new users. You can check if you have credits by choosing Settings | Billings. You can also provide a credit card to buy credits. A few dollars goes along way and you can set it to not auto-recharge.
Create an App at Thunkable Connected to OpenAI
In Thunkable, create a new app named Socrates with:
-
a label near the top (”Talk to Socrates”)
-
an image with a picture of Socrates
-
two text inputs, one for the user to enter text, one for the app to respond.
-
a button with the text “Ask”.
You may begin with this starter app which has just the visuals but no code.
Name the button “AskButton” and name the bottom text input “ResponseText_Input”. Use a text input for the response because they have scroll bars. Set the ResponseText_Input’s multiline property to true and its Editable property to false.
After creating the user interface, choose “Blocks” in the top-left to code the app’s behavior. In the blocks editor, scroll down to the bottom of the left-side menu and click “Advanced”. Then click on the “+” near “Open_AI_Service”. Click on the settings icon and paste your OpenAI API key in. You are now ready to use the OpenAI API within your Thunkable app.
Next, plug together the blocks for your app.
-
Drag in a “when AskButton.Click” block.
-
From the Open_AI_Service1 folder at the bottom of the left panel (within “Advanced”), drag in a “call OpenAI_Service1’s Text Completion” block. This is the block that talks to OpenAI. Place the block in the “When AskButton.Click” block so it will be called when the user clicks the button.
-
Drag in a “TextInput’s Text” light green block and plug it into the “prompt” slot of “TextCompletion. “TextInput” is the component with which the user enters questions. For now, you’ll send the user’s question directly and without adding instructions or context.
-
Drag in a “set ReplyText_Input’s Text” block and place it in the “then do” slof of “TextCompletion”. The blocks in the “then do” slot are executed when the enclosing function completes, e.g., when OpenAI finishes. You’ll just set the ReplyText to the “response” returned from OpenAI (click on the green “response” block directly to get a copy).
Instruct OpenAI to Answer as Socrates
The key to GenAI software is you, as app builder, can use prompt engineering to elicit the kind of response you want when the user asks a question. For instance, if you want Socrates to answer in the first person from his perspective, you can instruct OpenAI in that direction.
In code, you use the “join” block, found in the text folder, to build a prompt which augments the user entry with additional information.
The possibilities are endless— OpenAI can do just about anything, and learning how to prompt itis one of the fastest growing skills in the world. What Thunkable and this example provide is a way to use your prompt engineering skills to create new software.
Add Error Handling
The code above assumes that the call to OpenAI will be successful. When calling any service, you should always check for errors, and the “Text Completion” block indeed provides an “error” output parameter that you can check.
Thunkable provides “if” and “if-else” blocks in the “Control” folder. Drag out an “if-else”, then reconfigure the blocks in the following way:
Now if there is an error, it will be displayed. If there is no error the response will be displayed as before.
Add a Loading Icon
A loading icon lets the user know that the software is working but it will take some time. As the “Text Completion” call to OpenAI can take a few seconds, a loading icon can help.
In the Designer, drag in a “Loading Icon” component. Set its visibility to off as you don’t want it to appear when the app launches. Then modify your blocks in the following way:
What's Next?
You now have the skills to build conversations apps powered by OpenAI. The magical "Text Completion" block gives you access to an expert that knows, well, everything. Let your imagination run wild!