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:

1. Navigate to https://openai.com/api/

2. Click Sign Up.

3. On the Overview page, click your avatar to show the menu and select View API Keys.

4. Select Create new secret key.

5. 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:

1. Navigate to your project’s Blocks tab.

2. Scroll to the bottom of the blocks panel on the left side to access the Advanced section.

3. Click the expand chevron to show the Advanced components.

4. Click the plus icon next to Open AI Services.

5. 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.

6. Paste your Open Secret API Key in the text box under APIKey (currently set to ‘default’).

7. Click Submit.

Properties

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

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 null

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 null

Call Text with Image

Make a call to OpenAI's Vision model

Input Name	Description	Data Type	Required?
Prompt	Text prompt for OpenAI to generate text around	Text	No
Image	Image URL or Image base64 type	Image	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 null

Call Text to Speech

Make a call to OpenAI's Text to speech model

Input Name	Description	Data Type	Required?
Prompt	Text prompt for OpenAI to generate speech	Text	Yes
Voice name	The voice that will speak the output	Text	Yes

Output Name	Description	Data Type
error	If an error is encountered while making the API call, returns the error	Text if an error is returned; else null

Properties

Set API Key

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 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. OpenAI no longer offers Free Trial credits. 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.