OpenAI Services ChatGPT Integration Blocks
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.
To use the OpenAI ChatGPT model in your Thunkable app, you need to generate a personal Open AI API key. To do this:
- 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.
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.
Set the API Key being used to make calls to the OpenAI API in your app
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.