OpenAI Services ChatGPT Integration Blocks
Last updated
Was this helpful?
Last updated
Was this helpful?
An artificial intelligence research and deployment company, focuses on the creation of safe, artificial, general intelligence. Their latest AI model, called ChatGPT, has the ability to interact with a user in a conversational tone.
When prompted, it composes responses relevant to the topic requested. Thunkable creators can utilize this model in their own apps and tap into the power of AI and natural language generation.
To use the OpenAI ChatGPT model in your Thunkable app, you need to generate a personal Open AI API key. To do this:
Navigate to
Click Sign Up.
On the Overview page, click your avatar to show the menu and select View API Keys.
Select Create new secret key.
Copy the secret key that is provided in the popup window. You will need to paste this into your Thunkable project.
You will only be able to see your OpenAI API key once. You will not be able to copy it after the initial modal closes.
To setup the OpenAI integration in Thunkable:
Navigate to your project’s Blocks tab.
Scroll to the bottom of the blocks panel on the left side to access the Advanced section.
Click the expand chevron to show the Advanced components.
Click the plus icon next to Open AI Services.
Your “Open AI Services” component will appear under the Open AI Services (Beta) drawer. Click the gear icon next to the component's name to access its properties dialog.
Paste your Open Secret API Key in the text box under APIKey (currently set to ‘default’).
Click Submit.
Once you have added at least one Open API component to your app, you will be able to view all of your Open API components under the OpenAPIs drawer in the Advanced section of the Blocks tab.
To edit the properties of an Open API component, click on the ⚙ icon next to the component's name to bring up the properties dialog. You will be able to change the properties and click Done to save your changes, or click Delete to delete the component.
API Key
Your person API for making requests to the OpenAI API (default key used if this field is left blank)
Text
Property
Name of the property you are assigning a value to in your API request
Text
Value
Value of the property you are specifying in your API request
Text
Prompt
Text prompt for OpenAI to generate text around
Text
Yes
response
Generated Text from OpenAI API
Text
error
If an error is encountered while making the API call, returns the error
Text if an error is returned; else null
Prompt
Text prompt for OpenAI to generate image
Text
Yes
response
Generated Image from OpenAI API
Image
error
If an error is encountered while making the API call, returns the error
Text if an error is returned; else null
Prompt
Text prompt for OpenAI to generate text around
Text
No
Image
Image URL or Image base64 type
Image
Yes
response
Generated Text from OpenAI API
Text
error
If an error is encountered while making the API call, returns the error
Text if an error is returned; else null
Prompt
Text prompt for OpenAI to generate speech
Text
Yes
Voice name
The voice that will speak the output
Text
Yes
error
If an error is encountered while making the API call, returns the error
Text if an error is returned; else null
Set the API Key being used to make calls to the OpenAI API in your app. It is not required to use this block if you have set the OpenAI API in the properties dialog.
Get the API Key being used to make calls to the OpenAI API in your app
To utilize the OpenAI ChatGPT integration, your Thunkable project will need a minimum of:
One text input
One label
Two buttons
One image component
Below is a sample minimum viable product design:
To use the OpenAI integration to display text and an image from a query, recreate the following block combination.
Users of this app enter a prompt into the text input.
The app calls the OpenAI API and populates the label and image components when the 'Text' or 'Image' button is clicked.
The label component shows the text output from the OpenAI model. The image component shows the image output from the OpenAI model.
If you are getting undefined or errors in your response from OpenAI calls, try the following.
Check that your prompt is correctly set before being sent to OpenAI.
Adding error handling to your OpenAI blocks can better help troubleshoot issues.
Request Settings are passed as a of , or key-value pairs. In this modal, you can pass the property name and property value in their own fields.
See what kind of settings you can pass in OpenAI's documentation.
Make a call to
Make a call to
Make a call to
Make a call to
Use and blocks to set the of your call to the OpenAI API
Get the of your call to the OpenAI API
Your Request Settings will be returned as a of
Check that your .
Ensure your OpenAI account has paid credits or auto-recharge set. OpenAI no longer offers Free Trial credits. See .
Have feedback on this doc? Please take a moment to share your feedback here: . Your valuable insights will help us improve and better serve you in the future.
