OpenAI Services ChatGPT Integration Blocks
Overview
An artificial intelligence research and deployment company, OpenAI 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.
OpenAI no longer provides Free Trial credits. An OpenAI paid account is required to make API calls. Please see OpenAI pricing.
Create an OpenAI account and generate a secret API key
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 https://openai.com/api/
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.
OpenAI Integration Setup in Thunkable
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.
Properties
API Key
| Property | Description | Data Type |
|---|---|---|
API Key | Your person API for making requests to the OpenAI API (default key used if this field is left blank) | Text |
Request Settings
Request Settings are passed as a list of Objects, 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 Making Requests documentation.
| Property | Description | Data Type |
|---|---|---|
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 |
Blocks
Functions
Call Text Completion
Make a call to OpenAI's Completion model
| Input Name | Description | Data Type | Required? |
|---|---|---|---|
Prompt | Text prompt for OpenAI to generate text around | Text | Yes |
| Output Name | Description | Data Type |
|---|---|---|
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 |
Call Image Generation
Make a call to OpenAI's Create Image model
| Input Name | Description | Data Type | Required? |
|---|---|---|---|
Prompt | Text prompt for OpenAI to generate image | Text | Yes |
| Output Name | Description | Data Type |
|---|---|---|
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 |
Properties
Set API Key
Set the API Key being used to make calls to the OpenAI API in your app
Get API Key
Get the API Key being used to make calls to the OpenAI API in your app
Set API Request Settings
Use lists and Objects blocks to set the Request Settings of your call to the OpenAI API
Get API Request Settings
Get the Request Settings of your call to the OpenAI API
Your Request Settings will be returned as a list of Objects
Create a Thunkable Project Using the OpenAI Integration
Design Tab: Design the App’s User Interface
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.
Troubleshooting
If you are getting undefined or errors in your response from OpenAI calls, try the following.
Check that your OpenAI secret key is configured.
Ensure your OpenAI account has paid credits or auto-recharge set. See OpenAI billing.
Check that your prompt is correctly set before being sent to OpenAI.
Adding error handling to your OpenAI blocks can better help troubleshoot issues.
Have feedback on this doc? Please take a moment to share your feedback here: Thunkable Docs Feedback. Your valuable insights will help us improve and better serve you in the future.
Last updated
